新增修改共用模态框

新增修改共用模态框

这里建的模态框用的是bootstrap-4.1.3-dist css封装的类modal和fade实现的
modal类他是自带隐藏属性display：none的就是将整个布局隐藏起来
再通过某些事件触发布局的显示形成模态框的效果
刚开始设置了modal和fade这两个类时给页面添加的属性如下图

然后通过做新增修改时给新增修改按钮添加点击事件触发模态框的布局显示
也就是给模态框添加bootstrap-4.1.3-dist js封装的方法modal(“show”)

他自带display：block属性将模态框布局显示出来如下图

上面讲的是模态框的制作下面就来讲制作好的模态框
给新增修改共用的原理和常见问题
由于新增和修改数据的方法是不一样的所以共用模态框不区分开来新增和修改
肯定会出现问题的，但是怎么区分呢？
因为新增和修改除了实现的代码不同外修改比新增还多了个数据回填
数据回填是让你清楚的看到修改的是哪条数据同时也是区分新增和修改的关键
你只要在form表单里面添加一个隐藏域也就是给他添加一个隐藏起来的input标签

他是用来接收数据回填时的ID数据的，因为他是隐藏的同时又进行了数据回填
对于新增来说隐藏的input是没法输入数据的，但修改回填数据时给隐藏的input
添加了数据，我们就可以通过判断隐藏的input是否有数据来区分新增和修改，
有数据就是修改没有数据就是新增
如下图就是判断新增和修改调用不同的方法

虽然通过数据回填到隐藏域来判断调用新增和修改的不同方法
但还是存在一些问题的。
因为数据回填是点击修改按钮是触发的

一但触发给隐藏域赋了值隐藏域就是一直存在数据的
这样会导致判断出现不管是新增还是修改都一直是调用修改的方法的
这就不是我们想要的结果了，那要怎么去处呢?
我们是在点击修改按钮打开模态框时给隐藏域实现数据回填的
那我们需要做的是关闭修改模态框时给隐藏域清空数据
所谓的清空数据就是给隐藏域赋值为空
然而关闭修改模态框的情况有很多种
每一种我们都要考虑到给隐藏域赋值为空
我们要做到打开回填关闭清空的效果才能使判断不出错
使得新增和修改能够共用模态框不发生冲突
把隐藏域赋值为空的写法如下图