jxWebUI--前端联动计算
对于销售订单这样有着较为复杂运算的应用，如果把用户在web界面所有的输入都发送回数据变动事件中进行处理，会非常的繁杂。
所以jxWebUI内置了一个web端进行联动计算的功能，用来对行运算、列累加、控件间运算等进行自动计算，后端程序只接收计算结果就可以了。
上图中，在任一行的单价、数量中进行输入，该行的小计会自动得到两者的乘积；然后变动后的数据会自动推动小计列的累加运算，然后将累加后的和推送给累计；累计和折扣的任何变化又会推动将累计和折扣的乘积给到总计。
注：注意【数据表】右上角的白色十字，点击该白色十字数据表就会自动增加一行
这一切都是浏览器自动完成的，jxWebUI中称之为链式联动运算。所谓的链式是说：当我们修改某单品的单价后，因其发生了变化，所以会自动计算本行的小计；因本行的小计发生了变动，又会自动计算累计；因累计发生了变化，所以又会自动计算总计。
而所有这些计算都在浏览器中完成，后端只需接收计算后的结果即可。
链式联动运算包括三种：
1、数据表的行运算
每一行中，各列进行算术运算，并将结果赋予其它列。如上图中数据表中的：
itemSum = itemPrice * itemNumber
每一行中小计列的结果是单价列乘以数量列
2、数据表的列运算
对某个数据表中的某列进行累加，然后将结果赋予其它的某个独立控件。如上图中数据表中的：
tableSum = sum table2.ItemSum
容器表中的累计是数据表中所有小计列的累加
3、page的各控件间的联立运算。如上图中数据表中的：
total = tableSum * discount
容器表中的总计是累计乘以折扣的结果
链式联动运算的定义非常简单：
compute#联立运算数据名 = 数据名 +|-|*|/ 数据名#列运算数据名 = sum 表名.列名#行运算pre row 数据名 = 数据名 +|-|*|/ 数据名
其它就是需要针对不同的情况放到不同的地方：
- 数据表的行运行只和数据表有关，所以行运算是和数据表的定义结合在一起的
- 列运算和联立运算，因为是以整个page的某控件为target，所以这两者需要在page描述完毕后独立进行定义，因为是独立定义，所以最后还需要添加一个英文的分号以明确结束
上图所示的page的定义为：
@capa.web
def test_compute(page):#最后的联立计算[tableSum = sum table2.ItemSum]需要指明是累加哪个表的哪个列，所以这里必须给出明确的表名#定义了一个行计算，即每行的ItemSum，由本行输入的itemPrice和ItemNumber相乘得出t = 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)#本page中不需要访问本表，所以不需要明确给出表名，由jxWebUI自动给出t = table().title('容器表').width(900)r = t.row()r.text().text('累计').width(200)r.input().bind('tableSum').width(200)r = t.row()r.text().text('折扣').width(200)r.input().bind('discount').width(200)r = t.row()r.text().text('总计').width(200)r.input().bind('total').width(200)#定义了一个列累加计算，即累计的数值，由数据表table2中所有行的ItemSum列累加得出page.compute('tableSum = sum table2.ItemSum')#定义了一个普通的联立计算，即总计的数值，由累计乘以折扣得出page.compute('total = tableSum * discount')
上述页面也可以用page以格式化字符串方式进行描述：
@capa.page
def test_compute(ci, db, ctx):'''dataTable table2 title='数据表',width=900,newRow=true **compute pre row ItemSum=itemPrice*ItemNumber**:col itemPrice head 单价 width=200col ItemNumber head 数量 width=200col ItemSum head 小计 width=200;table table1 title='容器表',width=900:rowtext text1 text='累计',bind=text1,width=200input input1 bind=tableSum,width=200rowtext text2 text='折扣',width=200input input2 bind=discount,width=200rowtext text3 text='总计',width=200input input3 bind=total,width=200rowbutton button1 text='测试',width=100,motion=cmd,demand=compute_active;**compute****tableSum = sum table2.ItemSum****total = tableSum * discount****;**'''pass
注意代码中两处compute，和列名、控件名关联起来就非常简单了。