`
huangyuanmu
  • 浏览: 289830 次
  • 性别: Icon_minigender_1
  • 来自: 龙城
社区版块
存档分类
最新评论

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

json应用服务器JavaScriptCSSDelphi 
阅读更多

最近的工作中，要解决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 onload="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" onfocus="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" onfocus="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" onfocus="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" onfocus="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" onfocus="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" onfocus="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" onfocus="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" onfocus="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" onfocus="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" onfocus="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" onfocus="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" onfocus="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" onfocus="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" onfocus="this.select()" type="text" id="sb_zcfzb_ncs_14"  size="15" readonly class="reportTableInputTitleRight"></td>
  	</tr>
  	<input type="button" value="test" onclick="setJson()">
</form>
</body>
</html>

 

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

1
顶
0
踩
分享到：
| 逆波兰算术表达式解析的JavaScript实现
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    execl表转成json

    在IT行业中，数据交换和处理是一项常见的任务，而Excel表格和JSON（JavaScript Object Notation）是两种广泛应用的数据格式。Excel通常用于数据管理、数据分析和报表制作，而JSON因其轻量级、易于阅读和处理的特性，...

    excel生成json工具

    Excel到JSON转换工具是一种实用程序，它允许用户将结构化的Excel表格数据轻松转换为JavaScript Object Notation (JSON)格式。这种格式广泛用于Web应用程序，因为它轻量级且易于人类阅读和机器解析。以下是对该工具...

    js图表 js报表收集

    Handsontable支持单元格编辑、公式计算和数据绑定，适合需要进行数据操作的报表场景。 3. ag-Grid：高性能的JavaScript网格组件，用于显示和操作大量数据。ag-Grid提供了丰富的特性，如虚拟滚动、分组、过滤、排序...

    ExcelToData_解析excel工具_json表格_

    在IT行业中，Excel是一种广泛使用的数据管理工具，尤其在数据分析、报表制作以及数据交换方面扮演着重要角色。而“ExcelToData_解析excel工具_json表格_”这个标题暗示了一个工具或者程序，它能够将Excel表格的数据...

    润乾报表帮助文档

    润乾报表是一款强大的Java报表工具，专为企业的数据可视化和分析设计。这款工具以其灵活性、易用性和高效性而受到广大开发者的欢迎。本“润乾报表帮助文档”旨在为初学者提供详尽的指导，帮助他们快速掌握润乾报表的...

    T+三大财务报表打开提示powered by grapecity spreadjs

    SpreadJS是一款强大的JavaScript电子表格库，它提供了类似于Excel的功能，允许用户在Web应用中创建、编辑和显示复杂的表格数据。通过集成SpreadJS，T+软件能够提供高度交互、功能丰富的财务报表界面，使得用户可以...

    食谱菜谱大全（数据库）

    在Excel中，可以直观地查看和编辑数据，创建图表，执行公式计算，如计算某种烹饪方式的菜品数量或者按照功效进行数据分析。 对于这个数据集，用户可以进行以下几种研究和应用： 1. **菜系研究**：通过统计分析，...

    ExcelToJson

    ExcelToJson是一款实用的工具，它的主要功能是将Excel表格中的数据转换成JSON（JavaScript Object Notation）格式，这是一种轻量级的数据交换格式，常用于Web服务和应用程序之间的数据传输。该工具支持处理.xls和....

    SheetJS电子表格数据工具包-新家.zip

    1. **数据导入**：用户上传Excel文件后，SheetJS能快速解析文件内容，并将数据转换为JavaScript对象数组，便于在前端进行展示或处理。 2. **数据导出**：将后台处理后的数据转换为Excel格式，让用户下载，方便他们...

    Table表格导出为Excel、csv、txt、sql、json、xml、Word格式

    1. Excel：Microsoft Excel是一种广泛使用的电子表格应用程序，适合数据分析、财务计算和报表制作。通过将表格导出为Excel格式（.xlsx），用户可以利用Excel的公式、图表和高级功能对数据进行深度分析。 2. CSV...

    硕正轻量级富Web应用套件–硕正报表主要指标及功能清单.pdf

    【硕正轻量级富Web应用套件——硕正报表主要指标及功能清单】是一款针对Web应用的专业报表设计工具，其特点在于轻量级、高效且兼容性广泛。以下是该套件的关键技术规范、功能特性及其重要性： 1. **技术规范与支持*...

    js-xlsx-master-Excel文件解析插件

    这个库广泛应用于数据分析、报表生成、数据导入导出等场景。 **1. 解析Excel文件** js-xlsx的核心功能是解析XLSX文件。它能将Excel文件的内容转换为JSON对象，方便在JavaScript环境中进行处理。通过`XLSX.read()`...

    Node的Excel模块.zip_Node.js_json和js_js读写excel_node excel_电子表格 js

    在Node.js环境中，处理Excel文件是一项常见的任务，特别是在数据分析、数据导入导出或者报表生成等场景。本项目“Node的Excel模块”提供了一个强大的工具，它允许开发者在Node.js环境中方便地读取、写入以及操作XLSX...

    硕正轻量级富Web应用套件–硕正报表主要指标及功能清单.docx

    【硕正轻量级富Web应用套件——硕正报表主要指标及功能清单】 硕正报表是一款面向企业和组织的轻量级富Web应用套件...总的来说，硕正报表套件以其强大的功能和广泛的兼容性，为企业的数据呈现和分析提供了强大的工具。

    js-xlsx-master.zip

    总的来说，"js-xlsx-master"是JavaScript环境下处理Excel数据的利器，无论是在数据分析、报表展示还是用户交互场景，都能提供强大的支持。其丰富的API和良好的文档使得开发者可以快速上手并灵活应对各种需求。通过...

    spreadjs_包含合并列头的数据绑定-demo (1).zip

    在这个示例中，开发者可以学习到如何使用SpreadJS设置数据源并将其绑定到电子表格，同时处理合并的列头，这对于构建复杂的企业级报表和数据分析应用非常有用。具体步骤可能包括： - 创建SpreadJS实例并附加到HTML...

    JsonExportExcel.min.zip

    `JsonExportExcel.min.zip` 提供了一个解决方案，它包含一个名为 `JsonExportExcel.min.js` 的JavaScript文件，这个文件很可能是一个轻量级的库，用于将JSON数据转换为可下载的Excel格式。在这个场景下，我们来深入...

Magicbox
Global site tag (gtag.js) - Google Analytics