在做调查问卷的过程中,遇到一个表格的统计问题,算是需要些js方面的综合知识,所以记录下来。
在上次完成了基本的求和的基础上,添加了基本的加减乘除四则运算。
基本需求简化后如下:
对应的htm了为:
政府财政 单位自筹 其他资金 合计 相加求和 金额: 来源:
产品名称 产品单价 产品数量 合计 相乘求和 钢笔
拥有现金 产品名称 产品单价 最多可购买数量 剩余现金 除法 钢笔
拥有现金 产品名称 产品单价 购买数量 产品名称 产品单价 购买数量 剩余现金 综合 钢笔1 钢笔2
其实就是简单的四则运算,难点在于需要计算的各个文本框的编号。如果知道了文本框的编号,如何确定是什么计算关系?也是一个难点。而且是业务相关的,似乎没有通用的方法?
如果知道业务规则,如何把业务规则保存在网页中,通过js分析业务规则,进而完成需求呢?
1关键点:如何保存业务规则 2如何分析业务规则
1关键点:如何保存业务规则
都知道htm标准是XML标准的一部分,xml有自定义标签属性,htm中也可以使用自定义标签,因此使用自定义属性Computationalexpressions来保存业务规则。
例如:求和的属性:Computationalexpressions='(text_1)+(text_2)+(text_3)'
相乘求和的属性:Computationalexpressions='(text_5)*(text_6)'
除法的属性:Computationalexpressions='Math.floor((text_7)/(text_8))'
综合 的属性:Computationalexpressions='(text_7)-(text_8)*(text_88)'
2如何分析业务规则
根据业务规则可以知道计算需要哪些文本框的编号,如果能把业务规则进一步分析自然就可以满足需求了。
分析业务规则,只要把文本框编号改为文本框的输入值就可以了。因此思路就很简单了:通过正则表达式匹配出文本框编号,改为文本框的值,最后再通过eval把文本转为计算需要的脚本就可以了。
最终代码:
政府财政 单位自筹 其他资金 合计 相加求和 金额: 来源:
产品名称 产品单价 产品数量 合计 相乘求和 钢笔
拥有现金 产品名称 产品单价 最多可购买数量 剩余现金 除法 钢笔
拥有现金 产品名称 产品单价 购买数量 产品名称 产品单价 购买数量 剩余现金 综合 钢笔1 钢笔2
改进版脚本:
$(document).ready(function () { var all=$("input[Computationalexpressions]");//获取所有需要计算的文本框 var re = new RegExp(/\(text_[0-9]+\)/); //匹配计算表达式中的文本框编号 $.each(all, function(j, item){ var itemTemp=$(item); var id=itemTemp.attr("id");//合计的文本框编号 var Computationalexpressions=itemTemp.attr("Computationalexpressions");//计算表达式 var result= re.exec(Computationalexpressions); var idList = [];//次计算表达式涉及的所有文本框编号 while(result) { var temp=result[0];//匹配到文本框编号 var oneId=temp.substring(1,temp.length-1)//文本框编号,去掉括号 idList.push(oneId); Computationalexpressions= Computationalexpressions.replace("("+oneId+")","GetValue('#"+oneId+"')"); result= re.exec(Computationalexpressions); } BindBlur(idList,id,Computationalexpressions); });})function GetValue(id){ var tempValue=$(id).val(); if($.isNumeric(tempValue)) { return parseFloat(tempValue); } return 0;}function BindBlur(idList,totalId,Computationalexpressions)//绑定失去焦点的事件blur{ $.each(idList, function(j, item){ var id=item; $("#"+id).blur( function () { var sum=eval(Computationalexpressions);//把文本变为js脚本 if($.isNumeric(sum)){ $("#"+totalId).val(sum); } } ); });}