前些天看到了有人在用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> <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
分享到:
相关推荐
Sigma grid 最终版本。。。 由纯javascript写成,是一个开源的AJAX数据网格,能滚动和排序显示和内嵌数据编辑功能,是非常强大且易于使用的表格,支持php,asp.net,jsp和RoR等。 不会使用 gt-grid 的同学可以参考...
"sigmagrid文件夹.zip" 是一个包含有关sigma_grid/gt_grid相关资源的压缩包,主要目的是提供最新的使用手册、API文档以及示例代码,帮助用户理解和应用这个库。sigmaGrid是一个专门用于处理网格数据的工具,可能在...
`src`目录通常存放项目的源代码,这里包含的应该是Sigma Grid的Java或其他编程语言的实现。通过深入研究这部分代码,我们可以了解到 Sigma Grid 的设计模式、算法以及实现功能的细节。 `WebRoot`目录一般出现在Web...
- **初始化Grid**:通过jQuery选择器选取容器元素,并调用 sigmaGrid方法进行初始化。 - **配置选项**:设置分页、排序、过滤等相关参数。 - **绑定数据**:将数据源绑定到Grid,实现数据展示。 4. **文档内容**...
6. **数据绑定**:可以与服务器端的数据源进行双向绑定,当数据发生变化时,网格会自动更新,反之亦然,实现数据的实时同步。 7. **事件处理**:提供了一系列的事件监听器,如点击、选择、排序、过滤等,允许开发者...
在这个特定的实现中, 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是一个采用纯javascript开发的Ajax数据表格。特性包括: 1.基于CSS控制外观,内置Classic、Vista、Mac、XP四种风格。(可以自己改变风格哦) 2.提供单元格直接编辑功能,可以自定义编辑器,为单元格设置...
**sigma grid API** 是一种专为Web开发设计的表格列表控件API,它提供了一整套功能强大且灵活的方法和属性,帮助开发者在网页应用中创建、管理和展示数据表格。这个API通常用于处理大量结构化数据,使得数据的展示、...
通过gt_grid,用户可以轻松地调整单元格样式、添加行和列级别的摘要、实现交互式表格,以及导出各种格式的报表。 在"docs"文件夹中,包含了详尽的sigma_grid和gt_grid API文档,这些文档通常包含以下部分: 1. **...
总结来说,这个主题涵盖了使用flexigrid、sigmagrid和datatables这三种JavaScript库来处理Web应用程序中的数据表格,同时涉及到了与Java项目相关的构建工具Maven和IDE配置。对于开发者来说,了解并熟练运用这些工具...
这个压缩包包含的资源是关于如何使用Sigma Grid实现一个通过Ajax动态加载数据、支持分页、列宽可拖动以及数据排序的功能。以下是这些知识点的详细说明: 1. Ajax动态加载: Ajax(Asynchronous JavaScript and XML...
6. **事件处理**:sigma_grid2.4可能包含丰富的事件接口,如单元格点击、行选择、数据更改等,开发者可以通过监听这些事件来实现业务逻辑。 7. **扩展性与兼容性**:作为一款成熟的开发控件,sigma_grid2.4应具备...
通过GridServerHandler类可以直接往前台传送sigma grid需要的数据,只要把此数据放到一个List中,赋给GridServerHandler的data,就可以将数据传给sigma grid。此外此jar包还封装了导出excel,同样将数据放到List中,...
内容索引:脚本资源,Ajax/JavaScript,表格,表格排序,分页 Sigma Grid 核心基于javascriptajax,显示样式全部有CSS控制,可自定义多种显示风格,官方提供UI编辑器,支持鼠标拖动列宽、数据行排序,动态分页等功能,可...
在Java中,我们可以利用编程库,如Java AWT或Java OpenCV,来实现高斯滤波。本文将深入探讨高斯滤波的概念,Java中的实现方式,以及如何在实际应用中使用。 高斯滤波是基于数学的高斯函数(也称为正态分布)的一种...
Sigma作弊端可能是一个自定义的游戏客户端或服务器端修改,它通过修改游戏规则或提供额外功能来实现作弊。这些功能可能包括无限生命、无限物品、飞行能力、透视等。源码的分析和学习可以帮助我们理解游戏客户端或...
"sigma_grid_with_csharp"是一个基于ASP.NET技术的开发示例,主要展示了如何利用C#语言来实现一个功能丰富的AJAX网格控件。这个控件主要用于数据展示,它结合了现代Web开发中的异步更新技术和高效的数据绑定能力,...