右击表格弹出编辑、删除框

2024-08-26 13:38
文章标签 表格 删除 编辑 右击

本文主要是介绍右击表格弹出编辑、删除框,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言

  

    之前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();  //阻止浏览器自带的右

这篇关于右击表格弹出编辑、删除框的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1108718

相关文章

MySQL InnoDB引擎ibdata文件损坏/删除后使用frm和ibd文件恢复数据

《MySQLInnoDB引擎ibdata文件损坏/删除后使用frm和ibd文件恢复数据》mysql的ibdata文件被误删、被恶意修改,没有从库和备份数据的情况下的数据恢复,不能保证数据库所有表数据... 参考:mysql Innodb表空间卸载、迁移、装载的使用方法注意!此方法只适用于innodb_fi

shell脚本自动删除30天以前的文件(最新推荐)

《shell脚本自动删除30天以前的文件(最新推荐)》该文章介绍了如何使用Shell脚本自动删除指定目录下30天以前的文件,并通过crontab设置定时任务,此外,还提供了如何使用Shell脚本删除E... 目录shell脚本自动删除30天以前的文件linux按照日期定时删除elasticsearch索引s

如何解决Pycharm编辑内容时有光标的问题

《如何解决Pycharm编辑内容时有光标的问题》文章介绍了如何在PyCharm中配置VimEmulator插件,包括检查插件是否已安装、下载插件以及安装IdeaVim插件的步骤... 目录Pycharm编辑内容时有光标1.如果Vim Emulator前面有对勾2.www.chinasem.cn如果tools工

docker如何删除悬空镜像

《docker如何删除悬空镜像》文章介绍了如何使用Docker命令删除悬空镜像,以提高服务器空间利用率,通过使用dockerimage命令结合filter和awk工具,可以过滤出没有Tag的镜像,并将... 目录docChina编程ker删除悬空镜像前言悬空镜像docker官方提供的方式自定义方式总结docker

使用Python在Excel中插入、修改、提取和删除超链接

《使用Python在Excel中插入、修改、提取和删除超链接》超链接是Excel中的常用功能,通过点击超链接可以快速跳转到外部网站、本地文件或工作表中的特定单元格,有效提升数据访问的效率和用户体验,这... 目录引言使用工具python在Excel中插入超链接Python修改Excel中的超链接Python

如何利用Python实现给Excel表格截图

《如何利用Python实现给Excel表格截图》这篇文章主要为大家详细介绍了如何利用Python实现给Excel表格截图功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 我搜索了网络上的方案,感觉把 Excel 表格转换为 html 再用 platwright 截图是比China编程较顺

Android kotlin语言实现删除文件的解决方案

《Androidkotlin语言实现删除文件的解决方案》:本文主要介绍Androidkotlin语言实现删除文件的解决方案,在项目开发过程中,尤其是需要跨平台协作的项目,那么删除用户指定的文件的... 目录一、前言二、适用环境三、模板内容1.权限申请2.Activity中的模板一、前言在项目开发过程中,尤

vue基于ElementUI动态设置表格高度的3种方法

《vue基于ElementUI动态设置表格高度的3种方法》ElementUI+vue动态设置表格高度的几种方法,抛砖引玉,还有其它方法动态设置表格高度,大家可以开动脑筋... 方法一、css + js的形式这个方法需要在表格外层设置一个div,原理是将表格的高度设置成外层div的高度,所以外层的div需要

C#实现添加/替换/提取或删除Excel中的图片

《C#实现添加/替换/提取或删除Excel中的图片》在Excel中插入与数据相关的图片,能将关键数据或信息以更直观的方式呈现出来,使文档更加美观,下面我们来看看如何在C#中实现添加/替换/提取或删除E... 在Excandroidel中插入与数据相关的图片,能将关键数据或信息以更直观的方式呈现出来,使文档更

Python脚本实现自动删除C盘临时文件夹

《Python脚本实现自动删除C盘临时文件夹》在日常使用电脑的过程中,临时文件夹往往会积累大量的无用数据,占用宝贵的磁盘空间,下面我们就来看看Python如何通过脚本实现自动删除C盘临时文件夹吧... 目录一、准备工作二、python脚本编写三、脚本解析四、运行脚本五、案例演示六、注意事项七、总结在日常使用