共用模态框的新增、修改

共用模态框的新增、修改

开发工具与关键技术：MVC

作者：盘洪源

撰写时间：2019年5月1日星期天

在之前我们一般的新增修改都是通过弹出模态框来进行一个新增修改功能的，但大多数都是新增通过新增模态框，修改通过修改模态框，还有一种就是公用一个模态框，这个就是因为新增和修改的模态框因为是一样的，所以这个可以和起来用一个，和起来用一个这个新增修改的保存方法就和以前的有所不同。

下面就拿个例子来说：

这个是模态框的代码，这些CSS的样式就不多说了，这里需要注意的是一个隐藏域的问题，我发现有很多人写这个模态框的时候很多时候都把这个隐藏域给忘记掉的，这个隐藏域是很重要的，因为后面需要通过这个隐藏域来进行一个判断，需要注意的地方就是这里。

 然后就是模态框的一个弹出了，通过点击新增或者修改分别弹出各自的按钮，不同的就修改的弹出模态框需要一个数据回填。

 这个是弹出修改的一个模态框的代码，新增的其实和这个差不多，只是少了个数据回填，所以只需要把那个数据回填的方法去掉就差不多了。因为修改是通过点击哪一行的修改按钮就修改那一行的数据的，所以这个数据回填是通过这一行的隐藏ID来获取到这一行的数据，所以这个就需要写上一个参数。这个根据Json对象填充form表单这个需要引用插件，这个是已经封装好的方法专门是给form表单回填数据的。

下面这个弹出layer窗体也需要用到一个插件，这个和之前的初始化表格那里用到的layer是一致的。

然后到新增、修改保存按钮的点击事件了，首先这个各自的保存方法在控制器那边写好，这个就不多说了。这个是怎么判断这个是新增还是修改的模态框，然后还需要在相对应保存按钮的点击事件给与相对应的方法路径。这需要怎么做 ？这个就需要用到在一开始在写模态框的HTML中的隐藏域了，首先在弹出修改模态框的时候是通过什么来回填数据的，就是通过隐藏域中的ID来回填数据，而弹出新增模态框就是直接弹出的，通过这个我们就可以判断模态框中的隐藏域中的ID是否有值，如果有值那就是修改了，没有值那就是新增了。一开始我就是没有注意过这个隐藏域的问题，然后去判断当弹出模态框的时候里面如果有内容的就是修改模态框，没有的就是新增模态框，但那样根本不行，这个地方需要注意一下。

判断完后就在相对应的位置写上对应的方法路径就行。以下就是这个保存方法的一个代码。

这个同用一个模态框是在修改和新增的模态框都是一样的时候用，不是很难，只要注意这个隐藏域这个问题就行。