码迷,mamicode.com
首页 > 其他好文 > 详细

EasyUI datagrid添加右键菜单项

时间:2014-10-24 12:41:37      阅读:467      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   io   ar   for   sp   数据   div   

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代码

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

至此大功初成。

EasyUI datagrid添加右键菜单项

标签:style   blog   color   io   ar   for   sp   数据   div   

原文地址:http://www.cnblogs.com/luckyiboy/p/4047729.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!