封装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);