`
AngleWings
  • 浏览: 1684 次
  • 性别: Icon_minigender_1
  • 来自: 天津
文章分类
社区版块
存档分类
最新评论

SigmaGrid java端的实现

阅读更多
前些天看到了有人在用SigmaGrid做项目,抱着好奇的态度学习了一下,觉得不错,功能很强,
(也有人把这东西叫gt_grid的,反正我也搞不清)
页面代码:
var grid_demo_id = "myGrid" ;
	$(function(){
		var dsOption= {  
			fields :[  
				/**type可以是string(default),int,float,date*/
				{ name : "check" },  
				{ name : "wpbh" }, 
				{ name : "wpmc" },
				{ name : "rkrq" },
				{ name : "dj", type:"float" },
				{ name : "kcsl" ,type:"int" },
				{ name : "lyr" },
				{ name : "operation" }

			],  
			recordType : "object",  //返回值类型,可以是object(需要返回json格式),也可以是array(需要返回数组格式)
		}; 
		var colsOption = [
				{id: "check" , isCheckColumn : true,  width :40, align: "center", headAlign: "center",sortable:false,filterable:false,editable:false},
				{id: "wpbh" , header: "物品编号" , width :120 , align: "center", headAlign: "center",sortable:true,sortOrder:"asc"},       
				{id: "wpmc" , header: "物品名称" , width :120 , align: "center", headAlign: "center",sortable:true },
				{id: "rkrq" , header: "入库日期" , width :120 , align: "center", headAlign: "center",sortable:true },
				{id: "dj" , header: "单价(元)" , width :120 , align: "center", headAlign: "center",sortable:true },
				{id: "kcsl" , header: "库存数量" , width :120 , align: "center", headAlign: "center",sortable:true},
				{id: "lyr" , header: "领用人" , width :120 , align: "center", headAlign: "center",sortable:true},
				{id: "operation" , header: "操作" , width :120, align: "center", headAlign: "center",sortable:false,filterable:false,editable:false,
					renderer: function(value,record,columnObj,grid,colNo,rowNo)	{
	            		return "<a href= 'javascript:;' onclick='modify(\""+record.wpbh+"\")'><img src='images/edit.png'/>修改</a>&nbsp;<a href= 'javascript:;' onclick='deleteRow(\""+record.wpbh+"\")'><img src='images/delete.png'/>删除</a>";
					}
				}
			];
		var gridOption={
				//customHead : "物品信息", 
				id : grid_demo_id,
				width: 900,
				height: 400,
				container : "gridbox", 
				replaceContainer : true, 
				dataset : dsOption ,
				columns : colsOption,
				pageSize : 10 ,
				remoteSort:true,
				remoteFilter:true,
				selectRowByCheck:true,
				recountAfterSave : true ,  
				reloadAfterSave : true,
				showGridMenu : true,
				allowCustomSkin	: true ,
				allowFreeze	: true ,
				allowHide	: true ,
				allowGroup	: true,
				resizable : true,  
				loadURL:"getSigmaGridData.action",
				replaceContainer : true,  
				toolbarPosition : "bottom",//"top",  
				pageSizeList : [10,20,30,50,100],  
				toolbarContent : "nav | goto | pageSize | reload | print | xls | filter | chart | state | info ",
				onComplete:function(grid){
					 
				},
			};
		
		var mygrid=new Sigma.Grid( gridOption );
		Sigma.Util.onLoad( Sigma.Grid.render(mygrid) );
          $("#add").click(function(){
			art.dialog.open("showAddRow.action", {
					title : "添加记录",
					lock : true,
					opacity : 0.1,
					resize : false,
					esc : true,
					id : "addDialog",
					top : 20,
					width : 500,
					height : 300,
					button : [ {
	 					name : "保存",
	 					callback : function() {
	 						var option = {
		 	  					url:"addData.action",
		 	  					type:"post",
		 	  					dataType:"json",
		 	  					success: function(flag) {
		 	  						if(flag){
		 	  							showInfo("保存成功!");
		 	  						}
		 	  						Sigma.$grid(grid_demo_id).reload();
		 	  					},
		 	  					"error":function(flag){
		 	  					 	showError("删除成功!");
		 	  					 	Sigma.$grid(grid_demo_id).reload();
		 	  					}
	 	  					}; 
	 						var form =$(this.iframe).contents().find("form");
	 						$(form).ajaxSubmit(option);
	 						this.close();
	 					},
	 					focus : true
	 				}, {
	 					name : "关闭",
	 					callback : function() {
	 						this.close();
	 						return false;
	 					}
	 				} ]
				}, false);
		});
		$("#del").click(function(){
			var selected = Sigma.$grid(grid_demo_id).getSelectedRecords();
			var isCheck = "";	
			$(selected).each(function(){
				isCheck+="'"+this.wpbh+"',";
			});
			if(isCheck==""){
				showInfo("请选择要删除的记录!");
			}else{
				showConfirm("是否要删除该信息?",function(){
					isCheck = "("+isCheck.substring(0,isCheck.length-1)+")";
					$.ajax({
							"url":"deleteGridRow.action",
							"type":"post",
							"dataType":"json",
							"data":"isCheck="+isCheck,
							"success":function(data){
								if(data){
									showInfo("删除成功!");
								}
								Sigma.$grid(grid_demo_id).reload();
							},
							"error":function(data){
								showError("删除失败!");
								Sigma.$grid(grid_demo_id).reload();
							}
							 
					});
				});
					
			} 
		});
	});


后台处理代码:使用struts2+oracle实现
package action;


import javax.servlet.http.HttpServletResponse;


import org.apache.struts2.ServletActionContext;

import pojo.SigmaGridParameter;

import util.DtpUtils;

import dao.CTL_WYREPORT;

public class SigmaGridAction {
	private String  _gt_json;
	
	public String list(){
		try {
			SigmaGridParameter sgp = DtpUtils.getSigmaGridParameter(_gt_json);
			CTL_WYREPORT ctl = new CTL_WYREPORT();
			String jsonStr = DtpUtils.toJSONForSigmaGrid(ctl.getSigmaGridItemList(sgp.getPageSize(),sgp.getPageNum(),sgp.getFieldName(),sgp.getSortOrder(),sgp.getConditions()));
			HttpServletResponse response = ServletActionContext.getResponse();
			response.setCharacterEncoding("UTF-8");
			response.getWriter().print(jsonStr);
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}

	public String get_gt_json() {
		return _gt_json;
	}

	public void set_gt_json(String _gt_json) {
		this._gt_json = _gt_json;
	}
	
}

解析参数的工具类:
json-lib解析是有点繁琐,不过由外到内一点儿一点儿慢慢也能出来
public class DtpUtils {
	public static SigmaGridParameter getSigmaGridParameter(String _gt_json){
		SigmaGridParameter sgp = new SigmaGridParameter();
		//SigmaGrid表格的配置参数字符串
		/**{"recordType":"object","pageInfo":{"pageSize":10,"pageNum":1,"totalRowNum":-1,"totalPageNum":0,"startRowNum":1,"endRowNum":-1},"sortInfo":[{"columnId":"wpbh","fieldName":"wpbh","sortOrder":"asc","getSortValue":null,"sortFn":null}],"filterInfo":[{"columnId":"rkrq","fieldName":"rkrq","logic":"like","value":"00001"}],"remotePaging":true,"parameters":{},"action":"load"}*/
		/**解析二重json字符串,获取前台传过来的参数*/
		JSONObject jsonObj = JSONObject.fromObject(_gt_json);
		String pageInfo = jsonObj.getString("pageInfo");
		String sortInfo = jsonObj.getString("sortInfo");
		String filterInfo =jsonObj.getString("filterInfo");
		//分页对象
		JSONObject pageJsonObj = JSONObject.fromObject(pageInfo);
		int pageSize = Integer.parseInt(pageJsonObj.getString("pageSize"));
		int pageNum = Integer.parseInt(pageJsonObj.getString("pageNum"));
		//排序对象
		JSONArray sortArray = JSONArray.fromObject(sortInfo);
		JSONObject sortJsonObj = (JSONObject) sortArray.get(0);
		String fieldName = sortJsonObj.getString("fieldName");
		String sortOrder = sortJsonObj.getString("sortOrder");
		//查询对象
		List <FilterCondition> conditions = new ArrayList<FilterCondition>();
		JSONArray filterArray = JSONArray.fromObject(filterInfo);
		for(int i = 0; i<filterArray.size();i++){
			JSONObject filterObj = (JSONObject) filterArray.get(i);
			FilterCondition condition = new FilterCondition();
			condition.setFieldName(filterObj.getString("fieldName"));
			//转译运算符
			condition.setLogic(TranslactionLogic.getLogicMark(filterObj.getString("logic")));
			if("like".equals(filterObj.getString("logic"))){
				condition.setValue("%"+filterObj.getString("value")+"%");
			}else{
				condition.setValue(filterObj.getString("value"));
			}
			conditions.add(condition);
		}
		sgp.setConditions(conditions);
		sgp.setPageNum(pageNum);
		sgp.setPageSize(pageSize);
		sgp.setSortOrder(sortOrder);
		sgp.setFieldName(fieldName);
		
		return sgp;
	}
}

dao层:(为省事直接把参数拼在sql里面,正式项目不要这么写)
public SigmaGridResultBean getSigmaGridItemList(int pageSize, int pageNum, String fieldName, String sortOrder, List<FilterCondition> conditions) throws Exception{
			Connection conn = null;
			PreparedStatement prep = null;
			ResultSet rs = null;
			SigmaGridResultBean bean = new SigmaGridResultBean();
			try {
				String sql="select * from JZ_WPGLB a where 1=1 ";
				//查询
				if(conditions.size()>0){
					for(FilterCondition fc:conditions){
						sql += " and "+fc.getFieldName()+" "+fc.getLogic()+" '"+fc.getValue()+"' ";
					}
				}
				//排序
				sql+=" order by "+fieldName+" "+sortOrder+" ";
				//分页
				int start = (pageNum-1)*pageSize+1;
				int end = pageNum*pageSize;
				String pageSQL ="select * from ( select rownum rn ,a.* from ("+sql+") a where rownum <="+end+" ) where rn>="+start;
				String countSql = "select count(*) from (" + sql + ")";
				conn =getConnection();
				prep = conn.prepareStatement(countSql);
				rs = prep.executeQuery();
				rs.next();
				bean.setTotalRowNum(rs.getInt(1));
				prep = conn.prepareStatement(pageSQL);
				rs= prep.executeQuery();
				List<Item> list = new ArrayList<Item>();
				while(rs.next()){
					Item item = new Item();
					item.setWpbh(rs.getString("wpbh"));
					item.setWpmc(rs.getString("wpmc"));
					item.setKcsl(Integer.toString(rs.getInt("kcsl")));
					item.setLyr(rs.getString("lyr"));
					item.setRkrq(rs.getString("rkrq"));
					item.setDj(rs.getBigDecimal("dj").toString());
					list.add(item);
				}
				bean.setList(list);
			} catch (Exception e) {
				e.printStackTrace();
			}finally{
				if(rs!=null){
					rs.close();
				}
				if(prep!=null){
					prep.close();
				}
				closeConnection();
			}
			
			return bean;
		}

附件是同一张表分别用flexigrid、datagrid和SigmaGrid实现后的结果,对比一下可以看到
sigmaGrid支持灵活多条件的过滤,分页,排序,列锁定,列隐藏,列分组,数据的批量操作,打印,图标,换肤等等一些常用功能
dataGrid能分页,排序,支持数据的批量操作,但无过滤,需要自己写,其他功能无
flexiGrid同样能分页,排序,有过滤,过滤条件可以精确到过滤的列,列可以隐藏,列可以拖拽换位
  • 大小: 143.1 KB
  • 大小: 133.8 KB
  • 大小: 136 KB
分享到:
评论
1 楼 dahaizwl 2015-06-24  
问下,如何查询到数据传到前台,前台如何接收数据显示到表格中啊?

相关推荐

    Sigma grid 2.4.13 release

    Sigma grid 最终版本。。。 由纯javascript写成,是一个开源的AJAX数据网格,能滚动和排序显示和内嵌数据编辑功能,是非常强大且易于使用的表格,支持php,asp.net,jsp和RoR等。 不会使用 gt-grid 的同学可以参考...

    sigmagrid文件夹.zip

    "sigmagrid文件夹.zip" 是一个包含有关sigma_grid/gt_grid相关资源的压缩包,主要目的是提供最新的使用手册、API文档以及示例代码,帮助用户理解和应用这个库。sigmaGrid是一个专门用于处理网格数据的工具,可能在...

    Sigma Grid 研究及使用

    `src`目录通常存放项目的源代码,这里包含的应该是Sigma Grid的Java或其他编程语言的实现。通过深入研究这部分代码,我们可以了解到 Sigma Grid 的设计模式、算法以及实现功能的细节。 `WebRoot`目录一般出现在Web...

    Sigma-Grid.zip_grid_grid jquery_html jquery_jquery grid

    - **初始化Grid**:通过jQuery选择器选取容器元素,并调用 sigmaGrid方法进行初始化。 - **配置选项**:设置分页、排序、过滤等相关参数。 - **绑定数据**:将数据源绑定到Grid,实现数据展示。 4. **文档内容**...

    sigma grid

    6. **数据绑定**:可以与服务器端的数据源进行双向绑定,当数据发生变化时,网格会自动更新,反之亦然,实现数据的实时同步。 7. **事件处理**:提供了一系列的事件监听器,如点击、选择、排序、过滤等,允许开发者...

    Sigma Grid ajax动态表格(支持分页、列宽拖动、数据排序).

    在这个特定的实现中, Sigma Grid强调了ajax动态加载,这意味着表格数据不是一次性全部加载,而是根据用户操作,如翻页或筛选,通过异步请求从服务器获取数据,降低了初次加载时的页面负担,提升了用户体验。...

    sigma grid api

    sigma grid api sigma grid api sigma grid api sigma grid api sigma grid api sigma grid api

    Sigma_Grid api 使用手册

    **Sigma Grid API 使用手册** Sigma Grid 是一款强大的数据网格组件,尤其适用于开发具有复杂数据处理需求的业务应用程序。它的API提供了丰富的功能,让开发者能够高效地管理、展示和操作大量数据。本手册将深入...

    Sigma Grid

    Sigma Grid是一个采用纯javascript开发的Ajax数据表格。特性包括: 1.基于CSS控制外观,内置Classic、Vista、Mac、XP四种风格。(可以自己改变风格哦) 2.提供单元格直接编辑功能,可以自定义编辑器,为单元格设置...

    sigma grid API

    **sigma grid API** 是一种专为Web开发设计的表格列表控件API,它提供了一整套功能强大且灵活的方法和属性,帮助开发者在网页应用中创建、管理和展示数据表格。这个API通常用于处理大量结构化数据,使得数据的展示、...

    sigma_grid api使用手册 教程示例

    通过gt_grid,用户可以轻松地调整单元格样式、添加行和列级别的摘要、实现交互式表格,以及导出各种格式的报表。 在"docs"文件夹中,包含了详尽的sigma_grid和gt_grid API文档,这些文档通常包含以下部分: 1. **...

    flexigrid、sigmagrid、datatables使用

    总结来说,这个主题涵盖了使用flexigrid、sigmagrid和datatables这三种JavaScript库来处理Web应用程序中的数据表格,同时涉及到了与Java项目相关的构建工具Maven和IDE配置。对于开发者来说,了解并熟练运用这些工具...

    Sigma Grid实现ajax动态表格(支持分页、列宽拖动、数据排序).zip

    这个压缩包包含的资源是关于如何使用Sigma Grid实现一个通过Ajax动态加载数据、支持分页、列宽可拖动以及数据排序的功能。以下是这些知识点的详细说明: 1. Ajax动态加载: Ajax(Asynchronous JavaScript and XML...

    sigma_grid2.4

    6. **事件处理**:sigma_grid2.4可能包含丰富的事件接口,如单元格点击、行选择、数据更改等,开发者可以通过监听这些事件来实现业务逻辑。 7. **扩展性与兼容性**:作为一款成熟的开发控件,sigma_grid2.4应具备...

    sigma grid一个使用的jar包

    通过GridServerHandler类可以直接往前台传送sigma grid需要的数据,只要把此数据放到一个List中,赋给GridServerHandler的data,就可以将数据传给sigma grid。此外此jar包还封装了导出excel,同样将数据放到List中,...

    Sigma Grid ajax动态表格(支持分页、列宽拖动、数据排序)

    内容索引:脚本资源,Ajax/JavaScript,表格,表格排序,分页 Sigma Grid 核心基于javascriptajax,显示样式全部有CSS控制,可自定义多种显示风格,官方提供UI编辑器,支持鼠标拖动列宽、数据行排序,动态分页等功能,可...

    JAVA 图像高斯滤波处理

    在Java中,我们可以利用编程库,如Java AWT或Java OpenCV,来实现高斯滤波。本文将深入探讨高斯滤波的概念,Java中的实现方式,以及如何在实际应用中使用。 高斯滤波是基于数学的高斯函数(也称为正态分布)的一种...

    Sigma5_sigma5_sigmaminecraft_sigma作弊端_SAPIWrapper_specialhgq.zip

    Sigma作弊端可能是一个自定义的游戏客户端或服务器端修改,它通过修改游戏规则或提供额外功能来实现作弊。这些功能可能包括无限生命、无限物品、飞行能力、透视等。源码的分析和学习可以帮助我们理解游戏客户端或...

    sigma_grid_with_csharp

    "sigma_grid_with_csharp"是一个基于ASP.NET技术的开发示例,主要展示了如何利用C#语言来实现一个功能丰富的AJAX网格控件。这个控件主要用于数据展示,它结合了现代Web开发中的异步更新技术和高效的数据绑定能力,...

Global site tag (gtag.js) - Google Analytics