ueditor子表控件绑定事件的扩展优化

一、ueditor子表控件

如下图：

  编辑器中其html代码如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65

< tr >                      < td  style = "border-width:1px;border-right-style:solid;border-bottom-style:solid;border-color:#cccccc;text-align:left;color:#666666;padding:8px;word-break:break-all;background-color:#fcfcf7;"  rowspan = "1"  colspan = "6" >                          < strong >产品信息</ strong >                      </ td >                  </ tr >                  < tr >                      < td  style = "border-width:1px;border-right-style:solid;border-bottom-style:solid;border-color:#cccccc;text-align:center;color:#666666;padding:8px;word-break:break-all;background-color:#fcfcf7;"  rowspan = "1"  colspan = "6" >                          < div  tablename = "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}" >                              < table  class = "listTable"  border = "0"  cellpadding = "2"  cellspacing = "0" >                                  < tbody >                                      < tr  class = "toolBar" >                                          < td  colspan = "5" >                                              < a  class = "link add"  href = "javascript:;" >添加</ a >                                          </ td >                                      </ tr >                                      < tr  class = "headRow" >                                          < th  style = "word-break:break-all;" >                                              产品型号                                          </ th >                                          < th  style = "word-break:break-all;" >                                              产品料号                                          </ th >                                          < th  style = "word-break:break-all;" >                                              数量                                          </ th >                                          < th  style = "word-break:break-all;" >                                              单价                                          </ th >                                          < th  style = "word-break:break-all;" >                                              总价                                          </ th >                                      </ tr >                                      < tr  class = "listRow"  formtype = "edit" >                                          < td >                                              < span  name = "editable-input"  style = "display:inline-block;padding:2px;"  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;}" >< input  type = "text"  style = "width:150px;height:20px;"  /></ span >                                          </ td >                                          < td >                                              < span  name = "editable-input"  style = "display:inline-block;padding:2px;"  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;}" >< input  type = "text"  style = "width:150px;height:20px;"  /></ span >                                          </ td >                                          < td >                                              < span  name = "editable-input"  style = "display:inline-block;padding:2px;"  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;}" >< input  type = "text"  style = "width:150px;height:20px;"  /></ span >                                          </ td >                                          < td >                                              < span  name = "editable-input"  style = "display:inline-block;padding:2px;"  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;}" >< input  type = "text"  style = "width:150px;height:20px;"  /></ span >                                          </ td >                                          < td  style = "word-break:break-all;" >                                              < span  name = "editable-input"  style = "display:inline-block;padding:2px;"  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;}" >< input  type = "text"  style = "width:150px;height:20px;"  /></ span >                                          </ td >                                      </ tr >                                  </ tbody >                              </ table >                          </ div >< br  />                      </ td >                  </ tr >                  < tr >                      < td  style = "border-width:1px;border-right-style:solid;border-bottom-style:solid;border-color:#cccccc;text-align:center;color:#666666;padding:8px;word-break:break-all;background-color:#fcfcf7;"  rowspan = "1"  colspan = "4" >                          < br  />                      </ td >                      < td  style = "border-width:1px;border-right-style:solid;border-bottom-style:solid;border-color:#cccccc;text-align:center;color:#666666;padding:8px;word-break:break-all;background-color:#fcfcf7;"  rowspan = "1"  colspan = "1"  width = "146" >                          合计金额                      </ td >                      < td  style = "border-width:1px;border-right-style:solid;border-bottom-style:solid;border-color:#cccccc;text-align:center;color:#666666;padding:8px;word-break:break-all;background-color:#fcfcf7;"  rowspan = "1"  colspan = "1"  width = "146" >                          < span  name = "editable-input"  style = "display:inline-block;padding:2px;"  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;}" >< input  type = "text"  style = "width:150px;height:20px;"  /></ span >                      </ td >                  </ tr >

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

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

html

  js代码如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

function  bindTableChange(){        $( "input[name='s:cpxx:cpsl'],"  +              "input[name='s:cpxx:cpdj']" ).bind( 'click change blur' ,  function (){                  //计算金额事件                  calcSubTableMoney( this );          });        }   function  calcSubTableMoney(self){        var  blocktable = $(self).parent().parent().parent();                  var  itdj = $.trim($( "input[name='s:cpxx:cpdj']" , $(blocktable)).val()); //IT单价        var  sl = $.trim($( "input[name='s:cpxx:cpsl']" , $(blocktable)).val()); //数量        if ($.isNumeric(itdj)&&$.isNumeric(sl)){          var  dxhj=itdj*sl;          dxhj=parseFloat(dxhj).toFixed(2);           $( "input[name='s:cpxx:cpzj']" , $(blocktable)).val(dxhj);         sumHj();         }      }        //汇总合计      function  sumHj(){        var  zhj=0;        var  dxhjArray= document.getElementsByName( "s:cpxx:cpzj" );        for ( var  i=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);      }

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

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

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

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

二、扩展和优化

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

1 2 3 4 5 6 7 8 9 10 11

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

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

   

     本文转自 gaochaojs 51CTO博客，原文链接：http://blog.51cto.com/jncumter/1768276，如需转载请自行联系原作者