Easyui笔记5：如何实现datagrid右键插入删除？

来源：互联网发布：矿山建设工程预算软件编辑：程序博客网时间：2024/04/26 14:36

最近项目中正在使用easyui本系列文章会记录我在easyui使用中淌过的坑和一些功能的实现方法，用于经验分享以及日后查阅。欢迎转载，转载请注明出处，谢谢~(作者：Colton_Null)

如何实现datagrid右键插入删除？

第一步：屏蔽浏览器右键

如果不屏蔽，浏览器右键菜单会和表格右键菜单冲突。导致浏览器菜单覆盖表格右键菜单。
设置方法：

<script type="text/javascript">    document.oncontextmenu = function(e) {        return false;    };</script>

<div id="menu" class="easyui-menu" style="width: 120px;">        <div id="tscj-menu-insert" onclick="addRow()"            data-options="iconCls:'icon-insp'">插入/div>        <div id="tscj-menu-remove" onclick="removeRow()"            data-options="iconCls:'icon-remp'">删除</div></div>

datagrid:onRowContextMenu

参数：e,index,row
描述：在鼠标右击一行记录的时候触发。

menu:showItem

显示菜单项

menu:show

参数：pos
描述：显示菜单到指定的位置。’pos’参数有2个属性：left：新的左边距位置。top：新的上边距位置。

编写addRow()和removeRow()方法

很简单，当点击“插入”时，调用addRow方法。点击“删除”时，调用removeRow方法。

效果如图

这里写图片描述

html代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script type="text/javascript" src="easyui_1.5/jquery.min.js"></script>    <link rel="stylesheet" href="easyui_1.5/themes/icon.css">    <link rel="stylesheet" href="easyui_1.5/themes/bootstrap/easyui.css">    <script type="text/javascript" src="easyui_1.5/jquery.easyui.min.js"></script>    <script type="text/javascript" src="easyui_1.5/locale/easyui-lang-zh_CN.js"></script>    <script type="text/javascript">        document.oncontextmenu = function(e) {            return false;        };    </script>    <script src="js/onRowContextMenu.js"></script></head><body><div>    <table id="dg"></table></div><div id="menu" class="easyui-menu" style="width: 120px;">    <div id="insert" onclick="addRow()"         data-options="iconCls:'icon-add'">插入</div>    <div id="remove" onclick="removeRow()"         data-options="iconCls:'icon-remove'">删除</div></div></body></html>

js代码：

var globalIndex;// 点击行的索引var onRowContextIndex;// 被右键点击行的索引var dataArray = [{value : 'A'},{value : 'B'}];var comboboxData1 = [{value : '1'},{value : '2'},{value : '3'}];var comboboxData2 = [{value : '4'},{value : '5'},{value : '6'}];$(function () {    $('#dg').datagrid({        width: '500px',        height: '200px',        title: '动态加载数据',        fitColumns: true,        rownumbers: true,        columns: [[            {                field: 'test',                title: '测试列',                width: '20%',                editor: {                    type: 'combobox',                    options: {                        editable: true,                        limitToList: true,                        valueField: 'value',                        textField: "value",                        data: dataArray,                        panelHeight : 'auto',                        onChange : function (newValue, oldValue) {                            if(newValue == "A"){                                var ed =  $("#dg").datagrid("getEditor",{index:globalIndex,field:"test2"});                                $(ed.target).combobox('loadData',comboboxData1);                            }else if(newValue == "B"){                                var ed =  $("#dg").datagrid("getEditor",{index:globalIndex,field:"test2"});                                $(ed.target).combobox('loadData',comboboxData2);                            }                        }                    }                }            },            {                field: 'test2',                title: '测试列2',                width: '20%',                editor: {                    type: 'combobox',                    options: {                        editable: true,                        limitToList: true,                        valueField: 'value',                        textField: "value",                        panelHeight : 'auto',                        data: comboboxData1,                    }                }            }        ]],        onClickRow: function (index, row) {            if(globalIndex != undefined){                $('#dg').datagrid('endEdit', globalIndex);            }            globalIndex = index;            $('#dg').datagrid('beginEdit', index);        },        onRowContextMenu : function(e, index, row) {            onRowContextIndex = index;            $('#menu').menu("showItem",$("#insert")[0]);            $('#menu').menu("showItem",$("#remove")[0]);            $('#menu').menu('show', {                left : e.pageX,                top : e.pageY            });        }    });    $('#dg').datagrid('appendRow',{});});//添加行function addRow(){    $('#dg').datagrid('insertRow',{index : onRowContextIndex,row:{}});}//删除行function removeRow(){    $('#dg').datagrid('deleteRow',onRowContextIndex);}

0 0