Bootstrap Dialog之动态构建对话框

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

简介

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

实现

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

后端

统一的修改记录接口：

@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：

<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发送到后端，如下。

//获取对话框中表单数据，返回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');
                    }
                });
            }
        }]
    });
}

页面展示

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