ueditor子表控件綁定事件的擴展優化

一、ueditor子表控件

如下圖：

  編輯器中其html代碼如下：

  <tr>
                    <td  rowspan="1" colspan="6">
                        <strong>產品信息</strong>
                    </td>
                </tr>
                <tr>
                    <td  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 >
                                            產品型號
                                        </th>
                                        <th >
                                            產品料號
                                        </th>
                                        <th >
                                            數量
                                        </th>
                                        <th >
                                            單價
                                        </th>
                                        <th >
                                            總價
                                        </th>
                                    </tr>
                                    <tr class="listRow" formtype="edit">
                                        <td>
                                            <span name="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;}"><input type="text"  /></span>
                                        </td>
                                        <td>
                                            <span name="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;}"><input type="text"  /></span>
                                        </td>
                                        <td>
                                            <span name="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;}"><input type="text"  /></span>
                                        </td>
                                        <td>
                                            <span name="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;}"><input type="text"  /></span>
                                        </td>
                                        <td >
                                            <span name="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;}"><input type="text"  /></span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div><br />
                    </td>
                </tr>
                <tr>
                    <td  rowspan="1" colspan="4">
                        <br />
                    </td>
                    <td  rowspan="1" colspan="1" width="146">
                        合計金額
                    </td>
                    <td  rowspan="1" colspan="1" width="146">
                        <span name="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;}"><input type="text"  /></span>
                    </td>
                </tr>

  示例中的子表最后一列為合計列，每一列其合計=單價*數量，金額總計=各行合計之和；

  頁面效果展示及html代碼如下

html

  js代碼如下：

	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增加注冊事件，代碼如下

function bindExtFunction(){
	$(".toolBar").attr("extfunc", "toolbarExtFunction");
}

/** 工具條擴展方法 */
function toolbarExtFunction(){
	//子表序列號
  //calcTableSerino();
	//子表下拉框、輸入框事件綁定
	bindTableChange();
}

   toolBar為添加按鈕的父對象，根據JQuery的傳播機制，事件的注冊會以捕獲機制由父及子，再以冒泡機制以子及父，所以點擊添加按鈕后，會先運行父對象的相應函數，添加按鈕后，會再次運行父對象從而為新增行注冊事件。