SigmaGrid控件使用 demo
Posted 绝世好阿狸
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了SigmaGrid控件使用 demo相关的知识,希望对你有一定的参考价值。
SigmaGrid是一款表格控件,但是第一次接触它的人可能觉得很难使用,确实如此,原因在于,我们之前使用的表格控件其实只是一种样式罢了,并非是一款真正意义上的控件,比如bootstrap,它仅仅是对table tr td这些标签添加了一些样式,然后前台用c:foreach之类的循环标签输出这些tr td。分页之类的前台逻辑我们必须自己手动完成,比如“下一页”标签,bootstrap提供给我们的可能是一个修饰过的a标签,我们需要修改a的href属性,让它带上下一页的页数,传给后台,这些前台的逻辑都得自己来写。
然而sigma grid却不仅仅是样式的集合,它封装了一定的jquery功能,简化了我们的开发过程,确确实实可以当作一个框架或者控件来用。比如之前举得下一页的例子,在sigma grid中我们不用关心这些逻辑,它都已经封装好了,它会发送一些查询参数和分页信息给后台的action或者controller,然后自动解析显示返回的数据。不过难就难在这里,既然是别人封装的,那么我们要用就得知道别人是怎么封装的,大致就是两方面的内容:(1)前台jquery的配置;(2)后台接受和返回数据的格式,解决了这两个问题,那么我们使用sigma grid就会得心应手了。
(1)前台方面:
首先我们要在jsp页面上添加代表sigma grid的表格标签,代码如下:
<div class="div1">
<div id="mygrid_container" ></div>
</div>
很简单就是一个div而已,这里如果想要控制表格的位置,需要修改div1的位置,这就是把grid 的div放在一个div1里面的原因。因为貌似直接修改
"mygrid_container"div的位置是没用的。这是位置。如果要改大小,那么得修改js配置,后面说。
index.jsp:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<jsp:include page="sigmaHeader.jsp" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
.div1{
width : 60%;
height : 60%;
position:absolute;
left:100px;
top:100px;
}
</style>
</head>
<body>
<div class="div1">
<div id="mygrid_container" ></div>
</div>
</body>
</html>
<script type="text/javascript" src="lib/sigma/grid/gt_grid_all.js"></script>
<script src="lib/sigma/res/highlight/jssc3.js" type="text/javascript"></script>
<link href="lib/sigma/res/highlight/style.css" rel="stylesheet" type="text/css" />
<style type="text/css" media="all">@import "lib/sigma/res/css/doc_no_left.css";</style>
<link rel="stylesheet" type="text/css" media="all" href="lib/sigma/grid/calendar/calendar-blue.css" />
<script type="text/javascript" src="lib/sigma/grid/calendar/calendar.js"></script>
<script type="text/javascript" src="lib/sigma/grid/calendar/calendar-en.js"></script>
<script type="text/javascript" src="lib/sigma/grid/calendar/calendar-setup.js"></script>
<link rel="stylesheet" type="text/css" href="lib/sigma/grid/gt_grid.css" />
<link rel="stylesheet" type="text/css" href="lib/sigma/grid/skin/vista/skinstyle.css" />
<link rel="stylesheet" type="text/css" href="lib/sigma/grid/skin/pink/skinstyle.css" />
<link rel="stylesheet" type="text/css" href="lib/sigma/grid/skin/mac/skinstyle.css" />
<link rel="stylesheet" type="text/css" href="lib/sigma/res/css/tableSigma.css" />
<script type="text/javascript" src="lib/sigma/grid/gt_msg_en.js"></script>
<script type="text/javascript" src="lib/sigma/src/gt_base.js"></script>
<script type="text/javascript" src="lib/sigma/src/gt_ajax.js"></script>
<script type="text/javascript" src="lib/sigma/src/gt_const.js"></script>
<script type="text/javascript" src="lib/sigma/src/gt_column.js"></script>
<script type="text/javascript" src="lib/sigma/src/gt_grid.js"></script>
<script type="text/javascript" src="lib/sigma/src/gt_tool.js"></script>
<script type="text/javascript" src="lib/sigma/src/gt_editor.js"></script>
<script type="text/javascript" src="lib/sigma/src/gt_dataset.js"></script>
<script type="text/javascript" src="lib/sigma/src/gt_dialog.js"></script>
<script type="text/javascript" src="lib/sigma/src/gt_template.js"></script>
<script type="text/javascript" src="lib/sigma/src/gt_validator.js"></script>
<script type="text/javascript" src="lib/sigma/grid/flashchart/fusioncharts/FusionCharts.js"></script>
<style type="text/css">
.mybutton-cls { /
background : url(lib/sigma/res/images/mybutton.png) no-repeat center center;
}
</style>
<script type="text/javascript" >
function doResize(width, height, mygridObj) {
mygridObj.gridDiv.style.width = width + "px";
mygridObj.gridDiv.style.height = height + "px";
mygridObj.onResize();
};
</script>
里面的文件在官网上下载,然后放在合适的位置,这个位置根据自己的项目目录来定。
最后就是grid的配置了,如下:
index.js:
var queryURL = "ajax.htm";
var grid_id = "myGrid";
var mygrid;
$(function() {
// 设置表格
setSigmaGrid();
});
function setSigmaGrid() {
var dsOption = {
fields : [ {
name : 'k1'
}, {
name : "k2"
}, {
name : "k3"
}, {
name : "k4"
}]
};
var colsOption = [];
colsOption.push({
id : 'k1',
header : "id",
width : $(window).width() * 0.05
},{
id : 'k2',
header : "username",
width : $(window).width() * 0.05
},{
id : 'k3',
header : "password",
width : $(window).width() * 0.05
},{
id : 'k4',
header : "info",
width : $(window).width() * 0.05
});
gridOption = {
stripeRows : true,
lightOverRow : true,
id : grid_id,
width : '60%',
height : '60%',
loadURL : queryURL,
remotePaging : true,
replaceContainer : true,
clickStartEdit : false,
selectRowByCheck : true,
container : 'mygrid_container',
resizable : false,
toolbarContent : 'nav | pagesize | state',
dataset : dsOption,
columns : colsOption,
pageSize : 5,
pageSizeList : [4,5,6,9],
recountAfterSave : true,
showIndexColumn : false,
skin : "mac",
parameters : {"k1":"1"}
};
mygrid = new Sigma.Grid(gridOption);
mygrid.render();
};
我并没有关心这里面每一条配置的含义,具体见官方,但这个配置足够我们作为例子来使用,我只研究了一些自己认为主要的。
逐一说明下:
*var queryURL = "ajax.htm":定义了后台查询表格某一页数据的异步请求函数。表格会自动从这个地址加载某一页数据。
*<span style="font-family: Arial, Helvetica, sans-serif;">var grid_id = "myGrid";</span><pre name="code" class="html"> var mygrid; 这两条就按照这样写,第二条很显然是grid在js里的对象引用,第一条不知道什么意思,它不是与前台对应的div的id,div的id是通过container指定的。
具体配置在setSigmaGrid函数中。
*dsOption:定义了表格的键,键是用来为显示提供灵活性。每一个键对应表格中的一列。
*colsOption:定义了表头,id是之前定义的键,header是表头的名称,这就体现了之前所说的灵活性,表格的表头名可以随便改,但是表格的结构不用变。如果不使用键而是直接用表头名来指定一列,一旦表头名改变,后台的数据格式也要变,丧失了灵活性,这其实也是一种解耦,显示和实现的解耦。其余的配置见官网。
*gridOption:定义了表格的配置信息。 width:宽度,container指定页面中的哪一个div, toolbarContent指定表格的工具栏,或的形式, pageSize,会传给后台,分页信息。 pageSizeList ,toolbarContent中的pagesize项,parameters很重要,是传给后台的除了与分页有关的参数,比如这是一个user表,我前台可能有一些查询条件,比如按照user类型查,那么就必须把这个类型设置给parameters,控件会自动传给后台的。
主要就这么多配置。
再说一下表格向后台传输参数格式的问题。
参数主要涉及分页,表格的结构(也就是key)和参数三方面的内容。如果按照上面的方式配置,那么传给后台的数据格式如下:
{"recordType":"object","pageInfo":{"pageSize":5,"pageNum":1,"totalRowNum":-1,"totalPageNum":0,"startRowNum":1,"endRowNum":-1},"columnInfo":[{"id":"k1","header":"id","fieldName":"k1","fieldIndex":"k1","sortOrder":null,"hidden":false,"exportable":true,"printable":true},{"id":"k2","header":"username","fieldName":"k2","fieldIndex":"k2","sortOrder":null,"hidden":false,"exportable":true,"printable":true},{"id":"k3","header":"password","fieldName":"k3","fieldIndex":"k3","sortOrder":null,"hidden":false,"exportable":true,"printable":true},{"id":"k4","header":"info","fieldName":"k4","fieldIndex":"k4","sortOrder":null,"hidden":false,"exportable":true,"printable":true}],"sortInfo":[],"filterInfo":[],"remotePaging":true,"parameters":{"k1":"1"},"action":"load"}
我们后台关心的基本就是pageInfo和parameters这两个,后台解析看用什么语言的,java的话就用JSONObject类。
哦,对了,上面的这些参数怎么获得呢?grid把他们封装在"_gt_json"这个参数内,要获得就:
String rawParam = request.getParameter("_gt_json");
然后解析就可以了。
(2)后台方面:
怎么传回数据呢?
分页查询的结构很显然是一个list,比如user的list,然后我们必须对list进行处理,前台并不知道怎么显示这个list,他知道每一列有一个key,因此,我们只要在list中提供key,它就知道怎么显示了。比如我k1定义的是userId列,那么list的每一项就得有k1:userId这样的形式。这个更像一个map的list。每一项都是k到具体值的映射。在java中,异步请求要返回一个string才行,通常用json结构,那么我们这里通常会用到JSONObject,先创建一个JSONArray,里面存的是JSONObject,然后遍历分页的list,再把每一项转成k和值,put到JSONObject。类似:
private List<JSONObject> makeList(List<User> uList){
List<JSONObject> objects = new ArrayList<>();
for(User user : uList){
JSONObject object = new JSONObject();
object.put("k1", user.getId());
object.put("k2", user.getUsername());
object.put("k3", user.getPassword());
object.put("k4", user.getInfo());
objects.add(object);
}
return objects;
}
那么分页信息呢?
先构建一个分页类:
package com.bean;
public class PageInfo {
private int pageSize;
private int totalRowNum;
private int PageNum;
public int getPageSize() {
return pageSize;
}
public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}
public int getTotalRowNum() {
return totalRowNum;
}
public void setTotalRowNum(int totalRowNum) {
this.totalRowNum = totalRowNum;
}
public int getPageNum() {
return PageNum;
}
public void setPageNum(int pageNum) {
PageNum = pageNum;
}
}
名字很重要,不能变,否则前台控件无法识别。
之前会根据前台的参数构造一个pageInfo查数据,这时这要pageSize和pageNum即可,即页面大小和页编号,然后返回的时候我们需要设置一下totalRowNum,即总的数据量,前台的grid控件会根据这三个信息来显示分页的信息。
最终的结果还是一个JSONObject,包括data和pageInfo两个属性,把之前说的两方面put进去就可以了。
@RequestMapping(value = "ajax.htm")
public @ResponseBody Object ajax(HttpServletRequest request){
String rawParam = request.getParameter("_gt_json");
JSONObject object = JSONObject.fromObject(rawParam);
String params = object.get("parameters").toString();
System.out.println(params);
String pageInfoStr = object.getString("pageInfo");
JSONObject pageObject = JSONObject.fromObject(pageInfoStr);
PageInfo pageInfo = new PageInfo();
int pageNum = pageObject.getInt("pageNum");
pageInfo.setPageNum(pageNum);
pageInfo.setPageSize(pageObject.getInt("pageSize"));
pageInfo.setTotalRowNum(1);
List<User> uList = daoImp.findByPage(pageInfo);
pageInfo.setTotalRowNum(daoImp.countAll());
JSONObject result = new JSONObject();
result.put("data", makeList(uList));
result.put("pageInfo", pageInfo);
return result.toString();
}
第二页:
数据库中的数据:
至此,基本的使用介绍就结束了。下面是源码,使用了spring框架和sqlserver数据库:
http://pan.baidu.com/s/1hrR9Xi8
******************************************************************************************************************************************************************
今天做项目时,用sigma grid分页返回数据。传参的方式不是在grid的配置中写的(不是这样的方式“parameters :[]”),而是使用了addParameters()方法,然后在grid中配置一个beforeLoad函数,进行参数获取,检查,最后调用addParameters()方法,把参数传给grid。
最后发现,add参数的时候,grid中上次留下的参数还在,也就是说,每一次的add都是在上次已有的参数的基础上添加。这样显然和我们的要求不符,理想的情况应该是,每次add的参数要覆盖之前的参数。
于是在api中发现了cleanParameters()方法,想到了在addParameters()方法的最开始调用一下clean方法不久好了吗。结果是可以清除之前的参数了,但是服务器每次接收到的参数却是上一次请求的参数,还是不对。也就是说clean方法的调用位置有问题。
再次查看api,又发现了loadResponseHandler这个配置,就是每一次请求完之后的回调函数,在grid中配置一下就行,然后自己写一个回调函数,把之前的clean函数的调用放在这个回调函数中,最后可以正确得传参了。
以上是关于SigmaGrid控件使用 demo的主要内容,如果未能解决你的问题,请参考以下文章
免费资源 | ActiveReports 报表控件发布多平台 Demo 代码集合
12mmaction2 行为识别商用级别X3D复现 demo实现 检测自己的视频 Expanding Architecturesfor Efficient Video Recognition(代码片段