1、bootstrap-table簡介
1.1、bootstrap table簡介及特征:
Bootstrap table是國人開發(fā)的一款基于 Bootstrap 的 jQuery 表格插件,通過簡單的設(shè)置,就可以擁有強(qiáng)大的單選、多選、排序、分頁,以及編輯、導(dǎo)出、過濾(擴(kuò)展)等等的功能。目前在github上已經(jīng)有2600多個Star,可見其受歡迎程度。其官方網(wǎng)站地址 為:http://bootstrap-table.wenzhixin.net.cn/。里面可以下載使用所需的JS和CSS文件,以及參考文檔和例子。
支持 Bootstrap 3 和 Bootstrap 2
自適應(yīng)界面
固定表頭
非常豐富的配置參數(shù)
直接通過標(biāo)簽使用
顯示/隱藏列
顯示/隱藏表頭
通過 AJAX 獲取 JSON 格式的數(shù)據(jù)
支持排序
格式化表格
支持單選或者多選
強(qiáng)大的分頁功能
支持卡片視圖
支持多語言
支持插件
1.2、bootstrap table渲染數(shù)據(jù)到表格的方式:
Bootstrap-Table顯示數(shù)據(jù)到表格的方式有兩種,一種是客戶端(client)模式,一種是服務(wù)器(server)模式。
所謂客戶端模式,指的是在服務(wù)器中把要顯示到表格的數(shù)據(jù)一次性加載出來,然后轉(zhuǎn)換成JSON格式傳到要顯示的界面中,在JavaWeb中可以保存在request中,然后轉(zhuǎn)發(fā)到指定界面,在界面初始化的時候使用EL表達(dá)式獲取,然后調(diào)用相關(guān)初始化的函數(shù),將JSON字符串傳進(jìn)去即可顯示??蛻舳四J捷^為簡單,它是把數(shù)據(jù)一次性加載出來放到界面上,然后根據(jù)你設(shè)置的每頁記錄數(shù),自動生成分頁。當(dāng)點(diǎn)擊第二頁時,會自動加載出數(shù)據(jù),不會再向服務(wù)器發(fā)送請求。同時用戶可以使用其自帶的搜索功能,可以實(shí)現(xiàn)全局?jǐn)?shù)據(jù)搜索。對于數(shù)據(jù)量較少的時候,可以使用這個方法。但是對于數(shù)據(jù)量大的系統(tǒng),使用該方法會造成加載出一些很久之前的,用戶不在關(guān)注的數(shù)據(jù),使得加載速度變慢,增加了服務(wù)器的負(fù)擔(dān),浪費(fèi)了資源。這時應(yīng)該采用服務(wù)器模式。
所謂服務(wù)器模式,指的是根據(jù)設(shè)定的每頁記錄數(shù)和當(dāng)前要顯示的頁碼,發(fā)送數(shù)據(jù)到服務(wù)器進(jìn)行查詢,然后再顯示到表格中。該方法可以根據(jù)用戶的需要動態(tài)的加載數(shù)據(jù),節(jié)省了服務(wù)器的資源,但是不能使用其自帶的全數(shù)據(jù)搜索功能。因?yàn)槟慵虞d的數(shù)據(jù)只是一頁的數(shù)據(jù),所以全數(shù)據(jù)搜索的范圍也只在一頁之中。
客戶端模式較為簡單,讀者可根據(jù)官方文檔和例子自行實(shí)踐。這里主要介紹服務(wù)器模式,并可以實(shí)現(xiàn)帶參數(shù)的查詢。
延伸閱讀
- ssh框架 2016-09-30
- 阿里移動安全 [無線安全]玩轉(zhuǎn)無線電——不安全的藍(lán)牙鎖 2017-07-26
- 消息隊(duì)列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標(biāo)分割】 2017-07-26
- 詞向量-LRWE模型-更好地識別反義詞同義詞 2017-07-26
- 從棧不平衡問題 理解 calling convention 2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明 2017-07-26
- Swift實(shí)現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解 2017-07-26
- 阿里移動安全 Android端惡意鎖屏勒索應(yīng)用分析 2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來看看(二) 2017-07-26