背景

最近在使用Bootstrap table ，有一個(gè)在某一列添加一個(gè)下拉列表，并且通過(guò) “getAllSelections”方法獲取所選行的需求，在實(shí)現(xiàn)這個(gè)功能的時(shí)，走了一些彎路，遇到了一些坑。所以今天總結(jié)出來(lái)，既是自己的學(xué)習(xí)，也分享給大家，希望能夠有些幫助。

如何解決

添加這個(gè)下拉列表有以下兩種方法：

這次主要介紹第一種，基本的思路為：首先通過(guò) bootstrap-table 的Column 配置項(xiàng)中的formatter，將獲取到的數(shù)據(jù)轉(zhuǎn)換為包含數(shù)據(jù)的 select 控件。然后根據(jù)用戶選擇項(xiàng)更新對(duì)應(yīng)單元格數(shù)據(jù)，最后通過(guò)getallselection方法獲取所選行數(shù)據(jù)。

formatter，其配置項(xiàng)為function，有三個(gè)參數(shù)：(value,row,index)

formatter: setSelectfunction setSelect(value, row, index) {  var strHtml = "";  if (value == "Item 1")   {    strHtml = "<select class='ss'><option value='Item 1' selected='selected'>Item 1</option><option value='Item 2'>Item 2</option></select>";   }    else    {    strHtml = "<select class='ss'><option value='Item 1' >Item 1</option><option value='Item 2' selected='selected'>Item 2</option></select>";   }   return strHtml;}

到這里，下拉列表已經(jīng)可以顯示出來(lái)了，但是如果直接使用 getallselection 方法獲取所選內(nèi)容會(huì)有問(wèn)題：獲取到的數(shù)據(jù)是默認(rèn)表格初始化加載的內(nèi)容，并不是重新選擇的內(nèi)容。

  bootstrap-table是一個(gè)jQuery插件，直接在html上面修改是獲取不到的，要修改需要通過(guò)它自己的方法。bootstrap-table 在Methods 中提供了一個(gè)updateCell的方法。

updateCell ，包含了三個(gè)參數(shù)（index,field,value）,在某一行的某一列更新value。

$('#table').bootstrapTable('updateCell', {  index: indexSelected,  field: 'name',  value: valueSelected })

events

完成了下拉列表的顯示，有了更新單元格值的方法，還需要做的是為下拉列表的選擇綁定事件，實(shí)現(xiàn)下拉列表選擇->改變單元格值。

我們可以在select元素上綁定onchange事件，或者使用jquery的change 事件。

$(".ss").change(function() { var indexSelected = $(this).parent().parent()[0].rowIndex - 1; var valueSelected = $(this).children('option:selected').val(); $('#table').bootstrapTable('updateCell', {  index: indexSelected,  field: 'name',  value: valueSelected })});

但是經(jīng)過(guò)測(cè)試，發(fā)現(xiàn)$(“.ss”).change（）只是在頁(yè)面加載后第一次選擇可以觸發(fā)，后來(lái)在bootstrap-table的文檔中發(fā)現(xiàn)了events項(xiàng)，可以監(jiān)聽(tīng)單元格事件，和formatter 配合著用。

events: {'change .ss': function (e, value, row, index) {}};//value是當(dāng)前單元格的值，row是當(dāng)前行，index是當(dāng)前行的索引值