bootstrap-table 中columns中editable type为select默认使用本列数据

当时用bootstrap-table中的columns中editable中的type为select编辑模式下，我们需要必须制定source，然而source方法又没有一应该列数据的function，通过追踪源码以及修改相应的源码，对该方法进行了实现。

目的

目前有如下的json需要绑定到bootstrap的table中

{ "id": k, "table1": 数据库2, "table1Relation": ["banana", "peach"], "table2": 数据库3, "table2Relation": ["d", "e", "f"] }

说明：其中table1代表的是第一个数据库，table1Relation代表数据库1下面的字段，table2代表的是第二个数据库，table2Relation代表数据库2下面的字段。

现在想将该批数据绑定到bootstrap的table中，其中table1Relation和table1Relation可以作为下拉菜单显示或者可以编辑，如下图所示：

遇到的问题

使用formatter

最初想要通过columns下的formatter绑定function(value,row,index)来创建下拉列表进行处理，代码如下：

var formatFunc = function(value,row,index){    var result = "<select  data-tags=\"true\" data-placeholder=\"Select an option\" class=\"selectpicker show-tick form-control\" data-live-search=\"false\">"    for(var i=0;i<value.length;i++){        result += " <option value=\""+value[i]+"\">"+value[i]+"</option>";    }    result += "</select>";    return result}$("#tableRelation").bootstrapTable({    data: resultList,     uniqueId: "id",     columns: [[         {             title: "表1",             field: "table1"         }, {             title: "关联字段",             field: "table1Relation",             formatter: formatFunc         }, {             title: "表2",             field: "table2"         }, {             title: "对应字段",             field: "table2Relation",             formatter: formatFunc         }, {             title: "操作",             formatter: function (value, row, index) {                 return "<a href='javascript:;' class='btn btn-default' onclick=\"$('#tableRelation').bootstrapTable('removeByUniqueId', " + row.id + ")\">不进行关联</a>"             }         }     ]] });

但是当提交的时候，我们发现，bootstrap会将该下拉列表中所有的数据都会传入后台，而无法仅仅将选中数据传递过去。

使用editable

当使用editable的时候，其代码改为如下：

$("#tableRelation").bootstrapTable({    data: resultList,    uniqueId: "id",    columns: [[        {            title: "表1",            field: "table1"        }, {            title: "关联字段",            field: "table1Relation",            editable: {                type:"select"            }        }, {            title: "表2",            field: "table2"        }, {            title: "对应字段",            field: "table2Relation",            editable: {                type: "select"            }        }, {            title: "操作",            formatter: function (value, row, index) {                return "<a href='javascript:;' class='btn btn-default' onclick=\"$('#tableRelation').bootstrapTable('removeByUniqueId', " + row.id + ")\">不进行关联</a>"            }        }    ]]});

效果如下：

我们发现其不会将table1Relation和table2Relation下对应的数据绑定到下拉列表中去，通过对源码的追踪，知道了该editable必须需要制定source字段，而默认source是不传递对应列下的数据的。
故对源码进行追踪并修改如下：
在js插件bootstrap-table>extensions>editable>bootstrap-table-editable.js下的$.each(this.columns, function (i, column) 方法（78行左右）下添加下几行代码

if (column.editable.type == "select" && column.editable.source == null) {  column.editable.source = that.getData()[0][column.field]}

最终效果就如下图所示了：

该源码已经放在的GitHub上了https://github.com/huanbia/bootstrap-table，可访问index5.htm来查看