使用ivx中表格组件的经验总结

之前讲过了使用ivx在案例中如何使用图表组件更直观的展示数据,不过还有另一种展示数据也常用到的手段——表格。ivx中也对这一功能制作了对应的表格组件,今天就来说说这个表格组件是如何使用的。


1.表格的数据来源
表格和for循环创建一样需要有数据来源,而且多是对象数组(嗯,反正我就是喜欢对象数组)。可以看到第一行除了第一列后面几个的元素都是 “left ”(注意前后都是各两个下划线),这个是用于合并两个相邻表格的,而且把left换成right,up,down也都是可以的。

2.内部框和选中框
表格的属性里包含对表格框的设置,其中内部框指的是表格中的一小格,而选中框就是我们选中的那一小格。我们可以设置它的线宽,样式和颜色。内部框的位置也很容易理解,四个小图标都是只有一条直线三条虚线,对应着内部框上下左右四条边框。可以看到这个属性是可以进行数据绑定的,其数据绑定的值是0-15的十进制,正好对应一个4位二进制数的范围,每个小图标选中则为1,不选中则为0。例如下图四个都选中就是二进制数1111,这个二进制数转换成十进制的值就正好是15。


3.列宽
实际案例中表格每一列的内容的宽度其实可能是不等的,这个属性很好的一点就是我们不但可以设置列宽,还可以更细致的根据每一列的情况进行更详细的设置。即使是固定宽度依旧可以选择px—像素宽度,或者%—百分比宽度。将可拉伸打开,则可以对最小宽与最大宽进行设置,这也是为了保证整个表格不会严重变形,我们做案例的时候一定要记住进行这些边界处理。

4.行高
列宽设置完自然就是行高了,因为每行的结构都是一致的,都包含了同样的全部列,所以行高的设置可以更简单一些。选择自动包裹内容就不会出现固定行高的这条设置属性,而每个表格多高也就取决于我们在里面添加的组件的总高度。其余两条选项则是需要设置一个固定的行高,区别在于是否允许案例根据表格中实际内容的高度放缩行的高度。

5.列名
列名也就是表头的设置,如果采用自定义列可以自己输入每一列的名称,如果不填并开启显示表头则会自动将对象数组的个列名作为表格的表头。但是建议还是自行输入表头数组,以防止出现显示错乱和漏缺表头的情况。打开显示表头后可以自行设置表头的高度,字号,颜色和字体等相关属性。


6.表格的数据绑定
以demo中的文本组件进行数据绑定举例,可以看到,数据绑定的下拉选项一共有三个,当前格数据1对应对象数组中的某一元素(注意,是对应具体到行列的),表格行号1和表格列名1则分别对应当前格数据1在对象数组中行号和列名。

至于这个1,可以回顾一下for循环创建那篇,for容器里面可以再添加for容器,表格里面也是可以再添加表格的,最外层表格是1,第二层表格是2,以此类推。

7.表格如何显示更多类型的内容
可以发散一下思维,之前的表格里都是文本组件,但是其实我们也可以在表格中放入图片组件,做一个展示图片的表格,只需要把对象数组中添加好图片,然后在表格中加入图片组件并将图片的素材资源地址设置为当前格数据就好了。

可是这样表格的每一格里都是图片,那要是想让某些列是展示文本的,而某些列是展示图片的呢?这里讲一个最简单例子,用if容器进行筛选实现。当然,无论是结构还是逻辑都还有很多其他的方法,能够进行优化的空间也很大,非常鼓励大家去积极探索。


8.动态表格
之前的都是在说静态的图表设置,但是我们需要理解这样一个关系,表格只是负责展示,它的数据是来源于对象数组的,当我们去改变对象数组的值的时候,表格就也会随之发生改变。
而且,表格内的组件在数据绑定中,是可以获取到当前格数据在对象数组中的行号和列名,这就让我们可以更加精确地去动态修改对象数组中的每一个元素。(同理,动态表格也可以应用到for循环创建中,通过对数据对象数组的改动而实现动态的循环创建)
比如我们可以在表格中添加一列按钮组件,然后给按钮添加如下事件,则当按钮点击时就可以删除这一按钮所在的整行内容。


再比如把表格中的文本组件换成输入框,当我们输入完成后用我们刚输入的内容替换原来的内容,即把新的值写入对象数组。再配合数据库保存,下次我们再打开这个表格显示的就是我们最新输入的内容了


9.总结
表格本身的属性并不难理解,更多在于对表格结构的设计,还有牵涉到动态表格时对于事件的逻辑设计。因此掌握表格最主要的还是如何将表格融合到实际案例的各个部分之中,这需要亲自动手进行更多的尝试和探索。

原文地址:https://blog.51cto.com/14556317/2478740

时间: 2024-10-01 20:47:53

使用ivx中表格组件的经验总结的相关文章

使用ivx中富文本组件的经验总结

富文本相比普通文本可以显示复杂的字体样式和排版方式,所以更适用于网页图文内容的排版,在很多案例中都会经常使用.ivx中也封装好了富文本组件和富文本编辑器组件,今天就说一下这两个组件该如何使用吧. 一.富文本和富文本编辑器富文本编辑器是一种可内嵌于浏览器,用于编辑富文本内容和格式的文本编辑器.它与富文本的区别是,前者仅容许在案例编辑状态下进行内容编辑,在非编辑状态下隐藏文本工具条,通常仅做展示,不与用户发生交互.后者则在案例非编辑状态下开放富文本编辑界面,容许用户进行富文本的排版和编辑.富文本组件

关于ivx监听键盘按键的经验总结

之前的帖子里讲了ivx中很多组件都可以监听到鼠标的移入移出事件,还包括最常用的点击事件,其实我们也可以在案例中监听到键盘的按键操作,例如这个demo中我们可以在输入框内输入一些文本信息,然后点击send按钮或者直接敲击键盘Enter回车键就会在上方添加我们刚刚输入的内容.下面来说一下具体的实现方法.1.很显然上面的输入信息的展示用到了循环创建,我们需要一个数组来存放全部输入的信息,这个demo比较简单添加一个一位数组即可.2.接下来我们要做的就是在点击send按钮或者敲击Enter回车时将输入框

关于ivx中通用变量排序功能的经验总结

在ivx中通用变量是经常使用到的一种变量,而且它的元素类型可以为数组,因此也常用作循环创建的数据来源,当我们要对循环创建出来的列表进行排序时,操作上其实就是对通用变量内部元素的一个排序,今天就说一下这种排序的具体操作. 我们以这个通用变量为例,通用变量内包含一个元素employees,这个元素的属性是一个数组,每个数组元素包含两个子元素,number和lastName.为了便于观察,我们将通用变量的元素employees数组作为数据来源进行循环创建,循环创建中的文本绑定当前数据的number和l

DataGrid( 数据表格) 组件[3]

本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination(分页)组件. 一. 样式设置 //样式设置$('#box').datagrid({url : 'user.php',title : '用户列表',width : 500,iconCls : 'icon-search',striped : true,nowrap : true,fitColumns :

JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)

前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能覆盖似乎不太现实,博主挑选了一些自认为比较常用的功能在此分享给各位园友.源码也在这篇统一给出.好了,不多说废话,开始我们的干货之旅吧. bootstrap table系列: JS组件系列——表格组件神器:bootstrap table JS组件系列——表格组件神器:bootstrap table(二

第二百二十八节,jQuery EasyUI,TreeGrid(树形表格)组件

jQuery EasyUI,TreeGrid(树形表格)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 TreeGrid(树形表格)组件的使用方法,这个组件依赖于 DataGrid(数据表格)组件. 一.加载方式 建立一个 JSON 文件 [ { "id": 1, "name": "系统管理", "date": "2015-05-10", &quo

DataGrid( 数据表格) 组件[2]

本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination(分页)组件. 一.排序功能 //分页和排序$('#box').datagrid({url : 'user.php',width : 500,title : '用户列表',iconCls : 'icon-search',columns : [[{field : 'user',title : '帐号',

扩展HT for Web之HTML5表格组件的Renderer和Editor

在HT for Web提供了一下几种常用的Editor,分别是: slider:拉条 color picker:颜色选择器 enum:枚举类型 boolean:真假编辑器 string:普通的文本编辑器 除了这几种常用编辑器之外,用户还可以通过继承ht.widget.BaseItemEditor类来实现自定义编辑器. 而渲染器,在HT for Web提供常用的Renderer有: enum:枚举类型 color:颜色类型 boolean:真假渲染器 text:文本渲染器 和编辑器一样也可以自定义

JS表格组件神器bootstrap table详解(基础版)

这篇文章主要介绍了JS表格组件神器bootstrap table,bootstrap table界面采用扁平化的风格,用户体验比较好,更好兼容各种客户端,需要了解更多bootstrap table的朋友可以参考下 一.Bootstrap Table的引入 关于Bootstrap Table的引入,一般来说还是两种方法: 1.直接下载源码,添加到项目里面来.由于Bootstrap Table是Bootstrap的一个组件,所以它是依赖Bootstrap的,我们首先需要添加Bootstrap的引用.