Easyui笔记5:如何实现datagrid右键插入删除?
2017-02-23 23:46
211 查看
最近项目中正在使用easyui本系列文章会记录我在easyui使用中淌过的坑和一些功能的实现方法,用于经验分享以及日后查阅。欢迎转载,转载请注明出处,谢谢~(作者:Colton_Null)
设置方法:
描述:在鼠标右击一行记录的时候触发。
描述:显示菜单到指定的位置。’pos’参数有2个属性:left:新的左边距位置。top:新的上边距位置。
如何实现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" onclick="addRow()" data-options="iconCls:'icon-insp'">插入/div> <div id="tscj-menu-remove" onclick="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代码:
<!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
4000
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); }
相关文章推荐
- Easyui笔记5:如何实现datagrid右键插入删除?
- Easyui笔记5:如何实现datagrid右键插入删除?
- Easyui笔记5:如何实现datagrid右键插入删除?
- Easyui笔记5:如何实现datagrid右键插入删除?
- Easyui笔记5:如何实现datagrid右键插入删除?
- Easyui笔记5:如何实现datagrid右键插入删除?
- Easyui笔记5:如何实现datagrid右键插入删除?
- Easyui笔记5:如何实现datagrid右键插入删除?
- Easyui笔记5:如何实现datagrid右键插入删除?
- Easyui笔记5:如何实现datagrid右键插入删除?
- Easyui笔记5:如何实现datagrid右键插入删除?
- Easyui笔记5:如何实现datagrid右键插入删除?
- Easyui笔记5:如何实现datagrid右键插入删除?
- Easyui笔记5:如何实现datagrid右键插入删除?
- Easyui笔记5:如何实现datagrid右键插入删除?
- C# winform datagridview中如何实现鼠标右键点击一行数据出现一个带有删除的菜单,并能执行删除操作?
- 如何实现双向链表的插入、删除操作
- 如何使用c语言实现双向链表的插入删除操作
- C#如何实现在PPT文档中插入、编辑和删除表格的操作
- PostgreSQL_如何实现批量更新、删除、插入