JS組件系列之Bootstrap table表格組件神器【二、父子表和行列調(diào)序】
Bootstrap Table是輕量級(jí)的和功能豐富的以表格的形式顯示的數(shù)據(jù)，支持單選，復(fù)選框，排序，分頁(yè),顯示/隱藏列,固定標(biāo)題滾動(dòng)表,響應(yīng)式設(shè)計(jì)，Ajax加載JSON數(shù)據(jù)，點(diǎn)擊排序的列，卡片視圖等。今天就結(jié)合Bootstrap table的父子表和行列調(diào)序的用法再來(lái)介紹下它稍微高級(jí)點(diǎn)的用法。
bootstrap table系列：
JS表格組件神器bootstrap table詳解（基礎(chǔ)版）
JS組件系列之Bootstrap table表格組件神器【終結(jié)篇】
JS組件系列之Bootstrap table表格組件神器【二、父子表和行列調(diào)序】
一、效果展示
今天稍微改變下方式，先來(lái)看看實(shí)現(xiàn)效果，后面再介紹代碼實(shí)現(xiàn)及注意事項(xiàng)。來(lái)，效果圖來(lái)一發(fā)：
1、父子表效果圖
2、行調(diào)序
調(diào)序前
拖動(dòng)行調(diào)序到第一行
3、列調(diào)序
調(diào)序前
拖動(dòng)列標(biāo)題調(diào)序
調(diào)序后
二、父子表代碼詳解
上章我們介紹Bootstrap table基礎(chǔ)用法的時(shí)候介紹過(guò)，初始化表格的時(shí)候有一個(gè)屬性“detailView”，將它設(shè)置為true，在每行的前面即可看到一個(gè)“+”形狀的圖標(biāo)。點(diǎn)擊這個(gè)圖標(biāo)即觸發(fā)加載子表格的事件。大概的原理就是如此，來(lái)看看代碼，其實(shí)也很簡(jiǎn)單。
1、初始化表格，注冊(cè)行展開(kāi)事件
$("#tb_powerset").bootstrapTable({
url: '/api/MenuApi/GetParentMenu',
method: 'get',
detailView: true,//父子表
//sidePagination: "server",
pageSize: 10,
pageList: [10, 25],
columns: [{
field: 'MENU_NAME',
title: '菜單名稱'
}, {
field: 'MENU_URL',
title: '菜單URL'
}, {
field: 'PARENT_ID',
title: '父級(jí)菜單'
}, {
field: 'MENU_LEVEL',
title: '菜單級(jí)別'
}, ],
//注冊(cè)加載子表的事件。注意下這里的三個(gè)參數(shù)！
onExpandRow: function (index, row, $detail) {
oInit.InitSubTable(index, row, $detail);
}
});
還是來(lái)看看子表加載事件onExpandRow對(duì)應(yīng)方法function (index, row, $detail)的三個(gè)參數(shù)，
index：父表當(dāng)前行的行索引。
row：父表當(dāng)前行的Json數(shù)據(jù)對(duì)象。
$detail：當(dāng)前行下面創(chuàng)建的新行里面的td對(duì)象。
第三個(gè)參數(shù)尤其重要，因?yàn)樯傻淖颖淼膖able在裝載在$detail對(duì)象里面的。bootstrap table為我們生成了$detail這個(gè)對(duì)象，然后我們只需要往它里面填充我們想要的table即可。
2、我們來(lái)看oInit.InitSubTable()這個(gè)方法
//初始化子表格(無(wú)線循環(huán))
oInit.InitSubTable = function (index, row, $detail) {
var parentid = row.MENU_ID;
var cur_table = $detail.html('<table></table>').find('table');
$(cur_table).bootstrapTable({
url: '/api/MenuApi/GetChildrenMenu',
method: 'get',
queryParams: { strParentID: parentid },
ajaxOptions: { strParentID: parentid },
clickToSelect: true,
detailView: true,//父子表
uniqueId: "MENU_ID",
pageSize: 10,
pageList: [10, 25],
columns: [{
checkbox: true
}, {
field: 'MENU_NAME',
title: '菜單名稱'
}, {
field: 'MENU_URL',
title: '菜單URL'
}, {
field: 'PARENT_ID',
title: '父級(jí)菜單'
}, {
field: 'MENU_LEVEL',
title: '菜單級(jí)別'
}, ],
//無(wú)線循環(huán)取子表，直到子表里面沒(méi)有記錄
onExpandRow: function (index, row, $Subdetail) {
oInit.InitSubTable(index, row, $Subdetail);
}
});
};
由此可以看出生成子表的原理就是創(chuàng)建一個(gè)table對(duì)象cur_table，然后再注冊(cè)這個(gè)對(duì)象的表格初始化即可。是不是很簡(jiǎn)單~~
三、行調(diào)序代碼詳解
行調(diào)序的代碼就更簡(jiǎn)單了，來(lái)看看。
1、需要額外引用兩個(gè)js文件
<script src="~/Content/jquery-ui-1.11.4.custom/external/jquery.tablednd.js"></script> <script src="~/Content/bootstrap-table/extensions/reorder-rows/bootstrap-table-reorder-rows.js"></script>
2、在cshtml頁(yè)面定義表格時(shí)，添加兩個(gè)屬性
<table id="tb_order" data-use-row-attr-func="true" data-reorderable-rows="true"></table>
然后js表格初始化的時(shí)候不需要做任何修改，加載出來(lái)的表格即可實(shí)現(xiàn)行調(diào)序的功能。
四、列調(diào)序代碼詳解
和行調(diào)序類似。列調(diào)序的使用如下：
1、額外引用幾個(gè)js和css
<script src="~/Content/bootstrap-table/extensions/reorder-columns/bootstrap-table-reorder-columns.js"></script> <link rel="stylesheet" href="../assets/examples.css"> <link rel="stylesheet" > <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script src="https://rawgit.com/akottr/dragtable/master/jquery.dragtable.js"></script> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
2、在cshtml頁(yè)面定義表格時(shí)，添加一個(gè)屬性
<table id="tb_departments" data-reorderable-columns="true"></table>
其他地方不用做任何修改。加載出來(lái)的表格即可實(shí)現(xiàn)列調(diào)序。有沒(méi)有很簡(jiǎn)單。
五、控件過(guò)濾
本來(lái)這篇準(zhǔn)備結(jié)束的，突然想起上章里面有一個(gè)搜索的功能，好像是服務(wù)端分頁(yè)的時(shí)候搜索功能沒(méi)法使用，于是想起之前再CS里面做過(guò)一個(gè)類似每個(gè)列過(guò)濾的功能，博主好奇心又起來(lái)了，bootstrap table是否也有這種表格每列過(guò)濾的功能，于是查看文檔。結(jié)果不負(fù)所望，還真有~~我們來(lái)看看。
1、效果圖展示
2、代碼示例
（1）引入額外js
<script src="~/Content/bootstrap-table/extensions/filter-control/bootstrap-table-filter-control.js"></script>
（2）定義表格屬性及表頭屬性
<table id="tb_roles" data-filter-control="true"> <thead> <tr> <th data-field="ROLE_NAME" data-filter-control="select">角色名稱</th> <th data-field="DESCRIPTION" data-filter-control="input">角色描述</th> <th data-field="ROLE_DEFAULTURL" data-filter-control="input">角色默認(rèn)頁(yè)面</th> </tr> </thead> </table>
因?yàn)檫@里定義了表頭的屬性，所以，js初始化的時(shí)候就不用定義列了。
（3）js初始化
$('#tb_roles').bootstrapTable({
url: '/Role/GetRole',
method: 'get',
toolbar: '#toolbar',
striped: true,
cache: false,
striped: true,
pagination: true,
sortable: true,
queryParams: function (param) {
return param;
},
queryParamsType: "limit",
detailView: false,//父子表
sidePagination: "server",
pageSize: 10,
pageList: [10, 25, 50, 100],
search: true,
showColumns: true,
showRefresh: true,
minimumCountColumns: 2,
clickToSelect: true,
});
最開(kāi)始，博主以為這種搜索只能用戶客戶端分頁(yè)的情況，可是經(jīng)過(guò)調(diào)試發(fā)現(xiàn)并非如此，原來(lái)搜索的條件都能通過(guò)json傳遞到服務(wù)端。我們來(lái)看調(diào)試的過(guò)程
后臺(tái)接收參數(shù)，并反序列化
這樣我們就能將查詢的條件很好地傳遞到后臺(tái)。很好很強(qiáng)大啊。這樣就免去了擴(kuò)展表格搜索功能的煩惱~~
六、總結(jié)
以上就是bootstrap table的一些擴(kuò)展應(yīng)用?？赡芪床蝗妫€有一些高級(jí)用法也沒(méi)有介紹，比如行、列合并，行列凍結(jié)等等。
以上內(nèi)容是小編給大家介紹的JS組件系列之Bootstrap table表格組件神器【二、父子表和行列調(diào)序】 的相關(guān)知識(shí)，希望對(duì)大家有所幫助！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)留言板，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-10-10
js實(shí)現(xiàn)數(shù)字跳動(dòng)到指定數(shù)字
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)數(shù)字跳動(dòng)到指定數(shù)字，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
微信小程序swiper使用網(wǎng)絡(luò)圖片不顯示問(wèn)題解決
這篇文章主要介紹了微信小程序swiper使用網(wǎng)絡(luò)圖片不顯示問(wèn)題解決,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12
純javascript移動(dòng)優(yōu)先的幻燈片效果
這篇文章主要介紹了純javascript實(shí)現(xiàn)移動(dòng)優(yōu)先的幻燈片效果，感興趣的小伙伴們可以參考一下2015-11-11
JS操作select下拉框動(dòng)態(tài)變動(dòng)(創(chuàng)建/刪除/獲取)
動(dòng)態(tài)創(chuàng)建及刪除select、添加及刪除選項(xiàng)option、獲得選項(xiàng)option的值、獲得選項(xiàng)option的文本等等，感興趣的朋友可以參考下哈2013-06-06
在DWR中實(shí)現(xiàn)直接獲取一個(gè)JAVA類的返回值的兩種方法
本文主要介紹了在DWR中實(shí)現(xiàn)直接獲取一個(gè)JAVA類的返回值的兩種方法，具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2016-12-12
下面小編就為大家?guī)?lái)一篇淺談js的異步執(zhí)行。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
Javascript 實(shí)現(xiàn)TreeView CheckBox全選效果
Javascript 實(shí)現(xiàn)TreeView CheckBox 選中父節(jié)點(diǎn)時(shí)所有子節(jié)點(diǎn)全選，取消時(shí)全部取消2010-01-01
uniapp小程序點(diǎn)擊輸入框時(shí)阻止彈出軟鍵盤的幾種解決方案
在寫項(xiàng)目時(shí)候需要在表單里面加一個(gè)picker選擇器,但選擇input的時(shí)候軟鍵盤與選擇器會(huì)同時(shí)彈出,下面這篇文章主要給大家介紹了關(guān)于uniapp小程序點(diǎn)擊輸入框時(shí)阻止彈出軟鍵盤的幾種解決方案,需要的朋友可以參考下2024-02-02
在js(jquery)中獲得文本框焦點(diǎn)和失去焦點(diǎn)的方法
文章介紹兩個(gè)方法和種是利用javascript onFocus onBlur來(lái)判斷焦點(diǎn)和失去焦點(diǎn)，加一種是利用jquery $("p").blur(); 或$("p").blur(fn)來(lái)實(shí)現(xiàn)，有需要的朋友可以參考一下2012-12-12