前些天看到了有人在用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 的同学可以参考...
sigma grid sigma grid sigma grid sigma gridsigma grid sigma grid sigma grid sigma grid
sigma grid api sigma grid api sigma grid api sigma grid api sigma grid api sigma grid api
sigma_grid/gt_grid的最新使用手册/API/文档,其中包括示例/demos,可以参照学习。
Sigma Grid是一个采用纯javascript开发的Ajax数据表格。特性包括: 1.基于CSS控制外观,内置Classic、Vista、Mac、XP四种风格。(可以自己改变风格哦) 2.提供单元格直接编辑功能,可以自定义编辑器,为单元格设置...
sigma grid API,开发web端使用,表格列表控建api
Sigma Grid ajax动态表格(支持分页、列宽拖动、数据排序).
不错的Grid开发控件,sigma_grid2.4。
NULL 博文链接:https://karlhell.iteye.com/blog/454411
通过GridServerHandler类可以直接往前台传送sigma grid需要的数据,只要把此数据放到一个List中,赋给GridServerHandler的data,就可以将数据传给sigma grid。此外此jar包还封装了导出excel,同样将数据放到List中,...
关于sigma grid/gt_grid的最新版使用手册/api文档 英文版 很实用
Sigma Grid实现ajax动态表格(支持分页、列宽拖动、数据排序).zip
maven构建的,jar包自己找 博文链接:https://matychen.iteye.com/blog/1150279
sigma_grid/gt_grid的最新使用手册/API/文档,其中包括示例/demos,可以参照学习。
内容索引:脚本资源,Ajax/JavaScript,表格,表格排序,分页 Sigma Grid 核心基于javascriptajax,显示样式全部有CSS控制,可自定义多种显示风格,官方提供UI编辑器,支持鼠标拖动列宽、数据行排序,动态分页等功能,可...
Sigma Grid,jquery插件使用及说明文档
基于PWM和Sigma_Delta调制的数字音频功率放大器的实现
sigma_grid_with_csharp 是asp.net开发的demo,展现了丰富的ajax表格样式,用来展现数据
Sigma5_sigma5_sigmaminecraft_sigma作弊端_SAPIWrapper_specialhgq.zip