Easyui-Datagrid—表头灵活显示

         这篇博客是分享给以使用easyUI框架设计页面思想的博友们。同时也受在做项目中的一些启发，整理了这篇博客。

            在ITOO高校云平台项目中，上头一直强调“用户体验度”、“用户体验度”。到底何为用户体验度呢，这让我这个UI系统负责人，甚是捏了一把汗。

             咱先从用户体验度来细说吧：用户体验度是指一个用户访问某个网站的体验效果，这个网站是否有用户想看到的内容和是否带为用户提供一些有价值的内容。

     决定用户体验度的因素

1、网站的访问速度必须够快。

2、空间要稳定。

3、删掉用户很少点击的页面。

4、网站的整体布局要简洁美观。

5、内容丰富。

6、尽可能让用户方便注册登录。

7、增加网站用户的互动性。

       如果你做的软件，猪都会用，那你就成功了；

       如果你做的软件，猪都不会用，那你就是猪。

一、效果图

       本着为人民服务的思想，小编在项目中的DataGrid表格经封装和修改。请看下面效果图：

表头右键事件效果图一：

     表头右键事件效果图二：

          此效果可以满足用户来控制显示列，既方便又简洁。

Ps:编程源于生活，在我们经常使用的资源管理器功能效果相同

 

二、代码实现

        小编客户端运用的是MVC3框架结合jQuery EasyUI开发UI界面，在你要实现的Index母版页视图中添加js的应用，例如小编：

 

        在js添加事件代码即可达到效果:

$(function () {
    $('#dg').datagrid
        ({
        width: 1000,
        onHeaderContextMenu: function (e, field) {
            e.preventDefault();
            if (!cmenu) {
                createColumnMenu();
            }
            cmenu.menu('show', {
                left: e.pageX,
                top: e.pageY
            });
        }
    });
});

var cmenu;
function createColumnMenu() {
    cmenu = $('<div/>').appendTo('body');
    cmenu.menu({
        onClick: function (item) {
            if (item.iconCls == 'icon-ok') {
                $('#dg').datagrid('hideColumn', item.name);
                cmenu.menu('setIcon', {
                    target: item.target,
                    iconCls: 'icon-empty'
                });
            } else {
                $('#dg').datagrid('showColumn', item.name);
                cmenu.menu('setIcon', {
                    target: item.target,
                    iconCls: 'icon-ok'
                });
            }
        }
    });
    var fields = $('#dg').datagrid('getColumnFields');
    for (var i = 1; i < fields.length; i++) {
        var field = fields[i];
        var col = $('#dg').datagrid('getColumnOption', field);
        cmenu.menu('appendItem', {
            text: col.title,
            name: field,
            iconCls: 'icon-ok'
        });
    }
}

       添加js事件代码就能达到上图的效果。

三、总结

      你设计的软件是给用户使用的，而不是给开发人员使用的。

         UI设计在一个系统中的重要性是不容忽视的，我们开发人员要做到：让用户去控制计算机，而不是计算机控制用户；减少用户的记忆负担；保持界面一致。