一、ueditor子表控件

如下图：

编辑器中其html代码如下：

<tr><tdrowspan="1"colspan="6"><strong>产品信息</strong></td></tr><tr><tdrowspan="1"colspan="6"><divtablename="cpxx"tabledesc="销售合同/订单评审表产品信息子表"type="subtable"name="editable-input"class="subtable"show="true"external="{&#39;tablename&#39;:&#39;cpxx&#39;,&#39;tablerows&#39;:&#39;5&#39;,&#39;tablememo&#39;:&#39;销售合同/订单评审表产品信息子表&#39;,&#39;inlinemodel&#39;:1,&#39;blockmodel&#39;:0,&#39;windowmodel&#39;:0,&#39;show&#39;:1}"><tableclass="listTable"border="0"cellpadding="2"cellspacing="0"><tbody><trclass="toolBar"><tdcolspan="5"><aclass="linkadd"href="javascript:;">添加</a></td></tr><trclass="headRow"><th>产品型号</th><th>产品料号</th><th>数量</th><th>单价</th><th>总价</th></tr><trclass="listRow"formtype="edit"><td><spanname="editable-input"class="textinput"external="{&#39;comment&#39;:&#39;产品型号&#39;,&#39;name&#39;:&#39;cpxh&#39;,&#39;hiddenSet&#39;:&#39;&#39;,&#39;dbType&#39;:{&#39;type&#39;:&#39;varchar&#39;,&#39;length&#39;:&#39;50&#39;},&#39;isRequired&#39;:1,&#39;isFlowVar&#39;:0,&#39;isDateString&#39;:0,&#39;valueFrom&#39;:{&#39;value&#39;:&#39;0&#39;,&#39;content&#39;:&#39;&#39;},&#39;width&#39;:&#39;&#39;,&#39;widthUnit&#39;:&#39;px&#39;,&#39;height&#39;:&#39;&#39;,&#39;heightUnit&#39;:&#39;px&#39;}"><inputtype="text"/></span></td><td><spanname="editable-input"class="textinput"external="{&#39;comment&#39;:&#39;产品料号&#39;,&#39;name&#39;:&#39;cplh&#39;,&#39;hiddenSet&#39;:&#39;&#39;,&#39;dbType&#39;:{&#39;type&#39;:&#39;varchar&#39;,&#39;length&#39;:&#39;50&#39;},&#39;isRequired&#39;:1,&#39;isFlowVar&#39;:0,&#39;isDateString&#39;:0,&#39;valueFrom&#39;:{&#39;value&#39;:&#39;0&#39;,&#39;content&#39;:&#39;&#39;},&#39;width&#39;:&#39;&#39;,&#39;widthUnit&#39;:&#39;px&#39;,&#39;height&#39;:&#39;&#39;,&#39;heightUnit&#39;:&#39;px&#39;}"><inputtype="text"/></span></td><td><spanname="editable-input"class="textinput"external="{&#39;comment&#39;:&#39;产品数量&#39;,&#39;name&#39;:&#39;cpsl&#39;,&#39;hiddenSet&#39;:&#39;&#39;,&#39;dbType&#39;:{&#39;type&#39;:&#39;number&#39;,&#39;intLen&#39;:&#39;14&#39;,&#39;decimalLen&#39;:&#39;0&#39;},&#39;isRequired&#39;:1,&#39;isFlowVar&#39;:0,&#39;valueFrom&#39;:{&#39;value&#39;:&#39;0&#39;,&#39;content&#39;:&#39;&#39;},&#39;width&#39;:&#39;&#39;,&#39;widthUnit&#39;:&#39;px&#39;,&#39;height&#39;:&#39;&#39;,&#39;heightUnit&#39;:&#39;px&#39;}"><inputtype="text"/></span></td><td><spanname="editable-input"class="textinput"external="{&#39;comment&#39;:&#39;产品单价&#39;,&#39;name&#39;:&#39;cpdj&#39;,&#39;hiddenSet&#39;:&#39;&#39;,&#39;dbType&#39;:{&#39;type&#39;:&#39;number&#39;,&#39;intLen&#39;:&#39;14&#39;,&#39;decimalLen&#39;:&#39;2&#39;},&#39;isRequired&#39;:1,&#39;isFlowVar&#39;:0,&#39;valueFrom&#39;:{&#39;value&#39;:&#39;0&#39;,&#39;content&#39;:&#39;&#39;},&#39;width&#39;:&#39;&#39;,&#39;widthUnit&#39;:&#39;px&#39;,&#39;height&#39;:&#39;&#39;,&#39;heightUnit&#39;:&#39;px&#39;}"><inputtype="text"/></span></td><td><spanname="editable-input"class="textinput"external="{&#39;comment&#39;:&#39;产品总价&#39;,&#39;name&#39;:&#39;cpzj&#39;,&#39;hiddenSet&#39;:&#39;&#39;,&#39;dbType&#39;:{&#39;type&#39;:&#39;number&#39;,&#39;intLen&#39;:&#39;14&#39;,&#39;decimalLen&#39;:&#39;2&#39;},&#39;isRequired&#39;:1,&#39;isFlowVar&#39;:0,&#39;valueFrom&#39;:{&#39;value&#39;:&#39;0&#39;,&#39;content&#39;:&#39;&#39;},&#39;width&#39;:&#39;&#39;,&#39;widthUnit&#39;:&#39;px&#39;,&#39;height&#39;:&#39;&#39;,&#39;heightUnit&#39;:&#39;px&#39;}"><inputtype="text"/></span></td></tr></tbody></table></div><br/></td></tr><tr><tdrowspan="1"colspan="4"><br/></td><tdrowspan="1"colspan="1"width="146">合计金额</td><tdrowspan="1"colspan="1"width="146"><spanname="editable-input"class="textinput"external="{&#39;comment&#39;:&#39;合计金额&#39;,&#39;name&#39;:&#39;hjje&#39;,&#39;hiddenSet&#39;:&#39;&#39;,&#39;dbType&#39;:{&#39;type&#39;:&#39;number&#39;,&#39;intLen&#39;:&#39;14&#39;,&#39;decimalLen&#39;:&#39;2&#39;},&#39;isRequired&#39;:1,&#39;isList&#39;:0,&#39;isQuery&#39;:0,&#39;isFlowVar&#39;:0,&#39;valueFrom&#39;:{&#39;value&#39;:&#39;0&#39;,&#39;content&#39;:&#39;&#39;},&#39;width&#39;:&#39;&#39;,&#39;widthUnit&#39;:&#39;px&#39;,&#39;height&#39;:&#39;&#39;,&#39;heightUnit&#39;:&#39;px&#39;}"><inputtype="text"/></span></td></tr>

示例中的子表最后一列为合计列，每一列其合计=单价*数量，金额总计=各行合计之和；

页面效果展示及html代码如下

html

js代码如下：

functionbindTableChange(){$("input[name='s:cpxx:cpsl'],"+"input[name='s:cpxx:cpdj']").bind('clickchangeblur',function(){//计算金额事件calcSubTableMoney(this);});}functioncalcSubTableMoney(self){varblocktable=$(self).parent().parent().parent();varitdj=$.trim($("input[name='s:cpxx:cpdj']",$(blocktable)).val());//IT单价varsl=$.trim($("input[name='s:cpxx:cpsl']",$(blocktable)).val());//数量if($.isNumeric(itdj)&&$.isNumeric(sl)){vardxhj=itdj*sl;dxhj=parseFloat(dxhj).toFixed(2);$("input[name='s:cpxx:cpzj']",$(blocktable)).val(dxhj);sumHj();}}//汇总合计functionsumHj(){varzhj=0;vardxhjArray=document.getElementsByName("s:cpxx:cpzj");for(vari=0;i<dxhjArray.length;i++){if($.isNumeric(dxhjArray[i].value)){zhj+=parseFloat(dxhjArray[i].value);}}zhj=parseFloat(zhj).toFixed(2);$("input[name='m:"+formDefineName+":hjje']").val(zhj);}

为单价和数量两个input均添加chang\blur\click事件，事件触发后会更新合计和总计值；

$后有两个参数，第一个为操作对象，第二个定义操作对象所在的范围；由html可以看出单价或数量的parent.parent.parent即为tr，这样就限定了按行计算；

parseFloat和toFixed为js的两个函数，分别为转换为float和四舍五入小数点后两位；

isNumeric和trim为jQuery的两个函数，分别为判断是否为数字和去掉空格；

二、扩展和优化

由于子表控件支持点击添加行，而在点击添加后由于新增的input并未注册事件，故无法使用算数计算合计和总计。我们采用一种为子表”添加“按钮添加exefunc，为新增行input增加注册事件，代码如下

functionbindExtFunction(){$(".toolBar").attr("extfunc","toolbarExtFunction");}/**工具条扩展方法*/functiontoolbarExtFunction(){//子表序列号//calcTableSerino();//子表下拉框、输入框事件绑定bindTableChange();}

toolBar为添加按钮的父对象，根据JQuery的传播机制，事件的注册会以捕获机制由父及子，再以冒泡机制以子及父，所以点击添加按钮后，会先运行父对象的相应函数，添加按钮后，会再次运行父对象从而为新增行注册事件。