论坛首页 Web前端技术论坛

用SigmaGrid制作报表

浏览 10109 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2007-04-23  
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
   发表时间:2007-04-25  
看起来挺不错的。
它能够到入到excel或pdf中吗?
0 请登录后投票
   发表时间:2007-04-25  
完全是客户端js代码,恐怕没有可能导入到pdf,不过导入excel还是可以的
0 请登录后投票
   发表时间: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 这样 有明白的吗?
0 请登录后投票
   发表时间:2007-05-21  
你这问题和本贴主题可谓十万八千里哦

不过,我可以大致上解释下你的问题.
在你所提到的控件中,TreeLoader能够用xmlhttprequest访问dataurl制订的url,获取其中的数据,并用这些数据填充Tree控件
0 请登录后投票
   发表时间:2007-05-21  
我是想知道 SigmaGrid 是不是也有这个类似的功能 不要看例子 看问题
0 请登录后投票
   发表时间:2007-05-21  
这个功能我有,当然也是根据xmlhttprequest实现的。但这个不属于控件本身的功能,我在SigmaRequest里面实现了类似功能。
在SigmaGrid里面,你可以这样填充数据:

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

这个的实现,比你的例子稍微复杂一些,但对服务器端要求要少一些,你可以在服务器端传回任意命名的一个数组。而你的例子中,传会的对象的命名可能有要求。假如你要用你提到的这种方式命名的话,你提供一个约定的显示的数组的名称,我也是可以帮你实现的。
0 请登录后投票
   发表时间:2007-05-21  
好的 非常感谢
0 请登录后投票
   发表时间:2007-05-21  
不好意思 在顺便问一句 表格里的数据保存时如何提交到后台 action 里面怎么获取数据 谢谢
0 请登录后投票
   发表时间:2007-05-21  
grid.getValue()可以获得表格中所有行对象的数组
也可以用grid.getValue(["col1","col2",...])获得经过属性裁减的所有行对象的数组。
获得值对象数组后,你可以通过xmlhttprequest把数组post到后台,在后台解析json数组,你可以用dwr或者json rpc来实现js对java bean 的远程调用。
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics