用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请求获得报表的基本数据，然后用户可以选择各种不同分组聚合模式在客户端生成报表。从而减少网络流量，提供更好的用户体验。

评论

10 楼 jxzhit 2008-04-11  

请问怎么样取到具体表格里面的值呢?
提供的grid.getValue().toJSONString()是取到所有的内容,我想只取到数据.

9 楼 hexiaodong 2007-05-21  

grid.getValue()可以获得表格中所有行对象的数组
也可以用grid.getValue(["col1","col2",...])获得经过属性裁减的所有行对象的数组。
获得值对象数组后，你可以通过xmlhttprequest把数组post到后台，在后台解析json数组，你可以用dwr或者json rpc来实现js对java bean 的远程调用。

8 楼 dafuh 2007-05-21  

不好意思 在顺便问一句 表格里的数据保存时如何提交到后台 action 里面怎么获取数据 谢谢

7 楼 dafuh 2007-05-21  

好的 非常感谢

6 楼 hexiaodong 2007-05-21  

这个功能我有，当然也是根据xmlhttprequest实现的。但这个不属于控件本身的功能，我在SigmaRequest里面实现了类似功能。
在SigmaGrid里面，你可以这样填充数据：

request.open("post",url,false);
request.onresult = function(){
  grid.bindData(request.getValue().data);
}
request.send();

这个的实现，比你的例子稍微复杂一些，但对服务器端要求要少一些，你可以在服务器端传回任意命名的一个数组。而你的例子中，传会的对象的命名可能有要求。假如你要用你提到的这种方式命名的话，你提供一个约定的显示的数组的名称，我也是可以帮你实现的。

5 楼 dafuh 2007-05-21  

我是想知道 SigmaGrid 是不是也有这个类似的功能 不要看例子 看问题

4 楼 hexiaodong 2007-05-21  

你这问题和本贴主题可谓十万八千里哦

不过,我可以大致上解释下你的问题.
在你所提到的控件中，TreeLoader能够用xmlhttprequest访问dataurl制订的url，获取其中的数据，并用这些数据填充Tree控件

3 楼 dafuh 2007-05-21  

不错 看了一下 但没看明白怎么从一个给定的url取数 类似
    var tree = new Tree.TreePanel('tree-div', {
        animate:true,
        loader: new Tree.TreeLoader({dataUrl:'get-nodes.php'}),
        enableDD:true,
        containerScroll: true
    });
于 daraUrl 这样 有明白的吗?

2 楼 hexiaodong 2007-04-25  

完全是客户端js代码，恐怕没有可能导入到pdf，不过导入excel还是可以的

1 楼 hgq0011 2007-04-25  

看起来挺不错的。
它能够到入到excel或pdf中吗？