-
web表格增删改_一个“保存”按钮同时存在“增删改”三种操作,该如何去实现?...
2021-01-13 23:02:58现在有些项目因为设计或者优化的缘故,不对表格中的数据进行“增删改”,而是通过最后“保存”按钮的操作,一次性将数据传至服务器,由服务器对数据进行“增删改”。以下通过给用户分配角色这样的功能进行说明。操作...一般情况下,对表格中的数据进行“增删改”操作,都是直接操作数据库。现在有些项目因为设计或者优化的缘故,不对表格中的数据进行“增删改”,而是通过最后“保存”按钮的操作,一次性将数据传至服务器,由服务器对数据进行“增删改”。
以下通过给用户分配角色这样的功能进行说明。
操作界面大致如下(直接手画,略显粗糙,能看明白就行):
给用户分配角色 说明:
- “新增”、“修改”和“删除”都不是直接操作数据库。
- 点击“保存”时才将数据传给服务器。
- 此项目中的删除均为逻辑删除(即,只是对数据打上“删除”状态的标记),不是物理删除。
- 文中说的“ID”为用户角色的主键。
第一种方法:先删后增
- 直接删除用户下的所有角色,将前端传过来的数据统一新增。
优缺点:
- 优点:逻辑简单,容易实现。
- 缺点:会产生大量的删除数据。
第二种方法:通过有无 ID 进行操作判断
- 过滤数据:通过 stream 过滤出无 ID 的数据和有 ID 的数据。
- 新增:无 ID 的数据均为新增的数据,在服务器中直接对这些数据进行新增操作即可。
- 修改和删除:查询出用户所有的角色,将查询出来的ID(ID_A)与前端传过来的有ID的数据(ID_B)进行比对,交集(即 ID_A 与 ID_B都有的数据)即为修改,差集(即 ID_A 有的数据,在 ID_B 中没有)即为删除。
优缺点:
- 优点:影响的数据量较少
- 缺点:实现起来比较复杂
第三种方法:前端部分分类
- 前端分类:前端将被逻辑删除的数据保存在 delete 对象中。
- 数据上传:将表格中的数据(包含有新增的数据和修改的数据)和 delete 对象中的数据一起上传至服务器。
- 后端分类:将表格中的数据分为有 ID 的数据和无 ID 的数据。
- 增删改操作:无 ID 的数据进行新增,有 ID 的数据进行修改,delete 对象中的数据进行删除。
优缺点:
- 优点:影响的数据量较少,前端的分类操作比较容易,后端的分类操作和增删改操作也比较容易。
- 缺点:后端仍需要进行分类操作。
第四种方法:前端全分类
- 前端分类:前端将需要进行新增、修改和删除的数据分别放到 add 对象、update 对象 和 delete 对象中。
- 数据上传:将分类之后的数据上传至服务器。
- 后端增删改操作:对 add 对象中的数据进行新增,对 update 对象中的数据进行修改,对 delete 对象中的数据进行删除。
优缺点:
- 优点:影响的数据量较少,后端容易实现。
- 缺点:前端实现较难。
-
开放源代码的仿Excel的web表格控件(1.3)
2010-02-02 11:10:412、支持backspace删除整行功能:把焦点移到最后一个单元格,按backspace键可以从行尾删到行首; 3、支持alt+x删除焦点所在行; 4、支持焦点设置功能; 5、表头无限制,任意设置; 6、增加操作列,把序号列和操作... -
js 动态生成表格
2012-01-05 21:46:29js 动态生成表格 文章分类:Web前端 javascript控制table ...增加一行:table.insertRow() //默认添加到最后一行,添加到指定行用insertRow(index)方法 ...删除一行:table.deleteRow() //默认删除最后一js 动态生成表格
文章分类:Web前端
javascript控制tablevar table = document.getElementById("tableId")
增加一行:table.insertRow() //默认添加到最后一行,添加到指定行用insertRow(index)方法
删除一行:table.deleteRow() //默认删除最后一行,删除指定行用deleteRow(index)方法
增加一列:table.insertCell() //默认添加到最后一列,添加到指定列用insertCell(index)方法
删除一列:table.deleteCell() //默认删除最后一列,删除指定列用deleteCell(index)方法
统计列数:table.rows.item(0).cells.length
统计行数:table.rows.length
设置单元格colspan:cell.colSpan=2 //注意区分大小写, 如果写colspan会报错
获得单元格宽:table.rows[0].cells[0].offsetWidth
获得单元格高:table.rows[0].cells[0].offsetHeight
设置单元格高度:talbe.rows[0].cells[0].width = xxx
设置单元格背景颜色:table.rows[0].cells[0].style.background="red"
说明:
附录:
insertRow() 方法用于在表格中的指定位置插入一个新行。
语法
tableObject.insertRow(index)
返回值
返回一个 TableRow,表示新插入的行。
说明
该方法创建一个新的 TableRow 对象,表示一个新的 <tr> 标记,并把它插入表中的指定位置。
新行将被插入 index 所在行之前。若 index 等于表中的行数,则新行将被附加到表的末尾。
如果表是空的,则新行将被插入到一个新的 <tbody> 段,该段自身会被插入表中。
抛出
若参数 index 小于 0 或大于等于表中的行数,该方法将抛出代码为 INDEX_SIZE_ERR 的 DOMException 异常。
-
MarkDown
2021-02-25 12:25:20Markdown是一个Web上使用的文本到HTML的转换工具,可以通过简单、以读写的文本格式生成结构话HTML文档。 ...第一行文字编辑完后,接着先后输入两个空格和一个回车,最后再输入第二行文字。 示...Markdown是一种轻量级标记语言,排版语法简洁,让人们更多地关注内容本身而非排版。它使用易读易写的纯文本格式编写文档,可与HTML混编,可导出 HTML、PDF 以及本身的 .md 格式的文件。因简洁、高效、易读、易写,Markdown被大量使用,如Github、Wikipedia等网站,如各大博客平台:WordPress、Drupal、简书等。
千万不要被「标记」、「语言」吓到,Markdown的语法十分简单,常用的标记符号不超过十 个,用于日常写作记录绰绰有余,不到半小时就能完全掌握。
就是这十个不到的标记符号,却能让人优雅地沉浸式记录,专注内容而不是纠结排版, 达到「心中无尘,码字入神」的境界。
1 编辑器和阅读器
在线编辑器:Markdown在线编辑器
离线编辑器:推荐使用Typora
vs2019编辑MarkDown:使用Markdown Editor扩展
2 MarkDown语法
-
(5)添加成功后跳转到添加记录所在的页面(即最后一页); (6)添加失败则提示错误信息。 后台代码实现主要有: /** * 查询输入的员工姓名是否重复 * @param empName * @return */ @RequestMapping(value =...
-
(5)添加成功后跳转到添加记录所在的页面(即最后一页); (6)添加失败则提示错误信息。 后台代码实现主要有: /** * 查询输入的员工姓名是否重复 * @param empName * @return */ @RequestMapping(value =...
-
程序天下:JavaScript实例自学手册
2018-07-08 12:59:5513.39 取当月的最后一天 第 14章 数字、数组和统计函数特效 14.1 边打字边显示字数 14.2 创建随机数 14.3 JavaScript创建二维数组 14.4 截断小数点位数 14.5 删除数组中指定元素 14.6 数字选中后放大 14.7 统计字符... -
html入门到放弃笔记
2018-05-15 15:06:12在一行内允许显示多个元素的,称为 "行内元素" span,i,b,s,u,sup,sub 作用:包裹文本,并处理文本的表现形式 2、块级元素 每个元素独占一行显示的,称为 "块级元素" div,p,h1,h2,h3,h4,h5,h6 作用:布局 ... -
精通JS脚本之ExtJS框架.part2.rar
2013-03-02 13:31:199.3.2 添加一行数据 9.3.3 保存修改结果 9.3.4 验证EditGrid中的数据 9.3.5 限制输入数据的类型 9.4 PropertyGrid属性表格控件 9.4.1 PropertyGrid简介 9.4.2 只读的PropertyGrid 9.4.3 对name列强制排序并... -
JavaScript网页特效范例宝典源码
2013-09-04 10:40:38实例205 在表格中添加行及单元格 322 实例206 删除表中的单元格 324 7.5 表格的特殊效果 325 实例207 透明表格 326 实例208 限制表格的宽度 327 实例209 表格的标题 328 实例210 表格的外阴影 329 实例211 立体表格 ... -
ASP.NET开发实战1200例(第1卷).part2
2016-06-11 20:12:37然后从常用Web服务器控件、ASP.NET安全验证控件、数据绑定控件、Web用户控件和ASP.NET导航控件全面介绍了几乎所有ASP.NET控件应用,接着以AJAX无刷新技术及页面模板设计对ASP.NET客户端进行了详细介绍,最后以高效... -
ASP.NET开发实战1200例(第1卷).part1
2016-06-11 20:07:19然后从常用Web服务器控件、ASP.NET安全验证控件、数据绑定控件、Web用户控件和ASP.NET导航控件全面介绍了几乎所有ASP.NET控件应用,接着以AJAX无刷新技术及页面模板设计对ASP.NET客户端进行了详细介绍,最后以高效... -
ASP.NET开发实战1200例(第1卷).part3
2016-06-11 20:19:00然后从常用Web服务器控件、ASP.NET安全验证控件、数据绑定控件、Web用户控件和ASP.NET导航控件全面介绍了几乎所有ASP.NET控件应用,接着以AJAX无刷新技术及页面模板设计对ASP.NET客户端进行了详细介绍,最后以高效... -
PowerPoint.2007宝典 8/10
2012-04-01 18:39:239.4.2 插入或删除行和列 173 9.4.3 合并与拆分单元格 174 9.5 应用表格样式 174 9.6 格式化表格单元格 175 9.6.1 更改行高和列宽 175 9.6.2 设置表格的边距和对齐方式 176 9.6.3 应用边框 176 9.6.4 ... -
ASP.NET开发实战1200例(第2卷).(清华出版.房大伟.吕双).part1
2016-06-12 09:54:23实例229 用First或Last求数据表中第一条或最后一条 7.11 多表查询(连接查询) 实例230 多表连接查询 实例231 在连接查询中使用表别名 实例232 使用UNION关键字合并多个结果集 7.12 嵌套查询 实例233 简单... -
所有控件最后生成一个dll动态库文件,可以直接集成到qtcreator中拖曳设计使用。 目前已经有qml版本,后期会考虑出pyqt版本,如果用户需求量很大的话。 (二)、效果图 二、输入法 (一)、输入法V2018 未采用...
-
ASP.NET4高级程序设计第4版 带目录PDF 分卷压缩包 part1
2013-08-19 05:43:5116.4.4 具有表格和CSS布局的母版页 16.4.5 母版页和相对路径 16.4.6 通过配置文件应用母版页 16.5 高级母版页 16.5.1 和母版页类交互 16.5.2 动态设置母版页 16.5.3 嵌套母版页 16.6 总结 第17章 ... -
Android 上百实例源码分析以及开源分析 集合打包4
2012-07-10 21:54:03在Jamendo中,主要是通过再定义一个SeparatedListAdapter来进行这个工作,我们来看看它是怎么实现的:我理解的Adapter过程,首先通过调用getCount()来获得总Row数目,然后对一行调用getView进行绘制,因此要实现在... -
JavaScript笔记
2018-09-28 11:21:56也是一种广泛应用于客户端Web开发的脚本语言) 基于对象:网页中的一切元素都是假象!不需要new,即可直接使用 事件驱动:JavaScript的执行都是由事件引发 解释执行:先读到的先执行,后读到的会替代先读的 可以... -
Visual Basic开发实战1200例(第2卷)(完整版).(清华出版.孙秀梅.巩建华).part1
2016-06-15 00:31:36中第一条或最后一条记录 163 3.11 多表查询(连接查询) 164 实例089 利用FROM子句进行多表查询 164 实例090 使用表的别名 166 3.12 嵌套查询 168 实例091 简单的嵌套查询 168 实例092 复杂的嵌套查询 169 ... -
Visual Basic开发实战1200例(第2卷)(完整版).(清华出版.孙秀梅.巩建华).part2
2016-06-15 00:34:01中第一条或最后一条记录 163 3.11 多表查询(连接查询) 164 实例089 利用FROM子句进行多表查询 164 实例090 使用表的别名 166 3.12 嵌套查询 168 实例091 简单的嵌套查询 168 实例092 复杂的嵌套查询 169 ... -
MySQL中文参考手册
2009-06-09 14:29:18+ 3.4.4 运营一个使用MySQL的Web服务器 o 3.5 MySQL的许可证和技术支持费用 + 3.5.1 付款信息 + 3.5.2 联系信息 o 3.6 商业性支持的类型 + 3.6.1 基本的电子邮件支持 + 3.6.2 扩展的电子邮件支持 + 3.6.3 ... -
TortoiseSVN和TortoiseMerge的中文帮助文档(chm格式)
2012-05-30 17:25:234.23. 谁修改了哪一行? 4.23.1. 追溯文件 4.23.2. 追溯不同点 4.24. 版本库浏览器 4.25. 版本分支图 4.25.1. 版本图节点 4.25.2. 更改视图 4.25.3. 使用图 4.25.4. 刷新视图 4.25.5. Pruning Trees 4.26. 导出一个... -
C#编程经验技巧宝典
2008-06-01 08:59:3376 <br>0111 计算字符串中子字符串出现的次数 76 <br>0112 获得字符串中大写字母的个数 77 <br>0113 获得某字符在字符串中最后出现的位置 78 <br>0114 如何找出字符串中某一字符的所有位置 78... -
人力资源管理软件(完全免费)
2011-03-08 11:36:20本人力资源软件包含支持web查询 小秘书提供了常用的办公功能 本人力资源软件包含含有大量的实用工具,如休假管理、宿舍管理、物品领用管理等等,为工作带来方便 导航界面可以切换定制,便于设置自己常用的功能 ... -
ASP.NET.4高级程序设计.part3
2012-12-10 10:21:01第一部分 核心概念 第1 章 asp.net 简介 2 1.1 asp.net 的7 大要点 2 1.1.1 要点1:asp.net 是同.netframework 集成在一起的 2 1.1.2 要点2:asp.net 是编译执行的,而不是解释执行的 3 1.1.3 要点3:asp... -
MYSQL
2007-05-31 14:14:043.4.3 ISP MySQL服务 3.4.4 运营一个使用MySQL的Web服务器 3.5 MySQL的许可证和技术支持费用 3.5.1 付款信息 3.5.2 联系信息 3.6 商业性支持的类型 3.6.1 基本的电子邮件支持 3.6.2... -
delphi 开发经验技巧宝典源码
2010-08-12 16:47:230193 获得指定月的最后一天 127 0194 在指定的日期上加上3月 127 0195 实现倒计时功能 128 0196 判断指定年份是否为闰年 129 0197 调用系统设置日期对话框 129 0198 将秒数转化成hh:mm:ss格式 129 0199... -
MySQL中文参考手册.chm
2007-06-11 21:31:173.4.3 ISP MySQL服务 3.4.4 运营一个使用MySQL的Web服务器 3.5 MySQL的许可证和技术支持费用 3.5.1 付款信息 3.5.2 联系信息 3.6 商业性支持的类型 3.6.1 基本的电子邮件支持 ... -
软件工程教程
2012-07-06 23:10:29删除操作一旦执行,立即被监听器捕获到,进而在执行 删除操作前执行自定义的函数体,即判断实体有无undeletable标签,有则中断删除操作,无则正常删除。 用例图 关系 关联关系 ;依赖关系 ;泛化关系;关系的...
-
朱老师c++课程第3部分-3.5STL的其他容器讲解
-
很多朋友都是从此绝交的,故事很短,却说穿了人性!
-
【硬核】一线Python程序员实战经验分享(1)
-
牛牛量化策略交易
-
C++代码规范和Doxygen根据注释自动生成手册
-
PHP——个人信息管理系统
-
精益开发治理的最佳实践,第2部分:过程和度量
-
2021 年 Cnetos 7 下 nodejs 的安装
-
MySQL 性能优化(思路拓展及实操)
-
两个栈实现队列
-
win10 php安装seaslog扩展
-
前端websocket与php后台连接
-
PHP超全局变量
-
前端学习第七天
-
FTP 文件传输服务
-
记录10天刷完PAT的过程
-
移动界面隐喻设计
-
浅谈用户引导设计
-
MySQL 8.0.12 时区设置和修改
-
产品团队管理经验一枚