以json为中心的报表数据表示及js公式解析计算的应用

最新推荐文章于 2023-06-30 09:03:37 发布
最新推荐文章于 2023-06-30 09:03:37 发布
阅读量111 收藏 1
点赞数
分类专栏： 技术杂谈 文章标签： json 应用服务器 JavaScript CSS Delphi ViewUI

最近的工作中，要解决web报表的一系列问题。在客户端，我们利用delphi的ie浏览器组件，开发了一个报表容器，对报表进行数据录入、保存、和申报等操作，部分报表数据操作行为可以离线使用。同时，也要求报表也可以直接通过浏览器进行在线访问和操作。

 

原来我们的web报表系统是以web页面为中心的，一张报表一个独立页面。事实上，可能多张报表之间有公式计算关系，这样如果一张报表的某个字段值改变了，可能会引起其它报表字段值的改变。原有的以页面为中心的模式，不能很好的解决这个问题。

 

基于以上的需求，把各个有公式关系的报表作为一套报表，或者视为一个报表对象，以json来表示报表的数据，通过js公式解析器，来解析提前定义好的报表公式关系，并把值更新到当前显示的报表页面和json中。这样，后续对报表数据的处理，就完全以json为中心，可以通过delphi调用js，把报表数据持久化到客户端，同时也可以通过ajax的方式，把报表数据提交到java服务器端进行处理。

 

其实对报表的处理的核心就是对数据的处理，在我们这种模式中，就是对json的处理。而报表关系的核心，就是公式，用户在操作报表数据时，程序根据预先定义的公式，同时对当前显示的web报表页面报表json中的数据值进行修改。

 

下边给出测试代码。

 

json报表数据及公式的定义（testJson.js）：

// 报表数据json表示
var testJson = {
	sb_zcfzb1:{
		sb_zcfzb_ncs_1:"0.00",sb_zcfzb_ncs_2:"0.00",sb_zcfzb_ncs_3:"0.00",sb_zcfzb_ncs_4:"0.00",sb_zcfzb_ncs_5:"0.00",sb_zcfzb_ncs_6:"0.00",
		sb_zcfzb_ncs_7:"0.00",sb_zcfzb_ncs_8:"0.00",sb_zcfzb_ncs_9:"0.00",sb_zcfzb_ncs_10:"0.00",sb_zcfzb_ncs_11:"0.00",sb_zcfzb_ncs_12:"0.00",
		sb_zcfzb_ncs_13:"0.00",sb_zcfzb_ncs_14:"0.00"
	},
	sb_zcfzb2:{
		sb_zcfzb_ncz_1:"0.00",sb_zcfzb_ncz_2:"0.00",sb_zcfzb_ncz_3:"0.00"
	}
};

// 报表公式关系表示
var testFormular = {
	sb_zcfzb1:"sb_zcfzb1.sb_zcfzb_ncs_14^$sb_zcfzb1.sb_zcfzb_ncs_1+$sb_zcfzb1.sb_zcfzb_ncs_2+$sb_zcfzb1.sb_zcfzb_ncs_3+$sb_zcfzb1.sb_zcfzb_ncs_4+$sb_zcfzb1.sb_zcfzb_ncs_5+$sb_zcfzb1.sb_zcfzb_ncs_6+$sb_zcfzb1.sb_zcfzb_ncs_7+$sb_zcfzb1.sb_zcfzb_ncs_8+$sb_zcfzb1.sb_zcfzb_ncs_9+$sb_zcfzb1.sb_zcfzb_ncs_10+$sb_zcfzb1.sb_zcfzb_ncs_11+$sb_zcfzb1.sb_zcfzb_ncs_12+$sb_zcfzb1.sb_zcfzb_ncs_13#4",
	sb_zcfzb2:"sb_zcfzb2.sb_zcfzb_ncz_1^$sb_zcfzb1.sb_zcfzb_ncs_1+$sb_zcfzb1.sb_zcfzb_ncs_2-$sb_zcfzb1.sb_zcfzb_ncs_3#1,"
			+"sb_zcfzb2.sb_zcfzb_ncz_2^$sb_zcfzb1.sb_zcfzb_ncs_1*$sb_zcfzb1.sb_zcfzb_ncs_2-$sb_zcfzb1.sb_zcfzb_ncs_3,"
			+"sb_zcfzb2.sb_zcfzb_ncz_3^$sb_zcfzb1.sb_zcfzb_ncs_1-$sb_zcfzb1.sb_zcfzb_ncs_2*$sb_zcfzb1.sb_zcfzb_ncs_3#3"
};
 

公式解析计算器的定义及web报表页面及json公式的触发（test.js）

	// 引用公式解析计算器
	var calculator = tohot.commons.declaration.ExpressionCalculator;
	calculator.report = testJson;

	// 设置页面报表公式触发
	function setFormular()
    {
	 	sb_zcfzb1.sb_zcfzb_ncs_1.onblur = new Function("calculator.doCalculateCurr('sb_zcfzb1.sb_zcfzb_ncs_1',sb_zcfzb1.sb_zcfzb_ncs_1.value,testFormular.sb_zcfzb1,'2');");
		sb_zcfzb1.sb_zcfzb_ncs_2.onblur = new Function("calculator.doCalculateCurr('sb_zcfzb1.sb_zcfzb_ncs_2',sb_zcfzb1.sb_zcfzb_ncs_2.value,testFormular.sb_zcfzb1,'2')");;
		sb_zcfzb1.sb_zcfzb_ncs_3.onblur = new Function("calculator.doCalculateCurr('sb_zcfzb1.sb_zcfzb_ncs_3',sb_zcfzb1.sb_zcfzb_ncs_3.value,testFormular.sb_zcfzb1,'2')");
		sb_zcfzb1.sb_zcfzb_ncs_4.onblur = new Function("calculator.doCalculateCurr('sb_zcfzb1.sb_zcfzb_ncs_4',sb_zcfzb1.sb_zcfzb_ncs_4.value,testFormular.sb_zcfzb1,'2')");
		sb_zcfzb1.sb_zcfzb_ncs_5.onblur = new Function("calculator.doCalculateCurr('sb_zcfzb1.sb_zcfzb_ncs_5',sb_zcfzb1.sb_zcfzb_ncs_5.value,testFormular.sb_zcfzb1,'2')");
		sb_zcfzb1.sb_zcfzb_ncs_6.onblur = new Function("calculator.doCalculateCurr('sb_zcfzb1.sb_zcfzb_ncs_6',sb_zcfzb1.sb_zcfzb_ncs_6.value,testFormular.sb_zcfzb1,'2')");
		sb_zcfzb1.sb_zcfzb_ncs_7.onblur = new Function("calculator.doCalculateCurr('sb_zcfzb1.sb_zcfzb_ncs_7',sb_zcfzb1.sb_zcfzb_ncs_7.value,testFormular.sb_zcfzb1,'2')");
		sb_zcfzb1.sb_zcfzb_ncs_8.onblur = new Function("calculator.doCalculateCurr('sb_zcfzb1.sb_zcfzb_ncs_8',sb_zcfzb1.sb_zcfzb_ncs_8.value,testFormular.sb_zcfzb1,'2')");
		sb_zcfzb1.sb_zcfzb_ncs_9.onblur = new Function("calculator.doCalculateCurr('sb_zcfzb1.sb_zcfzb_ncs_9',sb_zcfzb1.sb_zcfzb_ncs_9.value,testFormular.sb_zcfzb1,'2')");
		sb_zcfzb1.sb_zcfzb_ncs_10.onblur = new Function("calculator.doCalculateCurr('sb_zcfzb1.sb_zcfzb_ncs_10',sb_zcfzb1.sb_zcfzb_ncs_10.value,testFormular.sb_zcfzb1,'2')");
		sb_zcfzb1.sb_zcfzb_ncs_11.onblur = new Function("calculator.doCalculateCurr('sb_zcfzb1.sb_zcfzb_ncs_11',sb_zcfzb1.sb_zcfzb_ncs_11.value,testFormular.sb_zcfzb1,'2')");
		sb_zcfzb1.sb_zcfzb_ncs_12.onblur = new Function("calculator.doCalculateCurr('sb_zcfzb1.sb_zcfzb_ncs_12',sb_zcfzb1.sb_zcfzb_ncs_12.value,testFormular.sb_zcfzb1,'2')");
		sb_zcfzb1.sb_zcfzb_ncs_13.onblur = new Function("calculator.doCalculateCurr('sb_zcfzb1.sb_zcfzb_ncs_13',sb_zcfzb1.sb_zcfzb_ncs_13.value,testFormular.sb_zcfzb1,'2')");
	}

	// 实际情况下，该函数是在保存报表数据之前被调用
	function setJson() {
		// 根据公式定义，计算json值
		calculator.doCalculateJson(testFormular);

		// 遍历json，显示报表数据
		for(var key in testJson){
			for(var key1 in testJson[key]){
				alert(key + "." + key1 + "=" + testJson[key][key1]);
			}
		}
	}

 

 html测试页面（test.html）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>XXX表</title>
<link href="css/css.css" rel="stylesheet" type="text/css">
<script language=javascript src="json2.js"></script>
<script language="javascript" src="tohot.commons.declaration.ExpressionCalculator.js"></script>
<script language=javascript src="testJson.js"></script>
<script language=javascript src="test.js"></script>
</head>

<body οnlοad="javascript:setFormular();">
<form method="post" id="sb_zcfzb1" name="sb_zcfzb1">
  <div class="reportTable" style="width:1000px">
  <table cellspacing="1" id="reportTable">
  	<tr class="reportTableTitle">
  	  <td width="20%" rowspan="2" class="report_top_left">资产<br></td>
  	  <td width="4%" rowspan="2" class="report_top_middle">行<br>次<br></td>
  	  <td width="13%" class="report_top_middle">年初数<br></td>
  	</tr>
  	<tr class="reportTableTitle">
  	  <td class="report_middle_middle">&nbsp;</td>
  	  <td class="report_middle_middle">&nbsp;</td>
  	  <td class="report_middle_middle">&nbsp;</td>
  	  <td class="report_middle_middle">&nbsp;</td>
  	</tr>
  	<tr>
  	  <td class="report_middle_left">流动资产：<br></td>
  	  <td class="report_middle_middle">&nbsp;</td>
  	  <td class="report_middle_middle">－<br></td>
  	</tr>
  	<tr>
  	  <td class="report_blank_left2">货币资金<br></td>
  	  <td class="report_middle_middle">1</td>
  	  <td class="report_middle_middle"><input name="sb_zcfzb_ncs_1" οnfοcus="this.select()" type="text" id="sb_zcfzb_ncs_1"  size="15" class="reportTableInputEditRight"></td>
  	</tr>
  	<tr>
  	  <td class="report_blank_left2">短期投资<br></td>
  	  <td class="report_middle_middle">2</td>
  	  <td class="report_middle_middle"><input name="sb_zcfzb_ncs_2" οnfοcus="this.select()" type="text" id="sb_zcfzb_ncs_2"  size="15" class="reportTableInputEditRight"></td>
  	</tr>
  	<tr>
  	  <td class="report_blank_left2">应收票据<br></td>
  	  <td class="report_middle_middle">3</td>
  	  <td class="report_middle_middle"><input name="sb_zcfzb_ncs_3" οnfοcus="this.select()" type="text" id="sb_zcfzb_ncs_3"  size="15" class="reportTableInputEditRight"></td>
  	</tr>
  	<tr>
  	  <td class="report_blank_left2">应收股利<br></td>
  	  <td class="report_middle_middle">4</td>
  	  <td class="report_middle_middle"><input name="sb_zcfzb_ncs_4" οnfοcus="this.select()" type="text" id="sb_zcfzb_ncs_4"  size="15" class="reportTableInputEditRight"></td>
  	</tr>
  	<tr>
  	  <td class="report_blank_left2">应收利息<br></td>
  	  <td class="report_middle_middle">5</td>
  	  <td class="report_middle_middle"><input name="sb_zcfzb_ncs_5" οnfοcus="this.select()" type="text" id="sb_zcfzb_ncs_5"  size="15" class="reportTableInputEditRight"></td>
  	</tr>
  	<tr>
  	  <td class="report_blank_left2">应收账款<br></td>
  	  <td class="report_middle_middle">6</td>
  	  <td class="report_middle_middle"><input name="sb_zcfzb_ncs_6" οnfοcus="this.select()" type="text" id="sb_zcfzb_ncs_6"  size="15" class="reportTableInputEditRight"></td>
  	</tr>
  	<tr>
  	  <td class="report_blank_left2">其它应收款</td>
  	  <td class="report_middle_middle">7</td>
  	  <td class="report_middle_middle"><input name="sb_zcfzb_ncs_7" οnfοcus="this.select()" type="text" id="sb_zcfzb_ncs_7"  size="15" class="reportTableInputEditRight"></td>
  	</tr>
  	<tr>
  	  <td class="report_blank_left2"> 预付帐款<br></td>
  	  <td class="report_middle_middle">8</td>
  	  <td class="report_middle_middle"><input name="sb_zcfzb_ncs_8" οnfοcus="this.select()" type="text" id="sb_zcfzb_ncs_8"  size="15" class="reportTableInputEditRight"></td>
  	</tr>
  	<tr>
  	  <td class="report_blank_left2"> 应收补贴款<br></td>
  	  <td class="report_middle_middle">9</td>
  	  <td class="report_middle_middle"><input name="sb_zcfzb_ncs_9" οnfοcus="this.select()" type="text" id="sb_zcfzb_ncs_9"  size="15" class="reportTableInputEditRight"></td>
  	</tr>
  	<tr>
  	  <td class="report_blank_left2">存货<br></td>
  	  <td class="report_middle_middle">10</td>
  	  <td class="report_middle_middle"><input name="sb_zcfzb_ncs_10" οnfοcus="this.select()" type="text" id="sb_zcfzb_ncs_10"  size="15" class="reportTableInputEditRight"></td>
  	</tr>
  	<tr>
  	  <td class="report_blank_left2">待摊费用<br></td>
  	  <td class="report_middle_middle">11</td>
  	  <td class="report_middle_middle"><input name="sb_zcfzb_ncs_11" οnfοcus="this.select()" type="text" id="sb_zcfzb_ncs_11"  size="15" class="reportTableInputEditRight"></td>
  	</tr>
  	<tr>
  	  <td class="report_blank_left2">一年内到期的长期债券投资<br></td>
  	  <td class="report_middle_middle">21</td>
  	  <td class="report_middle_middle"><input name="sb_zcfzb_ncs_12" οnfοcus="this.select()" type="text" id="sb_zcfzb_ncs_12"  size="15" class="reportTableInputEditRight"></td>
  	</tr>
  	<tr>
  	  <td class="report_blank_left2">其他流动资产<br></td>
  	  <td class="report_middle_middle">24</td>
  	  <td class="report_middle_middle"><input name="sb_zcfzb_ncs_13" οnfοcus="this.select()" type="text" id="sb_zcfzb_ncs_13"  size="15" class="reportTableInputEditRight"></td>
  	</tr>
  	<tr>
  		<td class="report_blank_left2">流动资产合计<br></td>
  	  <td class="report_middle_middle">31</td>
  	  <td class="report_middle_middle"><input name="sb_zcfzb_ncs_14" οnfοcus="this.select()" type="text" id="sb_zcfzb_ncs_14"  size="15" readonly class="reportTableInputTitleRight"></td>
  	</tr>
  	<input type="button" value="test" οnclick="setJson()">
</form>
</body>
</html>

 

javascript公式解析计算器的简单说明和源码放在我的另外一篇博客文章里（http://huangyuanmu.iteye.com/admin/blogs/469190），有兴趣的话，可以看看。

远牧
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Jasper Report使用JSON数据源创建报表
xiaogege2012的专栏
10-02 2631
最近在做一个项目小功能，表单结案要生成PDF报表。 起初，想用HTML模板（art-template模板引擎）编写，利用浏览器的打印功能保存成pdf文件下载。但是HTML编写好的模板，页码、页眉、页脚设置有坑，表单内容中的表格较多，表格不能设置跨页，导致跨页的表格内容与页眉重叠，没能解决这个问题。 于是，转战研究Jasper report生成报表，用更加专业的报表生成工具来做。刚开始，也是跌跌撞撞，遇到了很多问题，因为觉得没有退路了，必须要用这个搞出来，所以就硬着头皮去找各种资料。 主要使用的json
js数值计算公式是什么,js计算数学表达式
chatgpt001的博客
11-17 468
例如:每天需要完成8个小时，480分钟的工作时间, 求每时每刻的工作完成率问题，百分比后面保留两位小数(四舍五入)。思路:工作时间除以总时间，再乘以10000，执行四舍五入的方法，再除以100，就是得到完成率了。//总工作时长//已经工作时长//工作完成率S//输出: 20.83%
JSON百科全书：学习JSON看这一篇就够了
青春木鱼的博客
06-30 5829
JSON 对象包含两个方法：用于解析 JavaScript Object Notation（JSON）的 parse() 方法，以及将对象/值转换为 JSON 字符串的 stringify() 方法。除了这两个方法，JSON 这个对象本身并没有其他作用，也不能被调用或者作为构造函数调用。
RestController风格下对页面的跳转
任浩的博客
04-03 4252
ModelAndView model = new ModelAndView(); model.setViewName("userAdd"); return model; ========================================================================= 返回数据 HashMap<String, O...
json介绍,表示方式
swpucwf的博客
02-17 1033
1. json的介绍 json是 JavaScript Object Notation 的首字母缩写，翻译过来就是javascript对象表示法，这里说的json就是类似于javascript对象的字符串，它同时是一种数据格式，目前这种数据格式比较流行，逐渐替换掉了传统的xml数据格式。 2. json的格式 json有两种格式： 对象格式 数组格式 对象格式: 对象格式的json数据，使用一...
以中国为中心的世界地图json、js文件
07-27
以中国为中心的世界地图json/js文件,地图国家名称包含中文版和英文两个版本,另外还包含了一张demo图片,是本人开发的,需要资源的可以进一步交流,文件清单如下： 1.world-中国为世界中心-国家英文名.js 2.world-中国为...
使用javascript实现json数据以csv格式下载
12-11
但是开发时，分工安排都是以json格式记录的，所以就做了一个将json数据以csv格式下载到本地。 代码： 代码如下: <!DOCTYPE html> <html>  <title>download csv</title>  <head>  ...
Javascript中JSON数据分组优化实践及JS操作JSON总结
10-18
主要介绍了Javascript中JSON数据分组优化实践，文中还对JS操作JSON的要领做了总结,需要的朋友可以参考下
全国城市地址的json数据 省市区json数据 js文件 也可以复制为json数据
最新发布
01-02
全国城市地址的json数据 省市区json数据 js文件 也可以复制为json数据 [{ "code": "110000", "address": "北京", "children": [{ "code": "110100", "address": "北京市", "children": [{ "code": "110101",...
node-json-math:用于在 JSON 中表达数学运算的包
06-12
节点-json-数学 用于在 JSON 中表达数学运算的包。 用于在数据库中存储数学过程。 使用示例 var JSONMath = require ( 'json-math' ) ; var math = new JSONMath ( ) ; var result = math . execute ( { "a" : { "operation" : "+" , "variables" : [ 2 , 2 ] } , "b" : { "operation" : "-" , "variables" : [ 5 , 1 ] } , "c" : { "operation" : "*" , "variables" : [ 2 , 2 ] } , "d" : { "operation" : "/" , "v
java把字符串转化成公式计算的示例
08-27
今天小编就为大家分享一篇java把字符串转化成公式计算的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
json 报表开发
08-15
iOS 的App 的里一个报表的展现脚本
js 公式计算
TLROJE787的博客
08-10 1216
参考： js实现计算器（包含加减乘除括号） 代码如下: 功能: 传入包含未知数a,b,c的表达式，以及未知数值，计算结果 使用场景: 用户可通过编辑公式来操作数据，算出不同结果 const compute = (formulaABC, a, b, c) => { const formula = formulaABC.replace(/a/g, a).replace(/b/g, b).replace(/c/g, c).replace(/\s/g, ''); // 如果是减法或除法，第
JavaScript实现计算复杂计算公式（支持括号）
热门推荐
u010973529的专栏
08-07 1万+
//计算器 var CalcEval = function() {}; //复杂的计算方法（包含括号） CalcEval.prototype.complexEval = function(str) {     if (str == null) {         return "";     }     if (typeof str != "string") {//转化成字符
网页中通过 Javascript 实现类似 Excel 的公式解析计算功能
xhydongda的博客
06-27 7356
1. 目标 Excel中，公式形如"A1+B1-C1*D1"，在网页中将表格单元格也按照Excel方式定位(字母A~Z代表列，数字1-n代表行，字母+数字定位单元格)，然后在单元格中保存计算公式，当输入单元格数值变化时触发公式计算。 2. 难点 1). 获取公式中的变量；2).计算公式；3).javascript浮点数计算的精度问题（1.4->1.4000...
用JavaScript实现的一些计算公式
派的无理性
09-10 4858
 学习JavaScript编程，设计各种算法公式。 各类JavaScript算法公式的最新更新。 分类 目录 摘要   科学教育 天文学/太阳系 万有引力公式   科学教育 代数 递归方法，计算圆周率   科学教育 代数/行列式 计算行列式   科学教育 解析几何 计算两点之间距离   ...
js解析数学运算公式
weixin_30699463的博客
06-19 4544
已上传到npm，NPM包地址： https://www.npmjs.com/package/exec-mathexpress //运行demo const execMathExpress=require('./utils/execMathExpress');//贝叶斯 条件概率公式 SW=WS*S/(WS*S+WH*H);(只用于二分类)console.log(execMathExp...
kotlin 读取json文件_Kotlin数据类及json解析
09-23
我们可以使用数据类来定义 JSON 数据的结构，然后使用 json 解析库来读取和解析 JSON 文件，并将其转换为 Kotlin 对象，方便地操作和处理 JSON 数据。 ### 回答3： 在Kotlin中，我们可以使用GSON库来解析JSON文件...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值