一、ueditor子表控件
成都创新互联公司科技有限公司专业互联网基础服务商,为您提供中国电信云锦天府,高防主机,成都IDC机房托管,成都主机托管等互联网服务。
如下图:
编辑器中其html代码如下:
产品信息
添加 产品型号 产品料号 数量 单价 总价
合计金额
示例中的子表最后一列为合计列,每一列其合计=单价*数量,金额总计=各行合计之和;
页面效果展示及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
为单价和数量两个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子表控件绑定事件的扩展优化
URL分享:http://bjjierui.cn/article/pjshei.html