背景

我們注重客戶提出的每個要求，我們充分考慮每一個細節(jié)，我們積極的做好成都網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)服務(wù)，我們努力開拓更好的視野，通過不懈的努力，成都創(chuàng)新互聯(lián)公司贏得了業(yè)內(nèi)的良好聲譽，這一切，也不斷的激勵著我們更好的服務(wù)客戶。 主要業(yè)務(wù)：網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)站設(shè)計,微信小程序開發(fā),網(wǎng)站開發(fā),技術(shù)開發(fā)實力，DIV+CSS，PHP及ASP，ASP.Net，SQL數(shù)據(jù)庫的技術(shù)開發(fā)工程師。

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

如何解決

添加這個下拉列表有以下兩種方法：

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

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

formatter，其配置項為function，有三個參數(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)容會有問題：獲取到的數(shù)據(jù)是默認表格初始化加載的內(nèi)容，并不是重新選擇的內(nèi)容。

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

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

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

events

完成了下拉列表的顯示，有了更新單元格值的方法，還需要做的是為下拉列表的選擇綁定事件，實現(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)過測試，發(fā)現(xiàn)$(“.ss”).change（）只是在頁面加載后第一次選擇可以觸發(fā)，后來在bootstrap-table的文檔中發(fā)現(xiàn)了events項，可以監(jiān)聽單元格事件，和formatter 配合著用。

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

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

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

小結(jié)

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

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

以上所述是小編給大家介紹的Bootstrap Table 在指定列中添加下拉框控件并獲取所選值，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！

網(wǎng)頁標題：BootstrapTable在指定列中添加下拉框控件并獲取所選值
URL鏈接：http://chinadenli.net/article4/jpssoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊、品牌網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站、虛擬主機、響應式網(wǎng)站、網(wǎng)站導航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)