在 Bootstraptable 插件基础上新增可编辑行
http://www.tuicool.com/articles/YbEVv2v
为什么调用 bootstraptable 原生方法会有问题
首先我必须肯定, bootstraptable 是一款很强大的基于 bootstrap 的插件,下载它的 源码 后,你可以学到很多,开源真的很好。好了,我们回到怎么动态添加可编辑行的问题上,你可以在它的 说明文档 上很容易就找到动态增加行的方法, 于是我们欢欣鼓舞的去使用了,效果很好, 但当我们填好这一行的内容后,再加一行的时候,坑爹的事情发生了,第二个新增可编辑行把第一个给还原了,即变成最初新增编辑行的初始状态,一开始百思不得其解,后来打开源码一看(开源就是好啊),发现是这里的问题
BootstrapTable.prototype.insertRow = function (params) {
if (!params.hasOwnProperty('index') || !params.hasOwnProperty('row')) {
return;
}
this.data.splice(params.index, 0, params.row);
// 调用 initSearch() 重新把 this.options.data 数据初始化了
this.initSearch();
this.initPagination();
this.initSort();
this.initBody(true);
};
this.initSearch() 重新把 this.options.data 数据初始化了,因为我们是在动态编辑行的文本框里填写的内容,这个内容并没有同步到 this.options.data 里,所以调用 this.initSearch(); 这个方法后,被还原也是板上钉钉的事了。既然我们知道了原因,那就开动脑筋去实践解决方案。
怎么解决
我选择的方法是从根上解决,在填写动态增加可编辑行的文本或下拉内容时加上 onchange 事件,将填好的内容,同步更新到 this.options.data 里,这样下次新增可编辑行的时候就不会还原成初始状态了。下面我附上源码
// 这是bootstraptable代码部分
<table id="dbtableDefTb" data-toggle="table" data-toolbar="#toolbar"
data-search="true"
data-show-refresh="true"
data-show-toggle="true"
data-show-columns="true"
data-show-export="true"
data-detail-view="true"
data-detail-formatter="detailFormatter"
data-pagination="true"
data-page-size="50"
data-page-list="[50, 100, ALL]"
data-show-footer="false"
data-side-pagination="server"
data-url="${pageContext.request.contextPath}/dbtableDef/select/cols.oem">
<thead>
<tr>
<th data-field="" data-checkbox="true"></th>
<th data-field="" data-formatter="viewIndex">序号</th>
<th data-field="" data-formatter="viewOptions">操作</th>
<th data-field="dbColName" data-formatter="editCol">数据表字段名称</th>
<th data-field="mdColName" data-formatter="editCol">模型表字段名称</th>
<th data-field="dataType" data-formatter="editColDataType">数据类型</th>
<th data-field="dataTypeLen" data-formatter="editCol">数据长度</th>
<th data-field="isNull" data-formatter="editColIsNull">是否可空</th>
<th data-field="colDescribe" data-formatter="editCol">描述</th>
<th data-field="orderBy" data-formatter="editCol">排序值</th>
</tr>
</thead>
</table>
上面的这些函数,在下面的代码里都可以找到对应的出处
function editCol(value, row, index, key){
return "<div><input type=\"text\" value=\"" + value + "\" onchange='reloadRowData($(this), " + JSON.stringify(row) + ", \"" + key + "\", " + index + ")' /></div>";
}
function editColDataType(value, row, index, key){
var selectNotNullStr = 'selected="selected"';
var selectNullStr = '';
var html = [];
html.push("<select onchange='reloadRowData($(this), " + JSON.stringify(row) + ", \"" + key + "\", " + index + ")'>");
// dataTypeSelect 是在加载页面的时候用 ajax 到后台取出的值,作为这个页面的全局变量赋给了 dataTypeSelect
$.each(dataTypeSelect, function(index, content){
html.push('<option value="' + content.id + '" ' + (value==content.id ? selectNotNullStr : selectNullStr) + '>' + content.text + '</option>');
});
html.push('</select>');
return html.join('');
}
function editColIsNull(value, row, index, key){
var selectNotNullStr = 'selected="selected"';
var selectNullStr = '';
return [
"<select onchange='reloadRowData($(this), " + JSON.stringify(row) + ", \"" + key + "\", " + index + ")'>",
'<option value="1" ' + (value==1 ? selectNotNullStr : selectNullStr) + '>可以为空</option>',
'<option value="0" ' + (value==0 ? selectNotNullStr : selectNullStr) + '>不可为空</option>',
'</select>'
].join('');
}
function viewIndex(value, row, index){
return '<div>' + (index + 1) + '</div>';
}
// 改变 input 编辑框值时,更新 data 数据,便于新增行时原来填写好的数据不会被新增行强制覆盖
function reloadRowData(obj, row, key, index){
row[key] = obj.val();
$('#dbtableDefTb').bootstrapTable('getOptions').data.splice(index, 1, row);
}
function viewOptions(value, row, index){
return [
"<a class=\"like\" href='javascript:addRow(" + index + ", " + JSON.stringify(row) + ")' title=\"新增行\">",
'<i class="glyphicon glyphicon-plus"></i>',
'</a> ',
'<a class="remove" href="javascript:removeRow(\'' + row.dbColName + '\')" title="删除行">',
'<i class="glyphicon glyphicon-remove"></i>',
'</a>'
].join('');
}
function addRow(insertIndex, rowObj){
var insertRow = rowObj;
$.each(insertRow, function(name, value){
insertRow[name] = '';
});
var params = {index:insertIndex + 1, row:insertRow};
$('#dbtableDefTb').bootstrapTable('insertRow', params);
}
细心的朋友会发现, bootstraptable documentation 描述的 column method ,在 data-formatter 回调函数执行的时候是只有三个参数的 ,怎么我这里 function editColIsNull(value, row, index, key) 是四个参数,那个 key 是哪里来的?答案就是,这是我为了实现方便,改了 bootstraptable 源码,
// 添加 field 参数给 formatters 属性
value = calculateObjectValue(column,
that.header.formatters[j], [value, item, i, field], value);
以上代码写好后,再去新增就不会有问题了。
额外的好处
因为是动态编辑行,所以在我们编辑好后,需提交后台保存的时候,如果按传统的模式,我们还需逐个迭代这个 $(‘#dbtableDefTb’) 去把填好的内容打包,在后台再解包,很多不优雅的代码,但是通过在编辑的时候加入 onchange 事件,基本上就是实时更新 table data 数据,因为 data 天然就是 json 数据,所以我们在提交的 时候不用做什么处理,就可以直接提交
function addModel(){
// $('#qry_db_form') 是主表的 form 数据,通过 serializeObject() 方法转换成对象
var addObj = $('#qry_db_form').serializeObject();
// 在 addObj 对象里添加名称为 hiddenDbtableColDefs 数组,即为 bootstraptable data 数组对象
addObj['hiddenDbtableColDefs'] = $('#dbtableDefTb').bootstrapTable('getData');
var url = '${pageContext.request.contextPath}/dbtableDef/addModelDb?${_csrf.parameterName}=${_csrf.token}';
$.postJSON(url, addObj, function(result){
if(result.state == 1){
$.messager.alert("成功", result.message);
}else{
$.messager.alert("失败", result.message);
}
});
}
$.postJSON = function(url, data, callback) {
return jQuery.ajax({
'type': 'POST',
'url': url,
'contentType': 'application/json',
'data': JSON.stringify(data),
'dataType': 'json',
'success': callback,
'error': errorHandler
});
};
后台 spring mvc 代码如下
@RequestMapping(value = "addModelDb", method = RequestMethod.POST, produces = "application/json")
@ResponseBody
public Message addModelDb(@RequestBody DbtableDef dbtableDef) throws Exception {
try {
this.dbtableDefService.insert(dbtableDef);
return new Message(Message.SUCCESS, "保存数据模型成功!");
} catch (Exception e) {
e.printStackTrace();
return new Message(Message.FAILED, "保存数据模型失败!");
}
}
实体 bean 记得添加名为 hiddenDbtableColDefs 的 list 对象,并设置 get 和 set 方法
@Transient
private List<DbtableColDef> hiddenDbtableColDefs;
public List<DbtableColDef> getHiddenDbtableColDefs() {
return hiddenDbtableColDefs;
}
public void setHiddenDbtableColDefs(List<DbtableColDef> hiddenDbtableColDefs) {
this.hiddenDbtableColDefs = hiddenDbtableColDefs;
}