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" style="position:absolute;border:1px solid #ff0000"/>').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 ,实现表头灵活显示和表头拖动的效果，喜欢的博友可以下载看看。