Bootstrap Table創建后臺管理系統
Bootstrap Table是基于 Bootstrap 的 jQuery 表格插件，通過簡單的設置，就可以擁有強大的單選、多選、排序、分頁，以及編輯、導出、過濾（擴展）等的功能。
工具/原料
- JavaScript
方法/步驟
- 1
首先是用到了bootstrap的Tab來切換不同的表格用于展示，切換菜單代碼如下：
- 2
給每一個需要切換的標簽 加上｛data-toggle="tab"｝，并且增加錨點用于匹配到對應的切換的子內容｛錨點：href="#padding" rel="external nofollow" ｝，切換對應的字內容代碼如下：
- 3
每一個需要切換子內容元素設置對應上述錨點的id｛#padding｝,給外層容器加（tab-content），給子元素容器加class(tab-pane fade in active),有active的就是默認選中的。每一個子內容都有一個table元素，需要的table切換每一個tab就會刷新顯示對應的table數據。采用動態的生成table的方式加載數據。
- 4
以上就是初始化table的函數，傳index是為了切換時候請求不同的地址刷新不同的table，在每一個tab切換菜單都有onclick事件函數 freashTable（index）,table的所有用到的配置都在上述代碼中做了注釋，columns配置每一行，field是對應的每一列要顯示的字段key值，title對應的是每一列的頭部，formatter是格式化每一列的自定義函數,下面只展示時間格式化函數代碼：
- 5
對應的field為action的那一行就是操作按鈕了，格式化操作按鈕代碼如下：
- 6
同時分頁bootstrap已經提供了完整的配置（包括每頁顯示的行數，分頁按鈕，總條數和總頁數等等）但是沒有跳轉到指定行，所以需要我們自己寫他的樣式定位到相應的分頁欄，不過他有相關的方法提供，
selectPage就是跳到指定頁，我們可以自己系一個方法：
- 發表于 2018-02-08 00:00
- 閱讀 ( 773 )
- 分類：其他類型
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章