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ù)的查詢。

延伸閱讀

學(xué)習(xí)是年輕人改變自己的最好方式-Java培訓(xùn),做最負(fù)責(zé)任的教育,學(xué)習(xí)改變命運(yùn),軟件學(xué)習(xí),再就業(yè),大學(xué)生如何就業(yè),幫大學(xué)生找到好工作,lphotoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計(jì)培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)學(xué)習(xí)是年輕人改變自己的最好方式