Sigma Grid 列隐藏及分组，提示框，sigma菜单 - 脚本百事通Sigma Grid 列隐藏及分组，提示框，sigma菜单
列隐藏问题：
在定义colsOption时设置hidden属性为true即可，代码如下：
varcolsOption=[
{id:'formulaMemo',header:"公式",width:300,sortable:false,grouped:true,toolTip:true,toolTipWidth:300,
//editor:{type:'textarea',width:'300px',height:'200px'}//编辑框renderer:parent.rendererToLink},
{id:'orgFullName',header:"单位",width:200,sortable:false
},{id:'description',header:"说明",width:600,sortable:false,toolTip:true,toolTipWidth:300,renderer:parent.rendererToLink
},{id:'orgName',header:'单位简称',width:'200',hidden:true
},{id:'formulaId',header:'公式ID',width:'50',hidden:true
分组问题：
在定义colsOption时设置grouped属性为true即可，代码同上，效果如分组图所示：公式列进行了分组，公式名称一样的合并了单元格
4.提示框问题：
在定义colsOption时设置toolTip属性为true即可，toolTipWidth属性定义提示框的宽度，代码同上，在定义gridOption 时需要设置事件来
显示隐藏提示框，代码如下：
vargridOption={
id:grid_demo_id,
width:"100%",//"100%",//700,
height:"100%",//"100%",//330,
container:'gridbox',
editable:true,
clickStartEdit:true,
exportURL:'../../../../common/grid/export/exportExcel.html',
replaceContainer:true,
customHead:'formulastats',
dataset:dsOption,
columns:colsOption,
allowHide :true,
toolbarContent:'print|filter|state',
showGridMenu:true,//显示sigma菜单
pageSize:1000000,
onMouseOver:function(value,record,cell,row,colNo,rowNo,columnObj,grid){//显示提示信息框事件
if(columnObj&&columnObj.toolTip){
grid.showCellToolTip(cell,columnObj.toolTipWidth);
grid.hideCellToolTip();
onMouseOut:function(value,record,cell,row,colNo,rowNo,columnObj,grid){//隐藏提示信息框事件
grid.hideCellToolTip();
效果如提示框图所示：
5.显示sigma菜单 （
选择显示隐藏列）在定义gridOption 时设置showGridMenu 属性为true，代码同上，效果如sigma菜单图所示：
更多文章：SigmaGrid java端的实现 - Java,JavaScript,Oracle,sigmagrid - web - ITeye论坛
SigmaGrid java端的实现
锁定老帖子
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
AngleWings
等级: 初级会员
来自: 天津
发表时间：&&
最后修改：
相关知识库：
前些天看到了有人在用SigmaGrid做项目，抱着好奇的态度学习了一下，觉得不错，功能很强，
（也有人把这东西叫gt_grid的，反正我也搞不清）
页面代码：（因为涉及到对话框，这里引入artDialog处理
var grid_demo_id = "myGrid" ;
$(function(){
var dsOption= {
/**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",
width : 500,
height : 300,
button : [ {
name : "保存",
callback : function() {
var option = {
url:"addData.action",
type:"post",
dataType:"json",
success: function(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();
}, false);
$("#del").click(function(){
var selected = Sigma.$grid(grid_demo_id).getSelectedRecords();
var isCheck = "";
$(selected).each(function(){
isCheck+="'"+this.wpbh+"',";
if(isCheck==""){
showInfo("请选择要删除的记录！");
showConfirm("是否要删除该信息？",function(){
isCheck = "("+isCheck.substring(0,isCheck.length-1)+")";
"url":"deleteGridRow.action",
"type":"post",
"dataType":"json",
"data":"isCheck="+isCheck,
"success":function(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"}*/
import javax.servlet.http.HttpServletR
import org.apache.struts2.ServletActionC
import pojo.SigmaGridP
import util.DtpU
import dao.CTL_WYREPORT;
public class SigmaGridAction {
private String
public String list(){
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();
public String get_gt_json() {
return _gt_
public void set_gt_json(String _gt_json) {
this._gt_json = _gt_
解析参数的工具类：
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")+"%");
condition.setValue(filterObj.getString("value"));
conditions.add(condition);
sgp.setConditions(conditions);
sgp.setPageNum(pageNum);
sgp.setPageSize(pageSize);
sgp.setSortOrder(sortOrder);
sgp.setFieldName(fieldName);
sigma有个有点恶心的问题，就是过滤条件不是以运算符的格式传过来的，而是如equal，notEqual，less等等这样的字符出现的，需要转译。这里没有考虑startWith，endWith的正确性(我对这两个在oracle语法的实现有点陌生)
public class TranslactionLogic {
public static String getLogicMark(String markname) {
if ("equal".equals(markname)) {
return "=";
} else if ("notEqual".equals(markname)) {
return "&&";
} else if ("less".equals(markname)) {
return "&";
} else if ("great".equals(markname)) {
return "&";
} else if ("lessEqual".equals(markname)) {
return "&=";
} else if ("greatEqual".equals(markname)) {
return "&=";
} else if ("startWith".equals(markname)) {
return "start with";
} else if ("endWith".equals(markname)) {
return "end with";
} else if ("like".equals(markname)) {
return "like";
dao层：(为省事直接把参数拼在sql里面，正式项目不要这么写)
public SigmaGridResultBean getSigmaGridItemList(int pageSize, int pageNum, String fieldName, String sortOrder, List&FilterCondition& conditions) throws Exception{
Connection conn =
PreparedStatement prep =
ResultSet rs =
SigmaGridResultBean bean = new SigmaGridResultBean();
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*pageS
String pageSQL ="select * from ( select rownum rn ,a.* from ("+sql+") a where rownum &="+end+" ) where rn&="+
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();
if(rs!=null){
rs.close();
if(prep!=null){
prep.close();
closeConnection();
附件是同一张表分别用flexigrid、datagrid和SigmaGrid实现后的结果，对比一下可以看到
sigmaGrid支持灵活多条件的过滤，分页，排序，列锁定，列隐藏，列分组，数据的批量操作，打印，图标，换肤等等一些常用功能
dataGrid能分页，排序，支持数据的批量操作，但无过滤，需要自己写，其他功能无
flexiGrid同样能分页，排序，有过滤，过滤条件可以精确到过滤的列，列可以隐藏，列可以拖拽换位
跳转论坛:移动开发技术
Web前端技术
Java企业应用
编程语言技术