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来查看