easyui datagrid表格头部鼠标右键进行列隐藏和展示

1、实现datagrid自定义初始化onHeaderContextMenu方法
新增文件jquery.easyui.datagrid.column.js

// 动态改变列头.
var cmenu;
function $onHeaderContextMenu(e){
    e.preventDefault();
    if (!cmenu){
        createColumnMenu();
    }
    cmenu.menu('show', {
        left:e.pageX,
        top:e.pageY
    });
}
function createColumnMenu() {
    cmenu = $('<div/>').appendTo('body');
    cmenu.menu({
        onClick : function(item) {
            if (item.iconCls == 'icon-ok') {
                // .datagrid-f为datagrid的class名，是easyui自己加上的。
                // 隐藏列。
                cmenu.menu('setIcon', {
                    target : item.target,
                    iconCls : 'icon-empty'
                });
                $('.datagrid-f').datagrid('hideColumn', item.name);

            } else {
                // 显示列。
                cmenu.menu('setIcon', {
                    target : item.target,
                    iconCls : 'icon-ok'
                });
                $('.datagrid-f').datagrid('showColumn', item.name);

            }
        },
        onHide : function(){
        }
    });
    var fields = $('.datagrid-f').datagrid('getColumnFields');
    for (var i = 0; i < fields.length; i++) {
        var field = fields[i];
        var col = $('.datagrid-f').datagrid('getColumnOption', field);
        cmenu.menu('appendItem', {
            text : col.title,
            name : field,
            iconCls : 'icon-ok'
        });
    }
}

2、把文件中方法引用到jquery.easyui.min.js中如图

3、当要求datagrid具有列自定义隐藏和展示功能时，必须把文件jquery.easyui.datagrid.column.js引入