最近在使用Bootstrap table ，有一個在某一列新增一個下拉列表，並且通過 “getAllSelections”方法獲取所選行的需求，在實現這個功能的時，走了一些彎路，遇到了一些坑。所以今天總結出來，既是自己的學習，也分享給大家，希望能夠有些幫助。

  新增這個下拉列表有以下兩種方法：

• 利用Column options 中的 formatter 將資料轉換成下拉列表的形式

• 使用bootstrap-table拓展中的editable外掛

  這次主要介紹第一種，基本的思路為：首先通過 bootstrap-table 的Column 配置項中的formatter，將獲取到的資料轉換為包含資料的 select 控制元件。然後根據使用者選擇項更新對應單元格資料，最後通過getallselection方法獲取所選行資料。

formatter，其配置項為function，有三個引數：(value,row,index)

formatter: setSelect
function 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;
}

  到這裡，下拉列表已經可以顯示出來了，但是如果直接使用 getallselection 方法獲取所選內容會有問題：獲取到的資料是預設表格初始化載入的內容，並不是重新選擇的內容。

  bootstrap-table是一個jquery外掛，直接在html上面修改是獲取不到的，要修改需要通過它自己的方法。bootstrap-table 在Methods 中提供了一個updateCell的方法。

updateCell ，包含了三個引數（index,field,value）,在某一行的某一列更新value。

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

  完成了下拉列表的顯示，有了更新單元格值的方法，還需要做的是為下拉列表的選擇繫結事件，實現下拉列表選擇->改變單元格值。

  我們可以在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
  })
});

  但是經過測試，發現$(“.ss”).change（）只是在頁面載入後第一次選擇可以觸發，後來在bootstrap-table的文件中發現了events項，可以監聽單元格事件，和formatter 配合著用。

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

• change 傳遞的是jQuery事件

• .ss 是jQuery的類選擇器

  上面是在JSFiddle做的一個小Demo，有原始碼和顯示效果，可以參考一下。

  有的時候，我們會遇到一個別人沒有遇到過的問題，並沒有在網上找到直接的解決方案。那麼一定要去關注他的官方文件，甚至可以直接聯絡作者。

  還有以bootstrap-table來說，它本身是一個jQuery外掛，如果理解了一個jQuery外掛具體是如何工作的，對於解決問題會是非常有幫助的。