【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配置，后面说。

当然，还要导入相关的js库才行，我把所有的库封装在一个jsp文件中，下面贴出这个jsp以及之前含有表格的index.jsp完整内容：

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>

sigmaHeader.jsp:

<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();}

例子中每一页大小为5，第一页：

第二页：

数据库中的数据：

至此，基本的使用介绍就结束了。下面是源码，使用了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相关推荐

Andoird实现类似iphone AssistiveTouch的控件的demo
类似Iphone Assistive Touch的控件的实现网上也有些这方面的控件,不过貌似不怎么好用,或者是论坛需要积分下载,恰好自己在项目中有用到这种控件,就打算自己写一个,也成功实现了这种功能 ...
Flutter控件--Switch 和 SwitchListTile
flutter控件练习demo地址:github Switch(开关).SwitchListTile(带标题的开关) 和 AnimatedSwitch 一 Switch 1.1 简介 Switch & ...
【开源】QuickPager ASP.NET2.0分页控件V2.0.0.3 【增加了使用说明】
================================ 欢迎转载,但是请注明出处.本文出自博客园 .谢谢合作! ================================ 最新版本:V ...
稳扎稳打Silverlight(33) - 3.0控件之AutoCompleteBox, DataPager
[索引页] [源码下载] 稳扎稳打Silverlight(33) - 3.0控件之AutoCompleteBox, DataPager 作者:webabcd 介绍 Silverlight 3.0 控件 ...
Android自定义组合控件－－EditText和Button组合成带有清空EditText内容功能的复合控件
目标:实现EditText和Button组合成带有清空EditText内容功能的复合控件,可以通过代码设置自定义控件的相关属性. 实现效果为: (1)在res/layout目录下编写自定义组合控件的布 ...
h5优秀控件_H5前端学习的js插件大全，基本包含了大部分的前端最前沿的js插件和库。...
布局 SuperEmbed.js - 是一个Javascript库,可检测出网页上的内嵌视频并使他们能够变成响应式元素.demo ScrollReveal - ScrollReveal插件使用户能够无 ...
很棒的WPF控件库 Newbeecoder.UI
Newbeecoder.UI是一个强大的WPF基于MVVM框架和控件库实用程序.它支持窗口边框阴影,窗口圆角,包含许多优雅的控件.它让开发人员更高效.更快地创建漂亮的WPF构建应用程序.它支持从4.0 ...
vue-draggable-resizable定制化可拖动控件
最近遇到一个需求:前端定制化生成合同模板,生成时可以在指定位置拖放指定的控件,可动态编辑指定控件的属性和位置,最后将控件的位置等属性传给后台,后续使用模板签署合同时,乙方可在模板上指定位置签署. 点击 ...
Qt开发Activex笔记（二）：Qt调用Qt开发的Activex控件
若该文为原创文章,转载请注明原文出处本文章博客地址:https://blog.csdn.net/qq21497936/article/details/113789693 长期持续带来更多项目与技术分 ...
WPF控件样式、模板
初次写博客,新手请多指教. 写WPF已有一年有余了,平时在工作项目当中喜欢总结一些公用库,通用样式之类的,以便于日后工作中遇到,可以直接复用,提供工作效率. 本文提供 Windows.Button.S ...

【SigmaGrid控件】使用 demo

【SigmaGrid控件】使用 demo相关推荐

最新文章

热门文章