背景

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

如何解決

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

• 利用Column options 中的 formatter 將數(shù)據(jù)轉(zhuǎn)換成下拉列表的形式
• 使用bootstrap-table拓展中的editable插件

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

formatter，其配置項(xiàng)為function，有三個(gè)參數(shù)：(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;
}

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

  bootstrap-table是一個(gè)jQuery插件，直接在html上面修改是獲取不到的，要修改需要通過它自己的方法。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)過測(cè)試，發(fā)現(xiàn)$(“.ss”).change（）只是在頁面加載后第一次選擇可以觸發(fā)，后來在bootstrap-table的文檔中發(fā)現(xiàn)了events項(xiàng)，可以監(jiān)聽單元格事件，和formatter 配合著用。

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

• change 傳遞的是jQuery事件
• .ss 是jQuery的類選擇器

上面是在JSFiddle做的一個(gè)小Demo，有源碼和顯示效果，可以參考一下。

小結(jié)

有的時(shí)候，我們會(huì)遇到一個(gè)別人沒有遇到過的問題，并沒有在網(wǎng)上找到直接的解決方案。那么一定要去關(guān)注他的官方文檔，甚至可以直接聯(lián)系作者。

還有以bootstrap-table來說，它本身是一個(gè)jQuery插件，如果理解了一個(gè)jQuery插件具體是如何工作的，對(duì)于解決問題會(huì)是非常有幫助的。

以上所述是小編給大家介紹的Bootstrap Table 在指定列中添加下拉框控件并獲取所選值，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論