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

最新推荐文章于 2023-03-29 10:35:24 发布

iteye_5810

最新推荐文章于 2023-03-29 10:35:24 发布

阅读量965

点赞数

分类专栏：前端文章标签： easyUI

本文链接：https://blog.csdn.net/iteye_5810/article/details/82679378

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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中如图
[img]http://dl2.iteye.com/upload/attachment/0123/2891/29e42ede-be49-399b-ba30-e4ced87d758b.png[/img]
3、当要求datagrid具有列自定义隐藏和展示功能时，必须把文件jquery.easyui.datagrid.column.js引入