bootstrap-table列属性events事件失效问题的解决

[原创作者：范喵酱]       

      在使用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);
            }

           //注意，造成events事件失效的原因就在于这两句代码，可以看出，bootsrap-table定位events事件所在列是通过查找列属性field 在列属性数组fields中的位置来确定的，也就是说，当列属性中存在相同的field值时，得到的索引值fieldIndex 永远是第一个field值出现的地方，因此就导致除第一个field值外其他相同field值定位错误，进而导致events事件失效。
            var field = that.header.fields[i],

            fieldIndex = $.inArray(field, that.getVisibleFields());

            if (that.options.detailView && !that.options.cardView) {
                fieldIndex += 1;
            }

            for (var key in events) {
                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来定位列。

[转载请说明出处，致谢]