本文主要是介绍右击表格弹出编辑、删除框,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
前言
之前ITOO验收的时候,米老师看到考评系统上用到了右击表格弹出编辑、删除框的效果,要求所有系统都要实现。本想着之前留下有文档,应该会比较容易实现,可是文档里的看着就好费劲,实现起来就更难了。所以想着用一个比较简便的方法实现这个效果,后面听到李卫中用了一个比较简单的方法实现这个效果,看了一下他写的博客,其实我还有些不懂,把他叫过来给我讲讲。看到他调代码的过程,对于这个方法的实现才有些明白,但是后面在实现编辑功能的时候,只能弹出一个编辑框,而编辑框里应该加载有选择行的内容,可是我的代码能力太弱了,但是也没有想着自己去百度,就叫来我的小伙伴王朋波来给我调试,半个小时下来,总算是把编辑框弄好了,但是效果还是有些瑕疵。觉得还可以再完善完善,但是不能再叫他来帮我完善。直到敲手机端的时候遇到了同一个问题,才有了解决办法,到后面也算是达到了自己想要的效果了。
实现步骤
1、编写右击触发事件的js文件
注意:“#Family”是表格名称,编写的时候需要改成和自己系统里的表格名称一致的命名。
<span style="font-size:18px;"><script type="text/javascript">$("#Family").datagrid({onRowContextMenu: function (e, rowIndex, rowData) { //右键时触发事件 //三个参数:e应该是对当前菜单的实例化,以便调用;rowIndex就是当前点击时所在行的索引;rowData当前行的数据 e.preventDefault(); //阻止浏览器捕获右键事件 $(this).datagrid("clearSelections"); //取消所有选中项 $(this).datagrid("selectRow", rowIndex); //根据索引选中该行 $('#mm').menu('show', {//显示右键菜单 left: e.pageX,//在鼠标点击处显示菜单 top: e.pageY});var test = document.getElementById("index");test.value = rowIndex;e.preventDefault(); //阻止浏览器自带的右
这篇关于右击表格弹出编辑、删除框的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!