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;