JBoltTable是JBolt極速開發(fā)平臺內置的一套基于Jquery和Bootstrap的表格系統(tǒng)，從零開始寫了這么一套完整表格實現(xiàn)纬向。

JBoltTable表格

這套表格在整套JBolt開發(fā)平臺的各種場景組件里都能使用参滴。

demo列表

目前實現(xiàn)功能：

零匈仗、初始化表格

JBoltTable是自動檢測并初始化算利，只要關心html里的屬性就好污筷。

data-jbolttable 只要你的table里加入這個规揪，JBolt平臺的自動化機制就啟動了桥氏。

初始化本地表格渲染

本地渲染，就是你在網(wǎng)頁里寫了一個正常的表格猛铅，有表頭字支，有內容的html數(shù)據(jù)，如下圖：

本地表格-普通

預覽效果是這個死德行

死德行

基于Bootstrap的表格

基于Bootstrap的話，使用Bootstrap內置的class也可以做出樣式有感的表格堕伪。

Bootstrap的class

預覽效果

已經比上面的死德行好看多了揖庄。

但是，還是缺了點什么欠雌，表格功能太過于簡單了蹄梢，如果數(shù)據(jù)過多，頁面滾動桨昙，列標題都看不見了检号。

WFK!!! 頭呢！

看不到header部分了

好吧蛙酪，JBoltTable 變魔術開始齐苛。

不需要任何class，不需要js桂塞，增加一個data-jbolttable聲明就行了凹蜂。

聲明屬性

來看看效果

效果展示

看，就一個屬性阁危，表格不會超出父區(qū)域顯示滾動條玛痊，而且自己也固定了表頭，顯示了內置滾動條狂打。

通過簡單屬性配置就完成了本地表格內容渲染的基礎能力擂煞。做到固定頭，自動高度趴乡，自動列寬等特性对省。
那么如果需要其他樣式，我們后面接著講晾捏。

一蒿涎、固定表頭

上面的例子只要一個屬性配置，JBoltTable默認就是固定表頭的惦辛，去不掉劳秋，內置默認。

固定表頭

注意： 默認就是 不需要任何參數(shù)配置

二胖齐、表頭樣式class舉例

表頭的樣式可以使用css搞定玻淑，內置了幾個常用的，比如默認表頭字體很粗市怎，使用css可以切換效果岁忘。

表頭css樣式

效果不錯

二、固定列

固定列這個在表格里很有用處区匠，當在分辨率低的屏幕上顯示數(shù)據(jù)列比較多的時候干像，需要用到固定列去標定每行數(shù)據(jù)的橫向位置帅腌，方便查看和操作。

固定列演示

配置方式：

無需js 一個屬性搞定麻汰！

固定列屬性寫法

三速客、列寬手動調整

有些時候頁面數(shù)據(jù)顯示不開，需要手動調整列寬五鲫，顯示地更容易觀看溺职，就用到了調整列寬功能。

調整列寬演示

同樣位喂，一個屬性data-column-resize="true"就搞定了浪耘。

聲明可以調整列寬的屬性

四、表格的寬度與高度

JBoltTable的表格尺寸塑崖，可以通過data-width和data-height兩個屬性來定義七冲。
有默認值：data-width默認值是fill 也就是占滿父區(qū)域 data-width="auto" 是有多寬顯示多寬
data-height默認值是fill，也就是高度正好占滿可是區(qū)域 還可以設置數(shù)值和百分比

參數(shù)

舉例规婆，我們來這樣一個配置看看

寬度auto澜躺，高度300px

實際效果

很多系統(tǒng)里也都是這種auto的樣式，如果不喜歡就聲明data-width="fill" 或者去掉data-width屬性抒蚜，默認值就好掘鄙。

五、列寬設置（非手動調整）

上面我們講了表格上配置列寬可以手動調整嗡髓，那么如果我們想初始化就設置一個寬度或者最小寬度操漠，其他沒設置的列自動補齊寬度的話應該如何操作呢？

data-width

效果

變大后

屬性：data-width data-min-width 起作用了
data-width="auto" 列寬自適應
data-min-width="100" 列寬最小值100px
data-width="100" 列寬默認寬度100px 如果窗口很寬超過所有列總和 會自動按照比例加寬
data-width="100" data-nochange 列寬默認100px 不隨著窗口變化而變化

六饿这、分頁組件（本地渲染版）

前面幾個顯示的都是基礎的顯示幾行數(shù)據(jù)的表格組件颅夺，數(shù)據(jù)都是本地渲染，也就是你后臺查詢渲染出來的數(shù)據(jù)蛹稍。
那么，我們現(xiàn)在需要分頁查詢數(shù)據(jù)了怎么辦部服？
需要一個data-page="page組件ID"的配置即可唆姐。然后引入一個分頁組件模板，用一行js初始化一次就行了廓八。

這里演示的是本地渲染版奉芦，ajax的不用這么麻煩，不用寫js剧蹂，不用引入模板声功。后面再講！

分頁的玩兒法

本地分頁演示

七宠叼、Ajax版異步加載Json數(shù)據(jù)源

終于講到重頭戲了先巴，JBolttable不僅支持本地數(shù)據(jù) 表格的渲染其爵，還支持異步Json格式數(shù)據(jù)源加載。
配置比較簡單伸蚯，給一個聲明和數(shù)據(jù)源地址就可以加載數(shù)據(jù)了摩渺。

簡單配置代碼實現(xiàn)ajax加載數(shù)據(jù)

目前JBolttable的數(shù)據(jù)渲染使用的是js模板引擎 juicer.js 簡單快速高性能，靈活自定義各種表格內的數(shù)據(jù)和組件樣式剂邮。

這個例子是不帶分頁摇幻，直接讀取數(shù)據(jù)表數(shù)據(jù)的演示，直接js循環(huán)遍歷datas返回的數(shù)據(jù)挥萌，每個data就是對應數(shù)據(jù)庫一條數(shù)據(jù)绰姻，顯示聲明對象和屬性，即可完成渲染引瀑。

注意：表格本身Tbody留空就行了狂芋。

ajax異步加載數(shù)據(jù)

異步加載，帶著Loading伤疙，先把表格整體header和外框渲染完成后银酗，再去加載數(shù)據(jù)源。

ajax加載數(shù)據(jù)源徒像，無分頁版

無頁面刷新黍特，只是Table內部數(shù)據(jù)源刷新，CURD操作锯蛀，無刷新的效果灭衷，就是爽！Ｅ缘印翔曲！

八、查詢表單劈愚，新增按鈕瞳遍，如何驅動表格的查詢呢？

答案在這里

data-bind-elements這個屬性是要綁定表格意外的組件菌羽，不管你是個啥掠械，只要你有ID或者class，按照css選擇器的寫法注祖，一個也是寫猾蒂，多個用逗號隔開。

這個東西是干嘛的呢是晨，是用來綁定了指定的元素肚菠，讓這些元素輕易知道自己在操作誰的一個控制反轉。

綁定后的元素罩缴，就可以在操作的時候觸發(fā)自動刷新表格功能和跳轉功能了蚊逢。

綁定后可以調用refreshJBoltTable等方法

refreshJBoltTable是主動刷新綁定的表格數(shù)據(jù)源當前頁

jboltTablePageToFirst是操作完成后主動跳轉到第一頁

jboltTablePageToLast是操作完成后主動跳轉到最后一頁

這樣就可以控制一些特殊排序界面层扶，比如最新的在首頁或者正序排列的數(shù)據(jù)，新增數(shù)據(jù)后要么跳轉第一頁要么最后一頁看到新加的一條數(shù)據(jù)时捌。

修改數(shù)據(jù)怒医，刷新后，還能保持滾動條的位置奢讨，這是隱藏技能稚叹。

九、ajax帶分頁拿诸，老簡單了扒袖！

data-page="隨意給一個不重復的分頁組件的ID" 就行了！Ｄ堵搿季率！
對就是這么簡單，什么都不用管了描沟，給一個id剩下的就是jbolt內部運作了飒泻。

老簡單了

ajax帶分頁演示

帶著分頁的ajax表格，很簡單吏廉，gif操作里可以看到泞遗，當我看的不是第一頁的時候，我新增一條數(shù)據(jù)席覆，會自動跳轉到第一頁史辙，第一條就是我新加的數(shù)據(jù)，因為我設置了添加按鈕的handler是加完后跳轉到第一頁佩伤。

handler處理跳轉第一頁

本文是JBoltTable表格教程的第一節(jié)課聊倔，得好幾篇文章才能介紹完，敬請期待Ｉ病耙蔑！