Easyui笔记5：如何实现datagrid右键插入删除？
最近项目中正在使用easyui本系列文章会记录我在easyui使用中淌过的坑和一些功能的实现方法，用于经验分享以及日后查阅。欢迎转载，转载请注明出处，谢谢~(作者：Colton_Null)
如何实现datagrid右键插入删除？
第一步：屏蔽浏览器右键
如果不屏蔽，浏览器右键菜单会和表格右键菜单冲突。导致浏览器菜单覆盖表格右键菜单。
设置方法：
<script type="text/javascript">
document.oncontextmenu = function(e) {
return false;
};
script>第二步：建立easyui-menu标签
<div id="menu" class="easyui-menu" style="width: 120px;">
<div id="tscj-menu-insert" οnclick="addRow()"
data-options="iconCls:'icon-insp'">插入/div>
<div id="tscj-menu-remove" οnclick="removeRow()"
data-options="iconCls:'icon-remp'">删除div>
div>第三步：利用datagrid的onRowContextMenu事件和menu的showItem、show方法显示menu菜单
datagrid:onRowContextMenu
参数：e,index,row
描述：在鼠标右击一行记录的时候触发。
menu:showItem
显示菜单项
menu:show
参数：pos
描述：显示菜单到指定的位置。’pos’参数有2个属性：left：新的左边距位置。top：新的上边距位置。
编写addRow()和removeRow()方法
很简单，当点击“插入”时，调用addRow方法。点击“删除”时，调用removeRow方法。
效果如图
html代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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);
}