bootstrap-table 主子表操作

封装layer提示框

(function($){
    $.extend({
        modal: {
            // 显示图标
            icon: function(type) {
                var icon = "";
                if (type == modal_status.WARNING) {
                    icon = 0;
                } else if (type == modal_status.SUCCESS) {
                    icon = 1;
                } else if (type == modal_status.FAIL) {
                    icon = 2;
                } else {
                    icon = 3;
                }
                return icon;
            },
            // 消息提示
            msg: function(content, type, time) {
                if (type != undefined) {
                    layer.msg(content, { icon: $.modal.icon(type), time: time || 1000, shift: 5 });
                } else {
                    layer.msg(content);
                }
            },
            // 错误消息
            msgError: function(content, time) {
                $.modal.msg(content, modal_status.FAIL, time);
            },
            // 成功消息
            msgSuccess: function(content) {
                $.modal.msg(content, modal_status.SUCCESS);
            },
            // 警告消息
            msgWarning: function(content, time) {
                $.modal.msg(content, modal_status.WARNING, time);
            }
        }
    });
}(jQuery));

使用bootstrap-table

// 主子表操作封装处理
var sub = {
    editColumn: function() {
        var count = $("#" + table.options.id).bootstrapTable('getData').length;
        var params = new Array();
        for (var dataIndex = 0; dataIndex <= count; dataIndex++) {
            var columns = $('#' + table.options.id + ' tr[data-index="' + dataIndex + '"] td');
            var obj = new Object();
            for (var i = 0; i < columns.length; i++) {
                var inputValue = $(columns[i]).find('input');
                var selectValue = $(columns[i]).find('select');
                var key = table.options.columns[i].field;
                if ($.common.isNotEmpty(inputValue.val())) {
                    obj[key] = inputValue.val();
                } else if ($.common.isNotEmpty(selectValue.val())) {
                    obj[key] = selectValue.val();
                } else {
                    obj[key] = "";
                }
            }
            params.push({ index: dataIndex, row: obj });
        }
        $("#" + table.options.id).bootstrapTable("updateRow", params);
    },
    delColumn: function(column) {
        sub.editColumn();
        var subColumn = $.common.isEmpty(column) ? "index" : column;
        var ids = $.table.selectColumns(subColumn);
        if (ids.length == 0) {
            $.modal.alertWarning("请至少选择一条记录");
            return;
        }
        $("#" + table.options.id).bootstrapTable('remove', { field: subColumn, values: ids });
    }
};

准备列表中父亲的模板

<script id="provinceTpl" type="text/x-jquery-tmpl">
    <select class="form-control province" name="province[${index}].provinceCode">
        <option value="">请选择</option>
        {{each(i,p) provinces}}
            <option value="${p.code}" {{if sel == p.code}}selected{{/if}}>${p.name}</option>
        {{/each}}
    </select>
</script>

准备列表中孩子的模板

<script id="cityTpl" type="text/x-jquery-tmpl">
    <select class="form-control city" name="city[${index}].cityCode">
        <option value="">请选择</option>
        {{each(i,c) cities}}
            <option value="${c.code}" {{if sel == c.code}}selected{{/if}}>${c.name}</option>
        {{/each}}
    </select>
</script>

页面上准备一个列表

<div class="row">
    <div class="col-sm-12">
        <button type="button" class="btn btn-white btn-sm" onclick="addColumn()"><i class="fa fa-plus"> 增加</i></button>
        <button type="button" class="btn btn-white btn-sm" onclick="sub.delColumn()"><i class="fa fa-minus"> 删除</i></button>
        <div class="col-sm-12 select-table" style="margin-top: 10px;">
            <table id="bootstrap-table"></table>
        </div>
    </div>
</div>

js中编写代码：

var provinces = [[${provinces}]]
var cities = [[${cities}]];
//设置表格
$(function(){
    var options = {columns:[
            {
                field: 'province',
                align: 'center',
                title: '省',
                formatter: function(value, row, index) {
                    var province = JSON.parse(provinces);
                    var data = {index: index, provinces: province, sel: value};
                    return $("#provinceTpl").tmpl(data).html();
                }
            },
            {
                field: 'city',
                align: 'center',
                title: '市',
                formatter: function(value, row, index) {
                    var cities = JSON.parse(cities);
                    var temp = [];
                    $.each(cities, function(i, ele){
                        if(ele != null && ele.city == row.city){
                            temp.push(ele)
                        }
                    })
                    var data = [{ index: index, city: temp, sel: value}];
                    return $("#cityTpl").tmpl(data).html();
                }
            }
        ]
    };
    $.table.init(options);
});

function addColumn(province, city) {
    var count = $("#bootstrap-table").bootstrapTable('getData').length;
    sub.editColumn();
    $("bootstrap-table").bootstrapTable('insertRow', {
        index: count,
        row: {
            index: $.table.serialNumber(count),
            province: province,
            city: city
        }
    });
}

控制器

ModelMap mmap = new ModelMap();
List<String> provinceList = new ArrayList<String>();
provinceList.put("南京");
mmap.put("provinces", new Gson().toJson(provinceList));

List<String> cityList = new ArrayList<String>();
cityList.put("江宁区");
mmap.put("cities", new Gson().toJson(cityList);