实现功场景
在BSTable初始化的表格的记录中,点击删除按钮,通过JS端程序,动态删除展示的表格
WX20200216-195157@2x.png
在前端程序的代码如下:
'click .edit_delete': function (e, value, row, index) {
const data = {'stationId': row.stationId, 'userOperatorSeq': row.userOperatorSeq};
UserOperatorInfo.newData = row;
//提交信息
const ajax = new $ax(Feng.ctxPath + "/request/delete", function (data) {
if (data.code === 200) {
Feng.success("删除成功!");
UserOperatorInfo.deleteCurStationUser();
} else {
Feng.error("删除失败! " + data.message + "!");
}
}, function (data) {
Feng.error("删除失败!" + data.responseJSON.message + "!");
});
ajax.set(data);
ajax.start();
//按钮【确认】的回调
layer.closeAll(UserOperatorInfo.layerIndex);
},
// 客户端删除的表格记录的代码
UserOperatorInfo.deleteCurStationUser = function () {
$('#table').bootstrapTable('remove', {field: 'userOperatorSeq', values: [UserOperatorInfo.newData.userOperatorSeq]});
};
bootstrap-table 删除记录的源码如下:
o.prototype.remove = function (b) {
var c, d, e = this.options.data.length;
if (b.hasOwnProperty("field") && b.hasOwnProperty("values")) {
for (c = e - 1; c >= 0; c--) {
d = this.options.data[c], d.hasOwnProperty(b.field) && -1 !== a.inArray(d[b.field], b.values) && (this.options.data.splice(c,
1), "server" === this.options.sidePagination && (this.options.totalRows -= 1));
}
e !== this.options.data.length && (this.initSearch(), this.initPagination(), this.initSort(), this.initBody(!0))
}
}
源码分析:
调用删除的方法需要传两个参数,第一个是比较字段名称,第二个是比较字段的值。
第二个参数需要注意,源码中判断删除哪条记录的时候,进行比较使用的a.inArray(d[b.field], b.values)方法,这个方法要求传入的对象是数组,所以使用remove方法的时候,第二个参数我用中括号扩起来了,以将单个元素转换成数组。
inArray的几种特例(返回大于等于0时,表示能匹配上)
s.inArray("1","1"),返回的0,匹配。
s.inArray("21","21"),返回-1,不匹配。
当传入的第二个参数是字符串,会自动转换成数组。当传入的第一个参数的字符长度是1的时候,第二个参数可以不用转换成数组。但是当传入的第一个参数的字符长度大于1的时候,第二个参数就不能用字符串自动转换的数组了,需要使用通过加中括号转换的数组。
s.inArray("21",["21"]) 返回0,匹配。
网友评论