用SigmaGrid制作报表

阅读更多

SigmaGrid为你制作web报表提供了一个新的选择。用SigmaGrid制作报表的优点：
1、可以在浏览器上进行分组聚合运算，充分利用客户端cpu的计算能力。
2、在浏览器上生成分页打印页面，根据程序定义或者用户选择的多种参数进行分页计算，使最终打印出来的报表充分匹配客户端的打印机和纸张类型，使报表更美观。
3、代码编写简单。
4、灵活的二次开发。充分利用js脚本语言的强大功能，让你自如定义分组合计行的内容。

实例为证：
从服务器获得的对象集合：

{period:"07年3月",goods:{id:4,code:"CL004",name:"丝绸面料",unit:"米"},storage:{id:1,name:"原料仓库"},initAmount:60,initMoney:3000,inAmount:150,inMoney:7500,outAmount:200,outMoney:10000,finalAmount:60,finalMoney:3000},
{period:"07年3月",goods:{id:5,code:"CL005",name:"涤纶面料",unit:"米"},storage:{id:1,name:"原料仓库"},initAmount:200,initMoney:2000,inAmount:300,inMoney:3000,outAmount:440,outMoney:4400,finalAmount:200,finalMoney:2000},
{period:"07年3月",goods:{id:6,code:"CL006",name:"丝棉混纺面料",unit:"米"},storage:{id:1,name:"原料仓库"},initAmount:300,initMoney:6000,inAmount:800,inMoney:16000,outAmount:900,outMoney:18000,finalAmount:300,finalMoney:6000},
...

列模型申明：

		
{name:"period",caption:"会计期",width:60,mode:"string"},
{name:"goods.code",caption:"商品编码",width:80,mode:"string",align:"center"},	
{name:"goods.name",caption:"商品名称",width:80,mode:"string"},
{name:"goods.unit",caption:"单位",width:40,mode:"string",align:"center"},
{name:"storage.name",caption:"仓库",width:80,mode:"string"},
{name:"initiatory",caption:"期初",children:[
	{name:"initAmount",caption:"数量",width:40,mode:"number",format:"#"},
	{name:"initMoney",caption:"金额",width:80,mode:"number",format:"#.000"}
]},
{name:"currentIn",caption:"本期入库",children:[
	{name:"inAmount",caption:"数量",width:60,mode:"number",format:"#"},
	{name:"inMoney",caption:"金额",width:80,mode:"number",format:"#.000"}
]},
{name:"currentOut",caption:"本期出库",children:[
	{name:"outAmount",caption:"数量",width:60,mode:"number",format:"#"},
	{name:"outMoney",caption:"金额",width:80,mode:"number",format:"#.000"}
]},
{name:"final",caption:"期末",children:[
	{name:"finalAmount",caption:"数量",width:60,mode:"number",format:"#"},
	{name:"finalMoney",caption:"金额",width:80,mode:"number",format:"#.000"}
]}

按会计期分组聚合的报表生成代码：

function report1(){
	var context = {
		sequence:true,checkBox:false,readonly:true,locked:3,sortable:false,
		groupBy:{keyName:"period",groupsOrder:{column:"period",order:"asc"},rowsOrder:{column:"goods.name",order:"asc"},aggregate:[{column:"inMoney",exp:"sum"},{column:"outMoney",exp:"sum"},{column:"finalMoney",exp:"sum"}],view:"oThis.rows[0].rowData.p$('period')+'入库金额：'+eval(oThis.values()['inMoney'])+'元，'+oThis.rows[0].rowData.p$('period')+'出库金额：'+eval(oThis.values()['outMoney'])+'元，'+oThis.rows[0].rowData.p$('period')+'余额：'+eval(oThis.values()['finalMoney'])+'元'"},
		paintMode:"page"
	};	
	grid = new SigmaGrid("gridbox",context,columns);
	grid.bindData(data);
}

效果参见附件1

按仓库分组聚合的报表生成代码：

function report2(){
	var context = {
		sequence:true,checkBox:false,readonly:true,locked:3,sortable:false,
		groupBy:{keyName:"storage.id",groupsOrder:{column:"storage.name",order:"asc"},rowsOrder:{column:"goods.name",order:"asc"},aggregate:[{column:"inMoney",exp:"sum"},{column:"outMoney",exp:"sum"},{column:"finalMoney",exp:"sum"}],view:"oThis.rows[0].rowData.p$('storage.name')+'入库金额：'+eval(oThis.values()['inMoney'])+'元，'+oThis.rows[0].rowData.p$('storage.name')+'出库金额：'+eval(oThis.values()['outMoney'])+'元'"},
		paintMode:"page"
	};	
	grid = new SigmaGrid("gridbox",context,columns);
	grid.bindData(data);
}

效果参见附件2

从例子中可以看出来，你可以用一个ajax请求获得报表的基本数据，然后用户可以选择各种不同分组聚合模式在客户端生成报表。从而减少网络流量，提供更好的用户体验。

• 
• 大小: 1.4 MB

• 
• 大小: 1.5 MB

• 查看图片附件