JBoltTable表格系统参数详解(上)
JBoltTable是JBolt极速开发平台内置的一套基于Jquery和Bootstrap的表格系统,从零开始写了这么一套完整表格实现。
![](https://img.haomeiwen.com/i4173441/6517a6b4133460b6.png)
这套表格在整套JBolt开发平台的各种场景组件里都能使用。
![](https://img.haomeiwen.com/i4173441/ec72ddc2b317f889.png)
目前实现功能:
零、初始化表格
JBoltTable是自动检测并初始化,只要关心html里的属性就好。
data-jbolttable 只要你的table里加入这个,JBolt平台的自动化机制就启动了。
初始化本地表格渲染
本地渲染,就是你在网页里写了一个正常的表格,有表头,有内容的html数据,如下图:
![](https://img.haomeiwen.com/i4173441/84153150fe128850.png)
预览效果是这个死德行
![](https://img.haomeiwen.com/i4173441/3ecdbade045273e4.png)
基于Bootstrap的表格
基于Bootstrap的话,使用Bootstrap内置的class也可以做出样式有感的表格。
![](https://img.haomeiwen.com/i4173441/552e602d70ba2996.png)
![](https://img.haomeiwen.com/i4173441/58f9a8f728c82a53.png)
已经比上面的死德行好看多了。
但是,还是缺了点什么,表格功能太过于简单了,如果数据过多,页面滚动,列标题都看不见了。
WFK!!! 头呢!
![](https://img.haomeiwen.com/i4173441/9c2540b688556313.png)
好吧,JBoltTable 变魔术开始。
不需要任何class,不需要js,增加一个data-jbolttable声明就行了。
![](https://img.haomeiwen.com/i4173441/14eef856c0148955.png)
来看看效果
![](https://img.haomeiwen.com/i4173441/4bca450cb0f4eed9.png)
看,就一个属性,表格不会超出父区域显示滚动条,而且自己也固定了表头,显示了内置滚动条。
通过简单属性配置就完成了本地表格内容渲染的基础能力。做到固定头,自动高度,自动列宽等特性。
那么如果需要其他样式,我们后面接着讲。
一、固定表头
上面的例子只要一个属性配置,JBoltTable默认就是固定表头的,去不掉,内置默认。
![](https://img.haomeiwen.com/i4173441/c50c9c97de06dc3f.png)
注意: 默认就是 不需要任何参数配置
二、表头样式class举例
表头的样式可以使用css搞定,内置了几个常用的,比如默认表头字体很粗,使用css可以切换效果。
![](https://img.haomeiwen.com/i4173441/9821fb05878abefb.png)
![](https://img.haomeiwen.com/i4173441/367048eafea72255.png)
二、固定列
固定列这个在表格里很有用处,当在分辨率低的屏幕上显示数据列比较多的时候,需要用到固定列去标定每行数据的横向位置,方便查看和操作。
![](https://img.haomeiwen.com/i4173441/ccf94d99c9d742ee.gif)
配置方式:
无需js 一个属性搞定!
![](https://img.haomeiwen.com/i4173441/5de8dc769f3ec497.png)
三、列宽手动调整
有些时候页面数据显示不开,需要手动调整列宽,显示地更容易观看,就用到了调整列宽功能。
![](https://img.haomeiwen.com/i4173441/ae4a3542be2cfa74.gif)
同样,一个属性data-column-resize="true"就搞定了。
![](https://img.haomeiwen.com/i4173441/296ab319d8b0444f.png)
四、表格的宽度与高度
JBoltTable的表格尺寸,可以通过data-width和data-height两个属性来定义。
有默认值:data-width默认值是fill 也就是占满父区域 data-width="auto" 是有多宽显示多宽
data-height默认值是fill,也就是高度正好占满可是区域 还可以设置数值和百分比
![](https://img.haomeiwen.com/i4173441/424d8bc6d9d70aeb.png)
举例,我们来这样一个配置看看
![](https://img.haomeiwen.com/i4173441/e0cb51b8ea8e0220.png)
![](https://img.haomeiwen.com/i4173441/f90070f7c915d451.png)
很多系统里也都是这种auto的样式,如果不喜欢就声明data-width="fill" 或者去掉data-width属性,默认值就好。
五、分页组件(本地渲染版)
前面几个显示的都是基础的显示几行数据的表格组件,数据都是本地渲染,也就是你后台查询渲染出来的数据。
那么,我们现在需要分页查询数据了怎么办?
需要一个data-page="page组件ID"的配置即可。然后引入一个分页组件模板,用一行js初始化一次就行了。
这里演示的是本地渲染版,ajax的不用这么麻烦,不用写js,不用引入模板。后面再讲!
![](https://img.haomeiwen.com/i4173441/3721fe4c716a5ac4.png)
![](https://img.haomeiwen.com/i4173441/a4e4dadb67a00331.gif)
六、Ajax版异步加载Json数据源
终于讲到重头戏了,JBolttable不仅支持本地数据 表格的渲染,还支持异步Json格式数据源加载。
配置比较简单,给一个声明和数据源地址就可以加载数据了。
![](https://img.haomeiwen.com/i4173441/c35bbbff17b8a0a9.png)
目前JBolttable的数据渲染使用的是js模板引擎 juicer.js 简单快速高性能,灵活自定义各种表格内的数据和组件样式。
这个例子是不带分页,直接读取数据表数据的演示,直接js循环遍历datas返回的数据,每个data就是对应数据库一条数据,显示声明对象和属性,即可完成渲染。
注意:表格本身Tbody留空就行了。
![](https://img.haomeiwen.com/i4173441/1d31c2f374a09da1.png)
异步加载,带着Loading,先把表格整体header和外框渲染完成后,再去加载数据源。
![](https://img.haomeiwen.com/i4173441/5ded514b10423457.gif)
无页面刷新,只是Table内部数据源刷新,CURD操作,无刷新的效果,就是爽!!!
七、查询表单,新增按钮,如何驱动表格的查询呢?
![](https://img.haomeiwen.com/i4173441/173804b8c787da0c.png)
data-bind-elements这个属性是要绑定表格意外的组件,不管你是个啥,只要你有ID或者class,按照css选择器的写法,一个也是写,多个用逗号隔开。
这个东西是干嘛的呢,是用来绑定了指定的元素,让这些元素轻易知道自己在操作谁的一个控制反转。
绑定后的元素,就可以在操作的时候触发自动刷新表格功能和跳转功能了。
![](https://img.haomeiwen.com/i4173441/0c199e7fbf0cb4b0.png)
refreshJBoltTable是主动刷新绑定的表格数据源当前页
jboltTablePageToFirst是操作完成后主动跳转到第一页
jboltTablePageToLast是操作完成后主动跳转到最后一页
这样就可以控制一些特殊排序界面,比如最新的在首页或者正序排列的数据,新增数据后要么跳转第一页要么最后一页看到新加的一条数据。
修改数据,刷新后,还能保持滚动条的位置,这是隐藏技能。
八、ajax带分页,老简单了!
data-page="随意给一个不重复的分页组件的ID" 就行了!!!
对就是这么简单,什么都不用管了,给一个id剩下的就是jbolt内部运作了。
![](https://img.haomeiwen.com/i4173441/effe6c9ee571120f.png)
![](https://img.haomeiwen.com/i4173441/68879b7637bcaa11.gif)
带着分页的ajax表格,很简单,gif操作里可以看到,当我看的不是第一页的时候,我新增一条数据,会自动跳转到第一页,第一条就是我新加的数据,因为我设置了添加按钮的handler是加完后跳转到第一页。
![](https://img.haomeiwen.com/i4173441/39108343cf1f1024.png)