[Easyui - Grid] is easyui the datagrid, treegrid increase menu header to display or hide columns

 Easyui to the datagrid, treegrid increase menu header to display or hide columns

 

/ * * 
 * @Author Sun Yu 
 * 
 * @Requires the jQuery, EasyUI 
 * 
 * is datagrid, treegrid increase menu header to display or hide columns, Note: this menu is not frozen columns 
 * / 
var createGridHeaderContextMenu = function (E, Field) { 
    e.preventDefault (); 
    var Grid = $ ( the this ); / * Grid itself * / 
    var headerContextMenu = the this .headerContextMenu; / * column header menu object on the Grid * / 
    IF (! headerContextMenu) {
         var tmenu = $ ( '<div style = "width: 100px;"> </ div>'). the appendTo ( 'body' );
         var fields = grid.datagrid('getColumnFields');
        for ( var i = 0; i < fields.length; i++) {
            var fildOption = grid.datagrid('getColumnOption', fields[i]);
            if (!fildOption.hidden) {
                $('<div iconCls="icon-ok" field="' + fields[i] + '"/>').html(fildOption.title).appendTo(tmenu);
            } else {
                $('<div iconCls="icon-empty" field="' + fields[i] + '"/>').html(fildOption.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;

 

Reproduced in: https: //www.cnblogs.com/Alenliu/p/4970246.html