SigmaGrid java端的实现_JAVA_编程开发_程序员俱乐部

前些天看到了有人在用SigmaGrid做项目，抱着好奇的态度学习了一下，觉得不错，功能很强，
（也有人把这东西叫gt_grid的，反正我也搞不清）
页面代码：

class="java">
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

• 查看图片附件