浏览 4781 次
|
锁定老帖子 主题：SigmaGrid java端的实现
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2014-05-08
最后修改：2014-05-08
前些天看到了有人在用SigmaGrid做项目，抱着好奇的态度学习了一下，觉得不错，功能很强，
（也有人把这东西叫gt_grid的，反正我也搞不清） 页面代码：（因为涉及到对话框，这里引入artDialog处理
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> <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实现 要说明的是sigmaGrid把前台的参数封装在_gt_json里面, action获取后需要解析这个参数： 参数很长，大致是这个格式 /**{"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"}*/
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;
}
}
sigma有个有点恶心的问题，就是过滤条件不是以运算符的格式传过来的，而是如equal，notEqual，less等等这样的字符出现的，需要转译。这里没有考虑startWith，endWith的正确性(我对这两个在oracle语法的实现有点陌生)
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同样能分页，排序，有过滤，过滤条件可以精确到过滤的列，列可以隐藏，列可以拖拽换位 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
