今天开发者遇到了一个需求:在一个table数据中,点击某行的某一个列数据就行修改该行该字段的属性值。
前言:在网上搜索了一番,使用x-editable组件去实现这个功能,在下载了一些js文件后,一番捣鼓搞不定(如需要下面js留下地址送你),后来使用自己的方法搞定;下面是使用x-editable组件出来的效果(效果看起来很不错);
思路:
在查看bootstraptable API 后,找到了onclickCell方法,此时我想到之前用过updateRow去更新行数据(前提是在bootstraptable的环境前提下),通过onclickCell获取属性,然后通过updateRow去更新这条数据达到动态修改字段目的。
参考资料:layer Api
onClickCell | click-cell.bs.table | field, value, row, $element | 当单击某一格,就会触发该事件,所需参数如下: - field:此格所在列的字段名 - value:此格的数据 - $element:此行的此列,就是此格(td) |
代码:
onClickCell :function(field, value, row, $element){
console.log(value);
$("#editId").val(value);
var btns = {
btn : ["确定","取消"],
yes : function(index, layero) {//保存
var upIndex = $element.data('index');
row.field=$("#editId").val();
$('#cancelBillListTable').bootstrapTable('updateRow', {
index: upIndex,
row: row
});
layer.close(index);
},
btn2 : function(index, layero) {//清空
}
};
layer.open($.extend({
type : 1,
shadeClose : false,
area : [ '350px', '200px' ],
title : "修改字段属性",
maxmin: true,
cancel : function(){
return true;
},
end: function(index){
return true;
},
shade : 0.5,
scrollbar : false,
btnAlign : 'c', // 居中
content : $("#updateDiv")
},btns));
},
点击后出来的效果:
输入你修改后的值,传递到 row中,调用updataRow方法即可(此处使用的是layer控件的弹出层layer.prompt,上述代码中的是使用的layer.open);