共用模态框的新增、修改
共用模态框的新增、修改
开发工具与关键技术:MVC
作者:盘洪源
撰写时间:2019年5月1日星期天
在之前我们一般的新增修改都是通过弹出模态框来进行一个新增修改功能的,但大多数都是新增通过新增模态框,修改通过修改模态框,还有一种就是公用一个模态框,这个就是因为新增和修改的模态框因为是一样的,所以这个可以和起来用一个,和起来用一个这个新增修改的保存方法就和以前的有所不同。
下面就拿个例子来说:
这个是模态框的代码,这些CSS的样式就不多说了,这里需要注意的是一个隐藏域的问题,我发现有很多人写这个模态框的时候很多时候都把这个隐藏域给忘记掉的,这个隐藏域是很重要的,因为后面需要通过这个隐藏域来进行一个判断,需要注意的地方就是这里。
然后就是模态框的一个弹出了,通过点击新增或者修改分别弹出各自的按钮,不同的就修改的弹出模态框需要一个数据回填。
这个是弹出修改的一个模态框的代码,新增的其实和这个差不多,只是少了个数据回填,所以只需要把那个数据回填的方法去掉就差不多了。因为修改是通过点击哪一行的修改按钮就修改那一行的数据的,所以这个数据回填是通过这一行的隐藏ID来获取到这一行的数据,所以这个就需要写上一个参数。这个根据Json对象填充form表单这个需要引用插件,这个是已经封装好的方法专门是给form表单回填数据的。
下面这个弹出layer窗体也需要用到一个插件,这个和之前的初始化表格那里用到的layer是一致的。
然后到新增、修改保存按钮的点击事件了,首先这个各自的保存方法在控制器那边写好,这个就不多说了。这个是怎么判断这个是新增还是修改的模态框,然后还需要在相对应保存按钮的点击事件给与相对应的方法路径。这需要怎么做 ?这个就需要用到在一开始在写模态框的HTML中的隐藏域了,首先在弹出修改模态框的时候是通过什么来回填数据的,就是通过隐藏域中的ID来回填数据,而弹出新增模态框就是直接弹出的,通过这个我们就可以判断模态框中的隐藏域中的ID是否有值,如果有值那就是修改了,没有值那就是新增了。一开始我就是没有注意过这个隐藏域的问题,然后去判断当弹出模态框的时候里面如果有内容的就是修改模态框,没有的就是新增模态框,但那样根本不行,这个地方需要注意一下。
判断完后就在相对应的位置写上对应的方法路径就行。以下就是这个保存方法的一个代码。
这个同用一个模态框是在修改和新增的模态框都是一样的时候用,不是很难,只要注意这个隐藏域这个问题就行。
- HttpServletRequest.getParameter()出现乱码现象解决方案
- 海量数据迁移之外部表加载(100天)
- Vue.js实现一个SPA登录页面的过程
- vue实现侧边栏手风琴效果
- 关于vue的使用计算属性VS使用计算方法的问题
- 如何在vue中使用sass
- vue -- v-cloak解决刷新或者加载出现闪烁(显示变量)
- jquery实现上下滑动选择
- echarts图表里label文字过长换行的方法
- 获取Object对象的length
- Vue引发的getter和setter
- 基于Vue.js的大型报告页项目实现过程及问题总结(一)
- 使用vue-axios请求geoJson数据报错的问题
- 在vue-cli项目中使用echarts
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 数据结构算法操作试题(C++/Python)——字符串转换整数 (atoi)
- 数据结构算法操作试题(C++/Python)——电话号码的字母组合
- 数据结构算法操作试题(C++/Python)——删除链表的倒数第N个节点
- Day 7:斐波那契数列
- Day8 :跳台阶
- Linux Signal 一网打尽
- Day9 :变态跳台阶
- Day10 :矩形覆盖
- vue3.0新特性初体验(二)
- 数据结构算法操作试题(C++/Python)——有效的括号
- 数据结构算法操作试题(C++/Python)——合并两个有序链表
- Day11 :二进制中1的个数
- 数据结构算法操作试题(C++/Python)——括号生成
- 数据结构算法操作试题(C++/Python)——合并K个排序链表
- 数据结构算法操作试题(C++/Python)——删除排序数组中的重复项