dhtmlxGrid分页与排序
1、服务端处理的Conntllor
package com.snailteam.reporting.web;
import java.util.ArrayList;
import java.util.List;
import javax.annotation.Resource;
import javax.validation.Validator;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import com.snailteam.reporting.domain.DataSource;
import com.snailteam.reporting.domain.json.JsonRow;
import com.snailteam.reporting.domain.json.JsonTable;
import com.snailteam.reporting.service.DataSourceService;
import com.snailteam.reporting.util.PojoMapper;
/**
* @Description:异步请求，dhtmlGrid数据的处理
*
* @Author: xiaofancn
* @Date: 2011-7-20 上午10:51:01
*
*/
@Controller
@RequestMapping("/ajax")
public class Ajax {
private Logger logger = LoggerFactory.getLogger(Ajax.class);
private Validator validator;
@Resource
private transient DataSourceService dataSourceService;
@Autowired
public Ajax(Validator validator) {
this.validator = validator;
}
/**
* 根据页面请求的起始页和数量参数 返回json对象，spring负责将对象序列化成json
*
* @param posStart
* @param count
* @return
*/
@RequestMapping(value = "/ds", method = RequestMethod.GET)
@ResponseBody
// JsonTable是我封装好的对象，页面dhtmlxGrid脚本能够识别的Json格式
public JsonTable loadDataSources(Integer posStart, Integer count,
@RequestParam(required = false) String orderby,
@RequestParam(required = false) String direct) throws Exception {
JsonTable table = new JsonTable();
List<JsonRow> rows = new ArrayList<JsonRow>();
if (direct != null && !direct.equals("asc"))
direct = "DESC";
// DataSource是我们项目中的实体
List<DataSource> lists = dataSourceService.loadDataSources(posStart,
count, orderby, direct);
if (lists == null)
return null;
for (DataSource ds : lists) {
JsonRow row = new JsonRow();
List<String> datas = new ArrayList<String>();
row.setId(ds.getId());
datas.add(ds.getId().toString());
datas.add(ds.getName());
datas.add(ds.getDescription());
datas.add(ds.getJdbcDriver());
datas.add(ds.getJdbcPassword());
datas.add(ds.getJdbcUserName());
datas.add(ds.getJdbcUrl());
rows.add(row);
row.setData(datas);
}
table.setPos(posStart);
table.setRows(rows);
table.setTotal_count(dataSourceService.getCount().intValue());
//测试代码 System.out.println(PojoMapper.toJson(table, true));
return table;
}
}
2、页面端的代码
<html>
<head>
<title>小例子</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=8">
<link rel="stylesheet" href="/base/static/style/blueprint/screen.css" type="text/css" charset="UTF-8" media="screen, projection">
<link rel="stylesheet" href="/base/static/style/blueprint/print.css" type="text/css" charset="UTF-8" media="print">
<link rel="stylesheet" type="text/css" href="/base/static/dhtmlx/3.0/dhtmlx.css" charset="UTF-8">
<link rel="SHORTCUT ICON" href="/base/static/imgs/favicon.ico"><script src="/base/static/dhtmlx/3.0/dhtmlx.js" type="text/javascript" charset="UTF-8"></script>
<script src="/base/static/jquery-1.6.js" type="text/javascript" charset="UTF-8"></script>
<script src="/base/static/jquery.form.js" type="text/javascript" charset="UTF-8"></script>
<script src="/base/static/mvcUtil.js" type="text/javascript" charset="UTF-8"></script>
<script src="/base/static/dhtmlx/3.0/dhtmlxgrid_json.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript" charset="UTF-8">
var webStatic = "/base/static/";
var dhxSkin = "dhx_skyblue";
var webroot = "/base/";
var dhxImagePath = "/base/static/dhtmlx/3.0/imgs/";
</script>
<script src="/base/static/dataSource/initDhtmlDrid.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<table width="500px" id="paging_container">
<tr>
<td id="recinfoArea"><!--页数信息--></td>
</tr>
<tr>
<td>
<div id="gridbox" style="widht:100%; height:150px; background-color:white;overflow:hidden"><!-- --></div>
</td>
</tr>
<tr>
<td id="pagingArea"><!--页数区域 --></td>
</tr>
</table>
</body>
</html>
3、我们的脚本 static/dataSource/initDhtmlDrid.js
var mygrid;
var mygridUrl = webroot + "ajax/ds?un="+ Date.parse(new Date());
$(document).ready(function() {
//初始化Grid表格
doInitGrid();
//注册Grid表格的排序事件
mygrid.attachEvent("onBeforeSorting", sortGridOnServer);
});
function doInitGrid() {
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath(webroot + "static/dhtmlx/3.0/imgs/"); // 指定图片路径
mygrid
.setHeader("id,name,description,jdbcDriver,jdbcUserName,jdbcPassword,jdbcUrl"); // 设置表头显示
mygrid.init();
//设置可排序的字段
mygrid.setColSorting("id,name");
//允许分页
mygrid.enablePaging(true, 18, 5, "pagingArea", true, "recinfoArea");
mygrid.load(webroot + "ajax/ds?posStart=0&count=18&un="
+ Date.parse(new Date()), "json");
mygrid.xmlFileUrl=webroot + "ajax/ds";//分页时，dhtmlxGrid能自动为我们添加参数如posStart和count
}
function sortGridOnServer(ind, gridObj, direct) {
mygrid.clearAll();
mygrid.load(webroot + "ajax/ds?posStart=0&count=18&un="
+ Date.parse(new Date())+ "&orderby="
+ gridObj + "&direct=" +direct ,"json");
mygrid.xmlFileUrl=webroot + "ajax/ds";
mygrid.setSortImgState(true, gridObj, direct);
return true;
}
4、显示效果
参考代码构造的json对象
package com.snailteam.reporting.domain.json;
import java.util.List;
public class JsonRow {
Object id;
Object data;
public Object getId() {
return id;
}
public void setId(Object id) {
this.id = id;
}
public Object getData() {
return data;
}
public void setData(Object data) {
this.data = data;
}
}
public class JsonTable {
List<JsonRow> rows;
int total_count;
int pos;
public int getPos() {
return pos;
}
public void setPos(int pos) {
this.pos = pos;
}
public int getTotal_count() {
return total_count;
}
public void setTotal_count(int total_count) {
this.total_count = total_count;
}
public List<JsonRow> getRows() {
return rows;
}
public void setRows(List<JsonRow> rows) {
this.rows = rows;
}
}
dhtmlxGrid项目参考代码
// 初始化角色信息的dhtmlxGrid
function initRoleGrid() {
roleGrid = new dhtmlXGridObject('roleGrid');
roleGrid.setHeader(" ,角色名,角色类型");
//允许可以选中多行
roleGrid.enableMultiselect(true);
roleGrid.enableMultiline(true);
roleGrid.setImagePath(webroot + "static/dhtmlx/3.0/imgs/");
//第一类设置checkbox显示(数据为1，0)
roleGrid.setColTypes("ch,ro,ro");
roleGrid.init();
roleGrid.load(webroot + "user/roles?&un=" + Date.parse(new Date())
+ "&userId=" + $("#userId").val(), "json");
roleGrid.xmlFileUrl = webroot + "user/roles";
}
//获取所有行id数组对象
function getSelectRowId() {
var idArray = new Array();
//根据索引遍历所有的行
for ( var index = 0; index < roleGrid.getRowsNum(); index++) {
var ch = roleGrid.cellByIndex(index,0);//index行，第一列
if (ch.isChecked()) {//checkbox是否选中
idArray.push(roleGrid.getRowId(index));// 获取index行的Id属性值
}
}
return idArray;
}