Bootstrap-Table入门篇
生活随笔
收集整理的這篇文章主要介紹了
Bootstrap-Table入门篇
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?首先要下載bootstrap Table插件所必須的js，地址：https://github.com/wenzhixin/bootstrap-table
了解官方文檔地址：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
下載好后，需要導入如下文件：
<!--css--> <link rel="stylesheet" type="text/css" href="lib/bootstrap-3.3.7/css/bootstrap.min.css"/> <link rel="stylesheet" type="text/css" href="lib/bootstrap-table-1.12.1/bootstrap-table.min.css"/> <!--js--> <script src="lib/jquery-3.3.1/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="lib/bootstrap-3.3.7/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> <script src="lib/bootstrap-table-1.12.1/bootstrap-table.min.js" type="text/javascript" charset="utf-8"></script>html需要定義工具欄和表格
<div id="toolbar"></div><!--工具欄--> <table id="table"></table><!--表格-->?這次用本地數據，不調用后臺數據了：
//模擬數據 var tableData = [{id:1001,name:"小明",age:"15",sex:"男"},{id:1002,name:"小紅",age:"13",sex:"女"},{id:1003,name:"小剛",age:"16",sex:"男"},{id:1004,name:"小鵬",age:"14",sex:"男"},{id:1005,name:"小月",age:"16",sex:"女"} ]然后就是顯示的事情啦：
$(document).ready(function () {$('#table').bootstrapTable({data: tableData, // 數據uniqueId: "id", locale: "zh-CN", // 語言toolbar: "#toolbar", // 工具欄search: true, // 顯示搜索height: document.documentElement.clientHeight,//根據頁面高度定義表格高度showColumns: true, //隱藏列striped: true, // 是否顯示行間隔色showRefresh: false, // 是否顯示刷新按鈕clickToSelect: false, // 是否啟用點擊選中行showToggle: false, // 是否顯示詳細視圖和列表視圖的切換按鈕cardView: false, // 是否顯示詳細視圖javascript:void(0)sortable: false, // 是否啟用排序sortOrder: "asc", // 排序方式pagination: true, // 是否顯示分頁sidePagination: "client", // 分頁方式：client客戶端分頁，server服務端分頁 columns: [{ field: 'name', title: '名稱', sortable: true, width: 280 },{ field: 'age', title: '年齡', sortable: true, width: 280 },{ field: 'sex', title: '性別', sortable: true, width: 280 },]}); });?頁面效果：
?完整代碼：
<!DOCTYPE html> <html lang="zh-cn"><head><meta charset="utf-8" /><title>bootstrap-table</title><!--css--><link rel="stylesheet" type="text/css" href="lib/bootstrap-3.3.7/css/bootstrap.min.css"/><link rel="stylesheet" type="text/css" href="lib/bootstrap-table-1.12.1/bootstrap-table.min.css"/><!--js--><script src="lib/jquery-3.3.1/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="lib/bootstrap-3.3.7/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script><script src="lib/bootstrap-table-1.12.1/bootstrap-table.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">//模擬數據var tableData = [{id:1001,name:"小明",age:"15",sex:"男"},{id:1002,name:"小紅",age:"13",sex:"女"},{id:1003,name:"小剛",age:"16",sex:"男"},{id:1004,name:"小鵬",age:"14",sex:"男"},{id:1005,name:"小月",age:"16",sex:"女"}]$(document).ready(function () {$('#table').bootstrapTable({data: tableData,uniqueId: "id",locale: "zh-CN", // 語言 toolbar: "#toolbar", // 工具欄 search: true, // 顯示搜索 height: document.documentElement.clientHeight,//根據頁面高度定義表格高度 showColumns: true, //隱藏列 striped: true, // 是否顯示行間隔色 showRefresh: false, // 是否顯示刷新按鈕 clickToSelect: false, // 是否啟用點擊選中行 showToggle: false, // 是否顯示詳細視圖和列表視圖的切換按鈕 cardView: false, // 是否顯示詳細視圖javascript:void(0) sortable: false, // 是否啟用排序 sortOrder: "asc", // 排序方式 pagination: true, // 是否顯示分頁 sidePagination: "client", // 分頁方式：client客戶端分頁，server服務端分頁 columns: [{ field: 'name', title: '名稱', sortable: true, width: 280 },{ field: 'age', title: '年齡', sortable: true, width: 280 },{ field: 'sex', title: '性別', sortable: true, width: 280 },]});});</script></head><body><div id="toolbar"></div><!--工具欄--><table id="table"></table><!--表格--></body> </html> View Code?
有沒有覺得很簡單呢，下期更精彩
?
轉載于:https://www.cnblogs.com/combat/p/11101303.html
總結
以上是生活随笔為你收集整理的Bootstrap-Table入门篇的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Day.04 selenium的基础
- 下一篇： 实验十四 课程学习总结