Bootstrap Table使用整理(一)
相關(guān)閱讀:
Bootstrap Table使用整理(二) http://www.dbjr.com.cn/article/115791.htm
Bootstrap Table使用整理(三) http://www.dbjr.com.cn/article/115795.htm
Bootstrap Table使用整理(四)之工具欄 http://www.dbjr.com.cn/article/115798.htm
Bootstrap Table使用整理(五)之分頁組合查詢 http://www.dbjr.com.cn/article/115785.htm
一、Bootstrap Table相關(guān)整理
基于 Bootstrap 的 jQuery 表格插件,通過簡單的設(shè)置,就可以擁有強大的單選、多選、排序、分頁,以及編輯、導(dǎo)出、過濾(擴展)等等的功能。
1.官網(wǎng)地址:
http://bootstrap-table.wenzhixin.net.cn/zh-cn/ Git源代碼地址:https://github.com/wenzhixin/bootstrap-table
基礎(chǔ)簡介:
http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/
使用示例:
http://bootstrap-table.wenzhixin.net.cn/zh-cn/examples/
API文檔:
http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
Bootstrap Table的有點使用簡單,美觀整潔,支持CardView等特點
二、簡單使用實例
基礎(chǔ)引用
<link href="~/lib/bootstrap-table/dist/bootstrap-table.css" rel="external nofollow" rel="stylesheet" /> <script src="~/lib/bootstrap-table/dist/bootstrap-table.js"></script> <script src="~/lib/bootstrap-table/src/locale/bootstrap-table-zh-CN.js"></script>
1.data-toggle="table" 無需JavaScript啟用bootstrap table
<p>通過Data屬性的方式,無需編寫JavaScript啟用bootstrap table, 設(shè)置 data-toggle="table" 即可</p> <div class="alert alert-danger"> <p>1.這種方式不太常用,因為分頁不方便</p> </div> <table data-toggle="table"> <thead> <tr> <th>Item ID</th> <th>Item Name</th> <th>Item Price</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Item 1</td> <td>$1</td> </tr> <tr> <td>2</td> <td>Item 2</td> <td>$2</td> </tr> </tbody> </table>
2.使用data-url指定遠(yuǎn)程數(shù)據(jù),特別說明,在使用遠(yuǎn)程數(shù)據(jù)的時候,在ajax請求期間,表格內(nèi)容顯示加載中...,
<p>可以通過設(shè)置遠(yuǎn)程url 如:data-url="data1.json" ,自動加載遠(yuǎn)程數(shù)據(jù)</p> <div class="alert alert-danger"> <p>1.這種方式對于分頁不太方便</p> <p>2.BootstrapTable 對于字段中為空,自動替換成'-'</p> </div> <table data-toggle="table" data-url="@Url.Action("GetStudent","DataOne")"> <thead> <tr> <th data-field="sno">編號</th> <th data-field="sname">姓名</th> <th data-field="ssex">性別</th> <th data-field="sbirthday">生日</th> <th data-field="class">課程編號</th> </tr> </thead> </table>
3.data-classes 屬性指定表格的樣式,
特別說明:表頭和屬性的指定方式有兩種,一種DOM中定義,一種在Js的參數(shù)中定義
<table id="table1" data-classes="table table-hover table-condensed"></table> [javascript] view plain copy print? //data-classes 可以設(shè)置樣式 /* * table-condensed 設(shè)置內(nèi)容框濃縮 */ $('#table1').bootstrapTable({ columns: [ { field: 'sno', title: '學(xué)生編號' }, { field: 'sname', title: '學(xué)生姓名' }, { field: 'ssex', title: '性別' }, { field: 'sbirthday', title: '生日' }, { field: 'class', title: '課程編號' }, ], url:'@Url.Action("GetStudent","DataOne")' });
table-condensed 表格緊湊樣式顯示如下:
以上所述是小編給大家介紹的Bootstrap Table使用整理(一),希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
使用純前端JavaScript實現(xiàn)Excel導(dǎo)入導(dǎo)出方法過程詳解
這篇文章主要介紹了使用純前端JavaScript實現(xiàn)Excel導(dǎo)入導(dǎo)出方法過程詳解,文章通過示例代碼和圖文解析介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08JS實現(xiàn)鍵值對遍歷json數(shù)組功能示例
這篇文章主要介紹了JS實現(xiàn)鍵值對遍歷json數(shù)組功能,結(jié)合實例形式分析了javascript遍歷json數(shù)組相關(guān)操作技巧,需要的朋友可以參考下2018-05-05JS解決IOS中拍照圖片預(yù)覽旋轉(zhuǎn)90度BUG的問題
下面小編就為大家?guī)硪黄狫S解決IOS中拍照圖片預(yù)覽旋轉(zhuǎn)90度BUG的問題。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-09基于javascript實現(xiàn)最簡單的選項卡切換效果
這篇文章主要介紹了基于javascript實現(xiàn)最簡單的選項卡切換效果的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-05-05