JS組件系列之Bootstrap table表格組件神器【二、父子表和行列調(diào)序】
Bootstrap Table是輕量級的和功能豐富的以表格的形式顯示的數(shù)據(jù),支持單選,復(fù)選框,排序,分頁,顯示/隱藏列,固定標(biāo)題滾動表,響應(yīng)式設(shè)計,Ajax加載JSON數(shù)據(jù),點(diǎn)擊排序的列,卡片視圖等。今天就結(jié)合Bootstrap table的父子表和行列調(diào)序的用法再來介紹下它稍微高級點(diǎn)的用法。
bootstrap table系列:
JS表格組件神器bootstrap table詳解(基礎(chǔ)版)
JS組件系列之Bootstrap table表格組件神器【終結(jié)篇】
JS組件系列之Bootstrap table表格組件神器【二、父子表和行列調(diào)序】
一、效果展示
今天稍微改變下方式,先來看看實現(xiàn)效果,后面再介紹代碼實現(xiàn)及注意事項。來,效果圖來一發(fā):
1、父子表效果圖
2、行調(diào)序
調(diào)序前
拖動行調(diào)序到第一行
3、列調(diào)序
調(diào)序前
拖動列標(biāo)題調(diào)序
調(diào)序后
二、父子表代碼詳解
上章我們介紹Bootstrap table基礎(chǔ)用法的時候介紹過,初始化表格的時候有一個屬性“detailView”,將它設(shè)置為true,在每行的前面即可看到一個“+”形狀的圖標(biāo)。點(diǎn)擊這個圖標(biāo)即觸發(fā)加載子表格的事件。大概的原理就是如此,來看看代碼,其實也很簡單。
1、初始化表格,注冊行展開事件
$("#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: '父級菜單' }, { field: 'MENU_LEVEL', title: '菜單級別' }, ], //注冊加載子表的事件。注意下這里的三個參數(shù)! onExpandRow: function (index, row, $detail) { oInit.InitSubTable(index, row, $detail); } });
還是來看看子表加載事件onExpandRow對應(yīng)方法function (index, row, $detail)的三個參數(shù),
index:父表當(dāng)前行的行索引。
row:父表當(dāng)前行的Json數(shù)據(jù)對象。
$detail:當(dāng)前行下面創(chuàng)建的新行里面的td對象。
第三個參數(shù)尤其重要,因為生成的子表的table在裝載在$detail對象里面的。bootstrap table為我們生成了$detail這個對象,然后我們只需要往它里面填充我們想要的table即可。
2、我們來看oInit.InitSubTable()這個方法
//初始化子表格(無線循環(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: '父級菜單' }, { field: 'MENU_LEVEL', title: '菜單級別' }, ], //無線循環(huán)取子表,直到子表里面沒有記錄 onExpandRow: function (index, row, $Subdetail) { oInit.InitSubTable(index, row, $Subdetail); } }); };
由此可以看出生成子表的原理就是創(chuàng)建一個table對象cur_table,然后再注冊這個對象的表格初始化即可。是不是很簡單~~
三、行調(diào)序代碼詳解
行調(diào)序的代碼就更簡單了,來看看。
1、需要額外引用兩個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頁面定義表格時,添加兩個屬性
<table id="tb_order" data-use-row-attr-func="true" data-reorderable-rows="true"></table>
然后js表格初始化的時候不需要做任何修改,加載出來的表格即可實現(xiàn)行調(diào)序的功能。
四、列調(diào)序代碼詳解
和行調(diào)序類似。列調(diào)序的使用如下:
1、額外引用幾個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頁面定義表格時,添加一個屬性
<table id="tb_departments" data-reorderable-columns="true"></table>
其他地方不用做任何修改。加載出來的表格即可實現(xiàn)列調(diào)序。有沒有很簡單。
五、控件過濾
本來這篇準(zhǔn)備結(jié)束的,突然想起上章里面有一個搜索的功能,好像是服務(wù)端分頁的時候搜索功能沒法使用,于是想起之前再CS里面做過一個類似每個列過濾的功能,博主好奇心又起來了,bootstrap table是否也有這種表格每列過濾的功能,于是查看文檔。結(jié)果不負(fù)所望,還真有~~我們來看看。
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)頁面</th> </tr> </thead> </table>
因為這里定義了表頭的屬性,所以,js初始化的時候就不用定義列了。
(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, });
最開始,博主以為這種搜索只能用戶客戶端分頁的情況,可是經(jīng)過調(diào)試發(fā)現(xiàn)并非如此,原來搜索的條件都能通過json傳遞到服務(wù)端。我們來看調(diào)試的過程
后臺接收參數(shù),并反序列化
這樣我們就能將查詢的條件很好地傳遞到后臺。很好很強(qiáng)大啊。這樣就免去了擴(kuò)展表格搜索功能的煩惱~~
六、總結(jié)
以上就是bootstrap table的一些擴(kuò)展應(yīng)用。可能未不全面,還有一些高級用法也沒有介紹,比如行、列合并,行列凍結(jié)等等。
以上內(nèi)容是小編給大家介紹的JS組件系列之Bootstrap table表格組件神器【二、父子表和行列調(diào)序】 的相關(guān)知識,希望對大家有所幫助!
相關(guān)文章
微信小程序swiper使用網(wǎng)絡(luò)圖片不顯示問題解決
這篇文章主要介紹了微信小程序swiper使用網(wǎng)絡(luò)圖片不顯示問題解決,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-12-12JS操作select下拉框動態(tài)變動(創(chuàng)建/刪除/獲取)
動態(tài)創(chuàng)建及刪除select、添加及刪除選項option、獲得選項option的值、獲得選項option的文本等等,感興趣的朋友可以參考下哈2013-06-06在DWR中實現(xiàn)直接獲取一個JAVA類的返回值的兩種方法
本文主要介紹了在DWR中實現(xiàn)直接獲取一個JAVA類的返回值的兩種方法,具有一定的參考價值,下面跟著小編一起來看下吧2016-12-12Javascript 實現(xiàn)TreeView CheckBox全選效果
Javascript 實現(xiàn)TreeView CheckBox 選中父節(jié)點(diǎn)時所有子節(jié)點(diǎn)全選,取消時全部取消2010-01-01uniapp小程序點(diǎn)擊輸入框時阻止彈出軟鍵盤的幾種解決方案
在寫項目時候需要在表單里面加一個picker選擇器,但選擇input的時候軟鍵盤與選擇器會同時彈出,下面這篇文章主要給大家介紹了關(guān)于uniapp小程序點(diǎn)擊輸入框時阻止彈出軟鍵盤的幾種解決方案,需要的朋友可以參考下2024-02-02在js(jquery)中獲得文本框焦點(diǎn)和失去焦點(diǎn)的方法
文章介紹兩個方法和種是利用javascript onFocus onBlur來判斷焦點(diǎn)和失去焦點(diǎn),加一種是利用jquery $("p").blur(); 或$("p").blur(fn)來實現(xiàn),有需要的朋友可以參考一下2012-12-12