Easyui-Datagrid—表頭靈活拖動

        上一篇博客中 Easyui-Datagrid—表頭靈活顯示小編給大家分享用戶體驗度的頁面的幾大要點       

        如果你設計的軟件，豬都會用，那你就是軟件工程師。

        如果你設計的軟件，豬都不會用，那你就是豬。

          續上篇博客，設計軟件UI界面原則

• 用戶控制

                  用戶界面設計的一個重要原則是用戶應該總是感覺在控制軟件而不是感覺被軟件所控制。

操作上假設是用戶–而不是計算機或軟件–開始動作。用戶扮演主動角色，而不是扮演被動角色。在需要自動執行任務時，要以允許用戶進行選擇或控制它的方式來實現該自動任務。

該設計理念可用流程形式實現效果

• 清楚一致的設計

             提供一種穩定的感覺，使得界面熟悉而又可預測。包括命令的名稱、信息的可視表示，操作行為，以及元素在屏幕和窗口內部的放置。

頁面樣式和風格要統一。

• 有良好的直覺特性

           提供直接而直觀的界面，沒有多余的其他無用信息ps:功能可以統一放入更多種

• 較快的響應速度

                       保持界面能很快對用戶操作作出反應

提供快捷鍵，可以使速度快的用戶可以控制界面并加快數據的輸入

不要重繪屏幕。

• 簡單且美觀

                       簡單。界面應該很簡單（不是過分單純化）、易于學習、并且易于使用。不相關或冗長的句子擾亂了您的設計，使得用戶難以很容易地提取重要信息；盡可能嘗試建立利用用戶已有的知識和經歷的聯系，可以使用漸進揭示來幫助用戶管理復雜的事物，”漸進揭示”涉及到仔細的信息組織，以便只在恰當的時候才顯示信息。通過隱藏向用戶表達的信息

可以使用菜單來顯示操作或選擇的列表，還可以使用對話框來顯示一組選項。

                      美觀。可視設計是應用程序界面的重要部分。可視屬性提供了非常好的印象，并傳達特定對象的交互行為的重要線索。同時，出現在屏幕上的每一個可視元素也是很重要的，它們可能競爭用戶的注意。提供清楚地促進用戶對表達的信息的理解的連貫環境。圖形或可視設計器的技巧對于這一方面是無價的。

小編努力在做“豬”都能使用的軟件UI界面設計（ps:(*^__^*)嘻嘻……不知道這個比喻恰不恰當，戳到痛處的小盆友無怪哈）

一、效果圖

        只要你用心發現，原來微軟的軟件是那樣的貼心：

經這樣一位“高人”指點，在Easyui-DataGrid上我有了新的想法，為何不加上這樣的效果展示給用戶呢？

表頭拖動事件效果圖：

二、代碼實現

        小編Demo運用的是MVC3框架結合jQueryEasyUI開發UI界面，在你要實現的Index母版頁視圖中添加js的應用，就能實現該效果

         在js添加事件代碼即可達到效果:

//表頭拖動 js 事件
$.extend($.fn.datagrid.methods, {
    columnMoving: function (jq) {
        return jq.each(function () {
            var target = this;
            var cells = $(this).datagrid('getPanel').find('div.datagrid-header td[field]');
            cells.draggable({
                revert: true,
                cursor: 'pointer',
                edge: 5,
                proxy: function (source) {
                    var p = $('<div class="tree-node-proxy tree-dnd-no" />').appendTo('body');
                    p.html($(source).text());
                    p.hide();
                    return p;
                },
                onBeforeDrag: function (e) {
                    e.data.startLeft = $(this).offset().left;
                    e.data.startTop = $(this).offset().top;
                },
                onStartDrag: function () {
                    $(this).draggable('proxy').css({
                        left: -10000,
                        top: -10000
                    });
                },
                onDrag: function (e) {
                    $(this).draggable('proxy').show().css({
                        left: e.pageX + 15,
                        top: e.pageY + 15
                    });
                    return false;
                }
            }).droppable({
                accept: 'td[field]',
                onDragOver: function (e, source) {
                    $(source).draggable('proxy').removeClass('tree-dnd-no').addClass('tree-dnd-yes');
                    $(this).css('border-left', '1px solid #ff0000');
                },
                onDragLeave: function (e, source) {
                    $(source).draggable('proxy').removeClass('tree-dnd-yes').addClass('tree-dnd-no');
                    $(this).css('border-left', 0);
                },
                onDrop: function (e, source) {
                    $(this).css('border-left', 0);
                    var fromField = $(source).attr('field');
                    var toField = $(this).attr('field');
                    setTimeout(function () {
                        moveField(fromField, toField);
                        $(target).datagrid();
                        $(target).datagrid('columnMoving');
                    }, 0);
                }
            });

            // move field to another location
            function moveField(from, to) {
                var columns = $(target).datagrid('options').columns;
                var cc = columns[0];
                var c = _remove(from);
                if (c) {
                    _insert(to, c);
                }

                function _remove(field) {
                    for (var i = 0; i < cc.length; i++) {
                        if (cc[i].field == field) {
                            var c = cc[i];
                            cc.splice(i, 1);
                            return c;
                        }
                    }
                    return null;
                }
                function _insert(field, c) {
                    var newcc = [];
                    for (var i = 0; i < cc.length; i++) {
                        if (cc[i].field == field) {
                            newcc.push(c);
                        }
                        newcc.push(cc[i]);
                    }
                    columns[0] = newcc;
                }
            }
        });
    }
});

三、總結
只有你想不到的，沒有你實現不了的。

開發一個軟件不難，開發一個人人都愛的軟件，還需要努力。

小編上傳了一個Demo ,實現表頭靈活顯示和表頭拖動的效果，喜歡的博友可以下載看看。