EasyUI datagrid添加右键菜单项

js代码

//动态加载数据表格
function InitData() {
    $('#grid').datagrid({
        url: '/Home/Query?r=' + Math.random(), //数据接收URL地址
        method: 'GET',
        iconCls: 'icon-view', //图标
        fit: false, //自动适屏功能
        nowrap: true,
        autoRowHeight: false, //自动行高
        autoRowWidth: true,
        striped: true,
        collapsible: false,
        remoteSort: true,
        idField: 'id', //主键值
        pagination: true, //启用分页
        pageSize: 20,
        pageList: [10, 20, 50, 100, 500, 1000],
        rownumbers: false, //显示行号
        multiSort: true, //启用排序
        sortable: true, //启用排序列
        fitcolumns: true,
        queryParams: $("#searchform").form2json(), //搜索条件查询
        singleSelect: true,
        loadMsg: '数据加载中，请稍后...',
        toolbar: '#divtoolbar',
        onRowContextMenu: onRowContextMenu, //右键。[表头(tab)右键onHeaderContextMenu,树形(tree)右键onContextMenu]
        onHeaderContextMenu: function(e, field) { //表头右键。选择要显示的列
            e.preventDefault();
            if (!cmenu) {
                createColumnMenu();
            }
            cmenu.menu('show', {
                left: e.pageX,
                top: e.pageY
            });
        }
    });
}

var cmenu;
//表头右键菜单
function createColumnMenu() {
    cmenu = $('<div/>').appendTo('body');
    cmenu.menu({
        onClick: function(item) {
            if (item.iconCls == 'icon-ok') {
                $('#grid').datagrid('hideColumn', item.name);
                cmenu.menu('setIcon', {
                    target: item.target,
                    iconCls: 'icon-empty'
                });
            } else {
                $('#grid').datagrid('showColumn', item.name);
                cmenu.menu('setIcon', {
                    target: item.target,
                    iconCls: 'icon-ok'
                });
            }
        }
    });
    var fields = $('#grid').datagrid('getColumnFields');
    for (var i = 0; i < fields.length; i++) {
        var field = fields[i];
        var col = $('#grid').datagrid('getColumnOption', field);
        cmenu.menu('appendItem', {
            text: col.title,
            name: field,
            iconCls: 'icon-ok'
        });
    }
}

//添加右击菜单内容
function onRowContextMenu(e, rowIndex, rowData) {
    e.preventDefault();
    $(this).datagrid('selectRow', rowIndex); //选中当前行
    $('#mm').menu('show', {
        left: e.pageX,
        top: e.pageY
    });
}

 

html代码

<div id="mm" class="easyui-menu" style="width: 100px;">
     <div onclick="add()" data-options="iconCls:'icon-add'">添加</div>
     <div onclick="print()" data-options="iconCls:'icon-print'">打印</div>
     <div onclick="reload()" data-options="iconCls:'icon-reload'">刷新</div>
     @*<div class="menu-sep"></div>*@ //分割线
</div>

至此大功初成。