jxWebUI--数据表

容器表是用来排布web组件的，数据表顾名思义就是用来输入输出数据的。数据表可以细分为三种：

• 条件查询、分页显示的查询表
• 可以录入表格型数据的录入表
• 用来显示表格型数据的显示表

这些都是数据表，只是属性不同：

• 查询表是设置了：bind=tableTotalCount和pagination=true
• 录入表是设置了：newRow=true
• 显示表是这三个属性都不设置

注1：查询表的显示已经纳入了jxWebUI的内置工作流，所以不需要设置表名；录入表和显示表因为需要开发者自行操作表数据，所以必须设置表名

注2：录入表也能显示数据，比如，一个订单做到一半要外出，先保存起来，等回来后继续录入，则需要先将之前的录入内容显示回来

定义格式

数据表的定义格式为：

t = page.dataTable(表名).compute('联动计算表达式1').compute('联动计算表达式2').属性1(属性1值).属性2(属性2值)...

注：compute的说明情参考：前端联动计算。不需要联动计算则忽略

数据表需要定义列，数据表的数据是一个json数组，数组中的每一个元素都是一个【列名:列值】键值对组成的dict，顺序对应了表中的一行。每一行数据在显示时，根据列名将列值显示到对应的列中。

数据表定义示例：

t = page.dataTable().width(900).title('查询结果').bind('tableTotalCount').pagination(True)
t.col('devID').head('devID').width(200).hide(True)
t.col('devType').head('设备类型').width(200)
t.col('devName').head('设备名称').width(200)
t.col('op').head('操作').width(200).a().capaname('test.query_device').motion('disp').demand('disp_dev').text('查看设备').ignoreCapaid(True).primary(True).require(['devID','devName'])

显示效果就是下图中的【查询结果】。

查询结果定义了四列，对的，你没看错我也没说错，确实是四列，只不过devID这一列定义了一个hide=true的属性，所以它就隐藏不见了。

为什么不让用户看还要定义呢？因为它是ID，这一行的最后有一个type a的工具条【查看数据】，点不同行的查看数据，肯定想查看的是本行的设备数据。所以这时就需要同时给出这一行的设备ID，但这个数据用户看了没啥用，所以要隐藏起来

数据表数据结构

数据表所显示的表数据是一个json数组，数组中的每一个元素都是一个【列名:列值】键值对组成的dict，顺序对应了表中的一行。形如：

[#行0的数据：{'第1列列名':'123','第2列列名':'路由器','第3列列名':'路由器1', ...},#行1的数据：{'第1列列名':'124','第2列列名':'交换机','第3列列名':'交换机1', ...},#行2的数据：{'第1列列名':'125','第2列列名':'交换机','第3列列名':'交换机2', ...},......
]

数据表属性

bind

类型：string
缺省值：

查询数据时，数据表必须设置bind属性为：tableTotalCount。这是分页查询所必须的，否则无法正常初始化分页的页码。不是永远条件查询、分页显示的数据表不需要设置。

title

类型：string
缺省值：

表的标题。

header

类型：bool
缺省值：true

是否显示表头。表头包括：标题【左侧】、添加新行的按钮【右侧】。

width

类型：int
缺省值：

表的宽度。表宽是绝对宽度，单位像素。

pagination

类型：bool
缺省值：false

pagination=true是给数据表添加分页控件。

添加了分页控件的表就是条件查询分页显示的查询表。jxWebUI接管了search、reSearch两个事件完成了自动化的查询工作流。详见数据表与数控库的访问一章。

newRow

类型：bool
缺省值：false

是否在表头最右侧显示一个白色的十字，点击该十字就会在表中添加一行供用户输入表数据。请注意下图数据表表头最右侧的白色十字：

点击这个白色的十字，就会出现一行空白的输入框，供用户输入表数据。

列属性

容器表需要定义行，然后在行中添加各种web组件。数据表则需要定义列，通过定义列来控制数据的显示。

列的定义格式为：

t.col('列名').属性1(属性1值).属性2(属性2值)...

列名是必须的，表数据每行的同名数据将显示到该列中。

head

类型：string
缺省值：

本列的列标题。也就是本列数据的中文名这样的语义

hide

类型：bool
缺省值：false

是否显示本列

a

类型：无
缺省值：无

指示本列是操作列。

注：设置了a属性后，其它属性等同于工具条。未设置a属性的，其它属性只有：text、width

联动运算

数据表的联动计算定义格式如下：

compute("列名 = 列名 (+|-|*|/ [列名|数值])+")

可以定义多个联动计算。详细说明请参考前端联动计算一章。

注：联动计算不能循环，即不能在计算表达式中直接或间接引用自己，也就是说，某列不能经过代入后在计算式中引用自己。

额外说明

1、你应该已经看出来了，容器表和数据表实质上就是同一个表控件。jxWebUI中进行区分的目的很简单：专用。

• 容器表，用来放置其它控件进行行列对齐
• 数据表，用来录入、显示表格型数据

数据表又可以细分为：

• 条件查询、分页显示的查询表，设置了：bind=tableTotalCount和pagination=true
• 可以录入表格型数据的录入表，设置了：newRow=true
• 用来显示表格型数据的显示表，这三个属性都不设置

2、行计算只能用在录入表中

3、每行的工具条只能用在查询表中

4、录入表的数据是整表读取【capaInstance.getInput(表名)】、整表输出【capaInstance.set_output_datatable(表名,行数据数组)】

示例

#编程方式在capa中定义一个名为test_compute的page
@capa.web
def test_compute(page):#定义一个名为table2的数据表，标题是数据表，宽900像素，可以添加新行，有一个行计算式：ItemSum=itemPrice*ItemNumbert = page.dataTable('table2').title('数据表').width(900).newRow(True).compute('ItemSum=itemPrice*ItemNumber')#定义了三行t.col('itemPrice').head('单价').width(200)t.col('ItemNumber').head('数量').width(200)t.col('ItemSum').head('小计').width(200)#如果定义了disp修饰的同名函数，则在显示page时，会调用本函数来执行页面初始化工作
@capa.disp
def test_compute(ci, db, ctx):#定义了list，其每个元素都是一个dict，这个dict对应了数据表中的一行#dict中的每个元素则是以数据表的各列名为key，其值将显示到对应的列中rs = []for v in _data.values():rs.append({'itemPrice':v.get('price'), 'ItemNumber':v.get('number'), 'ItemSum':v.get('sum')})#设置好数据后，将其输出到table2表中ci.set_output_datatable('table2', rs)