可视化元件手册

  1. 首页
  2. 全部文档
  3. 可视化元件手册
  4. 显示元件(40个)
  5. Table表格

Table表格

名称:

Table | 表格

图标:

功能:

  • 可以自定义样式、多功能、所有内部元件可自定义的表格
  • 是一个组合元件,由更多其他元件无代码设计组成
  • 表格相对于简单表格的只有表格样式和列对象增减功能允许自定义而言,其他就是开放了全部已设计的功能可以修改,并且可以添加删除更改显示相关的所有元件,包括修改表头显示逻辑以定来定义显示或不显示某些列对象、在表头元件中定义排序功能、表格行中添加各类对象(某些对象不能改类型为td时,可先添加一个显示块定义其标签为td,显示块中放置要显示的对象)、自定义添加单行对象、行对象中添加动态样式类、列对象中添加事件处理逻辑、且可以对每个列对象元件进行格式或样式定义丰富表格信息展示内容

使用方式:

设计表格的各类功能

  • 自定义表格显示的列头:用生成表头部列名称的逻辑来控制显示哪些表头

在“Create TH”名称的行为处理元件中,将要显示的内容放入进行对比或查找,如果属要显示对象,则传出生成表头部名称
  • 自定义表格显示的列内容:为行元件中的列内容显示元件添加“<Visible>”固定名称布尔类型变量,在信息转换为显示行元件内容时,进行判断,如果此行需显示,则传Yes值给列元件的“<Visible>”变量

行元件中的列元件对象中含“<Visible>”固定名称布尔类型变量,默认传布尔No值不显示,要显示时,判定后传布尔Yes值
  • 点击列头按当前列排序:在头部列名称显示对象中,添加“Is ASC”名称的一个布尔变量(名称可随意),来将当前是否以此列按字母顺序排序做标记,点击后如果这个值是No,则用排序元件对表格所有行按此列值进行升序排序处理,并传回Yes给此“Is ASC”变量(反之用降序排,传回No值给“Is ASC”变量),排序结果传给表格行元件,行元件传给表格数据类型对象,再将其传给父元件中的表格显示元件替换之前内容,以上逻辑全部在用户端普通行为处理元件中完成:

  • 表格单元格按值内容进行颜色标记:显示的表中每行各列值,可以进行值的判断,为某些行设定不同背景色来让显示信息更真观丰富,比如查找任务记录,判断某些任务过期3天但还没有处理,这些任务记录所在表格中可以显示为红色单元格

  • 表格每一行不同显示样式:如果想要一整行按某个列值的结果显示同一背景色等样式,则可以在样式文件中设计样式类,然后在每行信息转换中进行判断处理,符合条件传特定样式类名称给表格行元件默认已有的“<Style Class>”样式类变量

以上示例中,库表记录在转化时,查询是不是有个消卡时间值
如果没有消卡时间,意味着此任务没完成,则为行元件的“<Style Class>”样式类变量传一个背景颜色样式类名称“redbackground”
  • 表格内容传值:以上示例图中也是一个表格内容由查询的数据库记录转为表格的每行信息,再由行信息传给表格数据对象,由表格数据对象再传给页面显示父元件中的表格来更换之前的表格显示内容的处理方式(此例中有对表格内容“<>Body”连虚线删除对象的逻辑,此逻辑功能是如果没有查询到记录时,则删除上次传入的表格信息,也就是没有新的处理结果,显示空白表格)
  • 显示内容格式设计:表格中的显示元件都可以独立进行属性设定,常用的是格式设定,比如传入日期时间值时,如果不对日期时间显示元件设定格式,可能包含时区和长时间格式的内容,没必要全部显示;也可以为金额等数字显示设计带有货币符号等,请参考各类显示元件中的说明
  • 设计表格分页显示:分页及用上一页下一页按钮来显示表格更多记录内容可以在表格上部或下部添加一个工具条或行元件,在行元件中添加按钮,在按钮中进行查询时,按数据库元件中高级查询中的功能进行逻辑设计,方便简单,请参考本章“数据库/记录处理元件”组下“Advanced Find高级查询”中的说明
  • 固定表头滚动显表格内容:可以用样式类进行定义,修改当前样式类,为tbody标签设计上下滚动显示属性;左右滚动显示可以直接设计表格的宽度,超过父元件宽度时,在父元件中添加显示滚动条的属性
  • 为表格添加各类用户行为事件:可以右键单击添加子元件方式添加各类行为处理元件

  • 当表格元件不能达到复杂表格的显示要求时,可以设计表格的HTML代码,传值给HTML显示元件来显示表格

样式属性:

  • 属性设置与Pane显示块元件的属性设置一样,在表格中可以对各个显示元件设定样式,在属性中添加“html.style”即可进行样式标签及值的定义
    · 如可以选中表格定义宽度并居中显示表格:width:600px;margin:10px auto;
  • 可以使用样式类,在“html.styleClass”属性中设定类名称
  • 默认样式定义的文件是“web\styles\bootstrap”下“010-tables.less”文件,可以修改某些样式为自己的显示风格