Bootstrap Dialog之动态构建对话框

本文主要介绍在实际项目中遇到的如何用Bootstrap Dialog来动态构建对话框,比如表格添加项、修改项的对话框体,不同表格内容是不一样的,类似上一篇使用Bootstrap Table动态构建表格,这里用Bootstrap Dialog来动态构建对话框以适应多种表格,而不用为每个表定制。

简介

Bootstrap Dialog是bootstrap的一款开源插件,用来代替bootstrap原生的模态框,编写模态框往往需要很长的代码,而bootstrap Dialog则大大简化了模态框的编写。关于bootstrap Dialog和模态框可以参考这些链接:模态框Bootstrap Dialog GithubBootstrap Dialog Docs

实现

下面的实现承接上一篇(Bootstrap Table动态构建表格 )的代码,以修改某条记录的对话框为例:

后端

统一的修改记录接口:

1
2
3
4
5
@ResponseBody
@RequestMapping(value = "/data/update", method = { RequestMethod.POST })
public JsonModel update(@RequestParam("tableName") String tableName, @RequestParam("model") String model) {
//...
}

上面代码中接收参数tableName为修改的表名,model为json封装的具体一条修改记录数据。因为不同的表字段不一样,因此必须要用动态拼接sql实现不同表的修改操作。
以下为MyBatis的Mapper.xml中修改记录的sql:

1
2
3
<update id="updateByPrimaryKey" parameterType="java.util.Map">
update ${tableName} set ${updateValues} where id = #{id}
</update>

在service层拼接updateValues参数,并将tableName、updateValues、id封装为map传递给dao层对应的该sql方法。

前端

前端主要是通过获取的各表字段名,动态渲染Bootstrap Dialog的表单窗体,并将表单数据序列化为json发送到后端,如下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
//获取对话框中表单数据,返回json格式
function getFormData(form) {
var formData = form.serializeArray();
var obj = {};
$.each(formData, function () {
if (obj[this.name] !== undefined) {
if (!obj[this.name].push) {
obj[this.name] = [obj[this.name]];
}
obj[this.name].push(this.value || '');
} else {
obj[this.name] = this.value || '';
}
});
return JSON.stringify(obj);
}

//修改配置信息
function edit() {

var select = $('#bootstrap-table').bootstrapTable('getSelections'); //获取表格选中的条目
if (select.length !== 1) {
BootstrapDialog.show({
size: 'size-wide',
title: '提示',
message: $('<div class="imporMsg">请选中一条数据</div>')
});
return;
}

//动态构建对话框的表单窗体,selectValue为下拉框选中的表名,tableFields为表名与字段名的关联数组。
var form = $('<form class="form-horizontal" role="form"></form>');
form.append('<div id="editMsg" class="imporMsg"></div>');
tableFields[selectValue].forEach(function (ele, index) {
if (ele['title'] !== 'id') {
var div = $('<div class="form-group"></div>');
var label = $('<label class="col-sm-2 control-label"></label>');
label.text(ele['title']);
var div2 = $('<div class="col-sm-9"></div>');
var input = $('<input type="text" class="form-control"/>');
input.attr("name", ele['title']);
input.attr("value", select[0][ele['title']]);
div2.append(input);
div.append(label, div2);
form.append(div);
}
});

//构建并显示对话框
BootstrapDialog.show({
size: 'size-wide',
title: '请填写',
message: form, //对话框的内容窗体
buttons: [{ //对话框中的按钮及点击事件
label: '提交',
cssClass: 'btn btn-primary',
action: function (dialog) {
var formData = getFormData(form);
var obj = JSON.parse(formData);
obj.id = select[0]['id'];
var data = JSON.stringify(obj);
$.ajax({
type: 'POST',
data: {model: data, tableName: selectValue}, //向后端发送所修改的表tableName,及具体的修改项内容model
url: '/data/update'
}).done(function (res) {
if (!res.ret) {//校验出错,提示错误信息
$('#editMsg').text(res.errmsg);
} else {
dialog.close();
$('#bootstrap-table').bootstrapTable('refresh');
}
});
}
}]
});
}

页面展示

dialog1

dialog2

以上就是Bootstrap Dialog动态构建对话框的具体实现,代码中有些要根据自己情况改,有问题欢迎交流。

坚持原创技术分享,您的支持将鼓励我继续创作!
分享到: