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

一、ueditor子表控件

成都创新互联公司科技有限公司专业互联网基础服务商，为您提供中国电信云锦天府，高防主机，成都IDC机房托管，成都主机托管等互联网服务。

如下图：

编辑器中其html代码如下：

合计金额

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

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

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

html

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

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为单价和数量两个input均添加chang\blur\click事件，事件触发后会更新合计和总计值；
$后有两个参数，第一个为操作对象，第二个定义操作对象所在的范围；由html可以看出单价或数量的parent.parent.parent即为tr，这样就限定了按行计算；
parseFloat和toFixed为js的两个函数，分别为转换为float和四舍五入小数点后两位；
isNumeric和trim为jQuery的两个函数，分别为判断是否为数字和去掉空格；
二、扩展和优化
  由于子表控件支持点击添加行，而在点击添加后由于新增的input并未注册事件，故无法使用算数计算合计和总计。我们采用一种为子表”添加“按钮添加exefunc，为新增行input增加注册事件，代码如下
function bindExtFunction(){
	$(".toolBar").attr("extfunc", "toolbarExtFunction");
}

/** 工具条扩展方法 */
function toolbarExtFunction(){
	//子表序列号
  //calcTableSerino();
	//子表下拉框、输入框事件绑定
	bindTableChange();
}
   toolBar为添加按钮的父对象，根据JQuery的传播机制，事件的注册会以捕获机制由父及子，再以冒泡机制以子及父，所以点击添加按钮后，会先运行父对象的相应函数，添加按钮后，会再次运行父对象从而为新增行注册事件。
               
            
                            

                分享文章：ueditor子表控件绑定事件的扩展优化                

                分享地址：http://dzwzjz.com/article/pjshei.html

大橙子网站建设，新征程启航

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

其他资讯