Bootstrap Table 在指定列中添加下拉框控件并獲取所選值

背景

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

events

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

我們可以在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插件具體是如何工作的，對于解決問題會是非常有幫助的。

以上所述是小編給大家介紹的Bootstrap Table 在指定列中添加下拉框控件并獲取所選值，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！