Easyui datagrid 数据表格 表格列头右键菜单选择展示列 JS

Easyui ,数据表格加载出来以后,在表格头右键,会有显示筛选的功能:

如图:

　　

　　然后可以取消勾选,就变成下面这个样子:

　　

　　

　　功能的实现是通过重写了easyui 的 $.fn.datagrid.defaults ,有兴趣的可以自己研究一下,下面给出两种实现.

　　

　　不过需要注意的是,如果你使用了  frozenColumns ,需要注意一下,因为他这里使用的方法,是不适合于冻结列的,当然,也可以自己改一下.

第一种:(这个只是针对于datagrid)

 //表格列头点击事件
 $.fn.datagrid.defaults.onHeaderContextMenu = function(e, field) {
     e.preventDefault();
     var object = this;
     if (!object.rightMenu) {
         createColumnMenu(this);
     }
     object.rightMenu.menu('show', {
         left: e.pageX,
         top: e.pageY
     });
 }
 //属性列右击菜单
 var createColumnMenu = function(object) {
     var cmenu = $('<div/>').appendTo('body');
     cmenu.menu({
         onClick: function(item) {
             if (item.iconCls == 'icon-ok') {
                 $(object).datagrid('hideColumn', item.name);
                 cmenu.menu('setIcon', {
                     target: item.target,
                     iconCls: 'icon-empty'
                 });
             } else {
                 $(object).datagrid('showColumn', item.name);
                 cmenu.menu('setIcon', {
                     target: item.target,
                     iconCls: 'icon-ok'
                 });
             }
         }
     });
     var fields = $(object).datagrid('getColumnFields');
     for (var i = 1; i < fields.length; i++) {
         var field = fields[i];
         var col = $(object).datagrid('getColumnOption', field);
         if (!col.hidden) {
             cmenu.menu('appendItem', {
                 text: col.title,
                 name: field,
                 iconCls: 'icon-ok'
             });
         } else {
             cmenu.menu('appendItem', {
                 text: col.title,
                 name: field,
                 iconCls: 'icon-empty'
             });
         }
     }
     object.rightMenu = cmenu;
 }

第二种:(这个包含datatree)

注意：冻结列不在此菜单中

 //右键点击事件
 var createGridHeaderContextMenu = function(e, field) {
     e.preventDefault();
     var grid = $(this); /* grid本身 */
     var headerContextMenu = this.headerContextMenu; /* grid上的列头菜单对象 */
     if (!headerContextMenu) {
         var tmenu = $('<div style="width:100px;"></div>').appendTo('body');

         var fields = grid.datagrid('getColumnFields');
         for (var i = 0; i < fields.length; i++) {
             var col = grid.datagrid('getColumnOption', fields[i]);
             if (!col.hidden) {
                 $('<div iconCls="icon-ok" field="' + fields[i] + '"/>').html(col.title).appendTo(tmenu);
             } else {
                 $('<div iconCls="icon-empty" field="' + fields[i] + '"/>').html(col.title).appendTo(tmenu);
             }
         }
         //菜单内容获取
         headerContextMenu = this.headerContextMenu = tmenu.menu({
             onClick: function(item) {
                 var field = $(item.target).attr('field');
                 if (item.iconCls == 'icon-ok') {
                     grid.datagrid('hideColumn', field);
                     $(this).menu('setIcon', {
                         target: item.target,
                         iconCls: 'icon-empty'
                     });
                 } else {
                     grid.datagrid('showColumn', field);
                     $(this).menu('setIcon', {
                         target: item.target,
                         iconCls: 'icon-ok'
                     });
                 }
             }
         });
     }
     headerContextMenu.menu('show', {
         left: e.pageX,
         top: e.pageY
     });
 };
 //重写默认
 $.fn.datagrid.defaults.onHeaderContextMenu = createGridHeaderContextMenu;
 $.fn.treegrid.defaults.onHeaderContextMenu = createGridHeaderContextMenu;