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使用整理(五)之分頁(yè)組合查詢(xún) http://www.dbjr.com.cn/article/115785.htm
一、Bootstrap Table相關(guān)整理
基于 Bootstrap 的 jQuery 表格插件,通過(guò)簡(jiǎn)單的設(shè)置,就可以擁有強(qiáng)大的單選、多選、排序、分頁(yè),以及編輯、導(dǎo)出、過(guò)濾(擴(kuò)展)等等的功能。
1.官網(wǎng)地址:
http://bootstrap-table.wenzhixin.net.cn/zh-cn/ Git源代碼地址:https://github.com/wenzhixin/bootstrap-table
基礎(chǔ)簡(jiǎn)介:
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的有點(diǎn)使用簡(jiǎn)單,美觀整潔,支持CardView等特點(diǎn)
二、簡(jiǎn)單使用實(shí)例
基礎(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" 無(wú)需JavaScript啟用bootstrap table
<p>通過(guò)Data屬性的方式,無(wú)需編寫(xiě)JavaScript啟用bootstrap table, 設(shè)置 data-toggle="table" 即可</p> <div class="alert alert-danger"> <p>1.這種方式不太常用,因?yàn)榉猪?yè)不方便</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ù),特別說(shuō)明,在使用遠(yuǎn)程數(shù)據(jù)的時(shí)候,在ajax請(qǐng)求期間,表格內(nèi)容顯示加載中...,
<p>可以通過(guò)設(shè)置遠(yuǎn)程url 如:data-url="data1.json" ,自動(dòng)加載遠(yuǎn)程數(shù)據(jù)</p> <div class="alert alert-danger"> <p>1.這種方式對(duì)于分頁(yè)不太方便</p> <p>2.BootstrapTable 對(duì)于字段中為空,自動(dòng)替換成'-'</p> </div> <table data-toggle="table" data-url="@Url.Action("GetStudent","DataOne")"> <thead> <tr> <th data-field="sno">編號(hào)</th> <th data-field="sname">姓名</th> <th data-field="ssex">性別</th> <th data-field="sbirthday">生日</th> <th data-field="class">課程編號(hào)</th> </tr> </thead> </table>
3.data-classes 屬性指定表格的樣式,
特別說(shuō)明:表頭和屬性的指定方式有兩種,一種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é)生編號(hào)' }, { field: 'sname', title: '學(xué)生姓名' }, { field: 'ssex', title: '性別' }, { field: 'sbirthday', title: '生日' }, { field: 'class', title: '課程編號(hào)' }, ], url:'@Url.Action("GetStudent","DataOne")' });
table-condensed 表格緊湊樣式顯示如下:
以上所述是小編給大家介紹的Bootstrap Table使用整理(一),希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- Bootstrap Table使用整理(三)
- Bootstrap Table使用整理(二)
- Bootstrap Table使用整理(五)之分頁(yè)組合查詢(xún)
- BootstrapTable refresh 方法使用實(shí)例簡(jiǎn)單介紹
- Bootstrap table使用方法詳細(xì)介紹
- 值得分享的Bootstrap Table使用教程
- DataTables+BootStrap組合使用Ajax來(lái)獲取數(shù)據(jù)并且動(dòng)態(tài)加載dom的方法(排序,過(guò)濾,分頁(yè)等)
- BootStrap table使用方法分析
- Bootstrap Table使用整理(四)之工具欄
相關(guān)文章
Javascript公共腳本庫(kù)系列(一): 彈出層腳本
本篇文章講解彈出浮動(dòng)層的javascript函數(shù), 以及函數(shù)的原理和使用注意事項(xiàng).2011-02-02JS實(shí)現(xiàn)的簡(jiǎn)潔二級(jí)導(dǎo)航菜單雛形效果
這篇文章主要介紹了JS實(shí)現(xiàn)的簡(jiǎn)潔二級(jí)導(dǎo)航菜單雛形效果,通過(guò)簡(jiǎn)單的JavaScript響應(yīng)鼠標(biāo)事件遍歷頁(yè)面元素實(shí)現(xiàn)二級(jí)導(dǎo)航菜單切換的效果,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-10-10JavaScript實(shí)現(xiàn)簡(jiǎn)易加法計(jì)算器
這篇文章主要介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)易加法計(jì)算器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-03-03NodeJS Express框架中處理404頁(yè)面一個(gè)方式
這篇文章主要介紹了NodeJS Express框架中處理404頁(yè)面一個(gè)方式,原理就是把404路由放在最后匹配,也就是路由中沒(méi)有定義的全部轉(zhuǎn)到404頁(yè)面,需要的朋友可以參考下2014-05-05使用純前端JavaScript實(shí)現(xiàn)Excel導(dǎo)入導(dǎo)出方法過(guò)程詳解
這篇文章主要介紹了使用純前端JavaScript實(shí)現(xiàn)Excel導(dǎo)入導(dǎo)出方法過(guò)程詳解,文章通過(guò)示例代碼和圖文解析介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08JS實(shí)現(xiàn)鍵值對(duì)遍歷json數(shù)組功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)鍵值對(duì)遍歷json數(shù)組功能,結(jié)合實(shí)例形式分析了javascript遍歷json數(shù)組相關(guān)操作技巧,需要的朋友可以參考下2018-05-05JS解決IOS中拍照?qǐng)D片預(yù)覽旋轉(zhuǎn)90度BUG的問(wèn)題
下面小編就為大家?guī)?lái)一篇JS解決IOS中拍照?qǐng)D片預(yù)覽旋轉(zhuǎn)90度BUG的問(wèn)題。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09基于javascript實(shí)現(xiàn)最簡(jiǎn)單的選項(xiàng)卡切換效果
這篇文章主要介紹了基于javascript實(shí)現(xiàn)最簡(jiǎn)單的選項(xiàng)卡切換效果的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-05-05