easy ui datagrid如何添加右键菜单,实现右键删除功能啊?

解决方案 »

  1.   

    easy ui datagrid如何添加右键菜单contextmenu - -!
      

  2.   

    加个onRowContextMenu事件
        $(function () {
            $('#tt').datagrid({
                url: 'datagrid_data2.json',
                title: 'DataGrid - ContextMenu',
                width: 600,
                height: 300,
                fitColumns: true,
                columns: [[
    { field: 'itemid', title: 'Item ID', width: 80 },
    { field: 'productid', title: 'Product ID', width: 100 },
    { field: 'listprice', title: 'List Price', width: 80, align: 'right' },
    { field: 'unitcost', title: 'Unit Cost', width: 80, align: 'right' },
    { field: 'attr1', title: 'Attribute', width: 150 },
    { field: 'status', title: 'Status', width: 60, align: 'center' }
    ]],
                onRowContextMenu: function (e, field) {
                    e.preventDefault();
                    if (!$('#tmenu').length) {
                        createColumnMenu();
                    }
                    $('#tmenu').menu('show', {
                        left: e.pageX,
                        top: e.pageY
                    });
                }
            });
        });    function createColumnMenu() {
            var tmenu = $('<div id="tmenu" style="width:100px;"></div>').appendTo('body');
            var fields = $('#tt').datagrid('getColumnFields');
            for (var i = 0; i < fields.length; i++) {
                $('<div iconCls="icon-ok"/>').html(fields[i]).appendTo(tmenu);
            }
            tmenu.menu({
                onClick: function (item) {
                    if (item.iconCls == 'icon-ok') {
                        $('#tt').datagrid('hideColumn', item.text);
                        tmenu.menu('setIcon', {
                            target: item.target,
                            iconCls: 'icon-empty'
                        });
                    } else {
                        $('#tt').datagrid('showColumn', item.text);
                        tmenu.menu('setIcon', {
                            target: item.target,
                            iconCls: 'icon-ok'
                        });
                    }
                }
            });
        }