zoukankan      html  css  js  c++  java
  • 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代码

    1 <div id="mm" class="easyui-menu" style=" 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>

    至此大功初成。

  • 相关阅读:
    vue 中按需引入 echarts
    [Vue warn]: Error in nextTick: "TypeError: Cannot read property 'init' of undefined"
    js计算图片大小(promise)
    git push 提示'You are not allowed to push code to this project'
    echarts canvas 层级太高 导致tooltip被遮盖
    卡片展示(不定宽),最后一行左对齐 的几种实现方式
    styled-components 使用小结
    echarts 平均值及 y轴刻度n等分配置
    react 中使用阿里彩色图标
    php unlink()函数使用
  • 原文地址:https://www.cnblogs.com/Jeffiy/p/4047729.html
Copyright © 2011-2022 走看看