【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外掛具體是如何工作的,對於解決問題會是非常有幫助的。