[原创作者:范喵酱]
在使用bootstrap-table过程中,我们可能会遇到列属性events事件不能生效的问题,并会发现这个问题有时存在有时却又不存在,这是什么原因呢?其实造成events事件失效的原因非常简单,我们只需查看bootstrap-table.js源码,并找到events处理代码段:
$.each(this.header.events, function (i, events) {
if (!events) {
return;
}
// fix bug, if events is defined with namespace
if (typeof events === 'string') {
events = calculateObjectValue(null, events);
}
var field = that.header.fields[i],
fieldIndex = $.inArray(field, that.getVisibleFields());
if (that.options.detailView && !that.options.cardView) {
fieldIndex += 1;
}
that.$body.find('>tr:not(.no-records-found)').each(function () {
//如下代码是分析我们自定义的events事件,查找所属列并分解出方法名与方法作用对象
var $tr = $(this),
$td = $tr.find(that.options.cardView ? '.card-view' : 'td').eq( fieldIndex),
index = key.indexOf(' '),
name = key.substring(0, index),
el = key.substring(index + 1),
func = events[key];
//如下代码是为我们自己定义的events事件参数赋值
$td.find(el).off(name).on(name, function (e) {
var index = $tr.data('index'),
row = that.data[index],
value = row[field];
func.apply(this, [e, value, row, index]);
});
});
}
至此我们找到了导致events事件失效的原因——相同列属性field值定位错误,所以解决方法自然而然出现:令所有的列属性field值唯一。如果一定要出现重复的field值,可以在responseHandler返回结果修饰方法中复制属性至其他名称,然后再设置field,当然,也可以修改bootstrap-table.js源码,增加对列属性的处理,例如增加列属性索引index,通过唯一索引index来定位列。
[转载请说明出处,致谢]