JBoltTable表格系统参数详解(上)

JBoltTable是JBolt极速开发平台内置的一套基于Jquery和Bootstrap的表格系统,从零开始写了这么一套完整表格实现。


JBoltTable表格

这套表格在整套JBolt开发平台的各种场景组件里都能使用。


demo列表

目前实现功能:

零、初始化表格

JBoltTable是自动检测并初始化,只要关心html里的属性就好。

data-jbolttable 只要你的table里加入这个,JBolt平台的自动化机制就启动了。

初始化本地表格渲染

本地渲染,就是你在网页里写了一个正常的表格,有表头,有内容的html数据,如下图:


本地表格-普通
预览效果是这个死德行
死德行

基于Bootstrap的表格

基于Bootstrap的话,使用Bootstrap内置的class也可以做出样式有感的表格。


Bootstrap的class

预览效果

已经比上面的死德行好看多了。

但是,还是缺了点什么,表格功能太过于简单了,如果数据过多,页面滚动,列标题都看不见了。

WFK!!! 头呢!

看不到header部分了

好吧,JBoltTable 变魔术开始。

不需要任何class,不需要js,增加一个data-jbolttable声明就行了。


声明属性

来看看效果

效果展示

看,就一个属性,表格不会超出父区域显示滚动条,而且自己也固定了表头,显示了内置滚动条。

通过简单属性配置就完成了本地表格内容渲染的基础能力。做到固定头,自动高度,自动列宽等特性。
那么如果需要其他样式,我们后面接着讲。

一、固定表头

上面的例子只要一个属性配置,JBoltTable默认就是固定表头的,去不掉,内置默认。


固定表头
注意: 默认就是 不需要任何参数配置

二、表头样式class举例

表头的样式可以使用css搞定,内置了几个常用的,比如默认表头字体很粗,使用css可以切换效果。


表头css样式

效果不错

二、固定列

固定列这个在表格里很有用处,当在分辨率低的屏幕上显示数据列比较多的时候,需要用到固定列去标定每行数据的横向位置,方便查看和操作。


固定列演示
配置方式:

无需js 一个属性搞定!


固定列属性写法

三、列宽手动调整

有些时候页面数据显示不开,需要手动调整列宽,显示地更容易观看,就用到了调整列宽功能。


调整列宽演示

同样,一个属性data-column-resize="true"就搞定了。


声明可以调整列宽的属性

四、表格的宽度与高度

JBoltTable的表格尺寸,可以通过data-width和data-height两个属性来定义。
有默认值:data-width默认值是fill 也就是占满父区域 data-width="auto" 是有多宽显示多宽
data-height默认值是fill,也就是高度正好占满可是区域 还可以设置数值和百分比


参数

举例,我们来这样一个配置看看

宽度auto,高度300px
实际效果

很多系统里也都是这种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 不随着窗口变化而变化

六、分页组件(本地渲染版)

前面几个显示的都是基础的显示几行数据的表格组件,数据都是本地渲染,也就是你后台查询渲染出来的数据。
那么,我们现在需要分页查询数据了怎么办?
需要一个data-page="page组件ID"的配置即可。然后引入一个分页组件模板,用一行js初始化一次就行了。

这里演示的是本地渲染版,ajax的不用这么麻烦,不用写js,不用引入模板。后面再讲!
分页的玩儿法

本地分页演示

七、Ajax版异步加载Json数据源

终于讲到重头戏了,JBolttable不仅支持本地数据 表格的渲染,还支持异步Json格式数据源加载。
配置比较简单,给一个声明和数据源地址就可以加载数据了。


简单配置代码实现ajax加载数据
目前JBolttable的数据渲染使用的是js模板引擎 juicer.js 简单快速高性能,灵活自定义各种表格内的数据和组件样式。

这个例子是不带分页,直接读取数据表数据的演示,直接js循环遍历datas返回的数据,每个data就是对应数据库一条数据,显示声明对象和属性,即可完成渲染。

注意:表格本身Tbody留空就行了。

ajax异步加载数据

异步加载,带着Loading,先把表格整体header和外框渲染完成后,再去加载数据源。

ajax加载数据源,无分页版

无页面刷新,只是Table内部数据源刷新,CURD操作,无刷新的效果,就是爽!!!

八、查询表单,新增按钮,如何驱动表格的查询呢?

答案在这里

data-bind-elements这个属性是要绑定表格意外的组件,不管你是个啥,只要你有ID或者class,按照css选择器的写法,一个也是写,多个用逗号隔开。

这个东西是干嘛的呢,是用来绑定了指定的元素,让这些元素轻易知道自己在操作谁的一个控制反转。

绑定后的元素,就可以在操作的时候触发自动刷新表格功能和跳转功能了。


绑定后可以调用refreshJBoltTable等方法
refreshJBoltTable是主动刷新绑定的表格数据源当前页
jboltTablePageToFirst是操作完成后主动跳转到第一页
jboltTablePageToLast是操作完成后主动跳转到最后一页

这样就可以控制一些特殊排序界面,比如最新的在首页或者正序排列的数据,新增数据后要么跳转第一页要么最后一页看到新加的一条数据。

修改数据,刷新后,还能保持滚动条的位置,这是隐藏技能。

九、ajax带分页,老简单了!

data-page="随意给一个不重复的分页组件的ID" 就行了!!!
对就是这么简单,什么都不用管了,给一个id剩下的就是jbolt内部运作了。


老简单了
ajax带分页演示

带着分页的ajax表格,很简单,gif操作里可以看到,当我看的不是第一页的时候,我新增一条数据,会自动跳转到第一页,第一条就是我新加的数据,因为我设置了添加按钮的handler是加完后跳转到第一页。


handler处理跳转第一页

本文是JBoltTable表格教程的第一节课,得好几篇文章才能介绍完,敬请期待!!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,530评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 86,403评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,120评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,770评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,758评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,649评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,021评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,675评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,931评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,659评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,751评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,410评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,004评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,969评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,042评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,493评论 2 343

推荐阅读更多精彩内容