本文主要介绍在实际项目中遇到的如何用Bootstrap Dialog来动态构建对话框,比如表格添加项、修改项的对话框体,不同表格内容是不一样的,类似上一篇使用Bootstrap Table动态构建表格,这里用Bootstrap Dialog来动态构建对话框以适应多种表格,而不用为每个表定制。
简介
Bootstrap Dialog是bootstrap的一款开源插件,用来代替bootstrap原生的模态框,编写模态框往往需要很长的代码,而bootstrap Dialog则大大简化了模态框的编写。关于bootstrap Dialog和模态框可以参考这些链接:模态框、Bootstrap Dialog Github、Bootstrap Dialog Docs。
实现
下面的实现承接上一篇(Bootstrap Table动态构建表格 )的代码,以修改某条记录的对话框为例:
后端
统一的修改记录接口:
1 |
|
上面代码中接收参数tableName为修改的表名,model为json封装的具体一条修改记录数据。因为不同的表字段不一样,因此必须要用动态拼接sql实现不同表的修改操作。
以下为MyBatis的Mapper.xml中修改记录的sql:
1 | <update id="updateByPrimaryKey" parameterType="java.util.Map"> |
在service层拼接updateValues参数,并将tableName、updateValues、id封装为map传递给dao层对应的该sql方法。
前端
前端主要是通过获取的各表字段名,动态渲染Bootstrap Dialog的表单窗体,并将表单数据序列化为json发送到后端,如下。
1 | //获取对话框中表单数据,返回json格式 |
页面展示
以上就是Bootstrap Dialog动态构建对话框的具体实现,代码中有些要根据自己情况改,有问题欢迎交流。