dhtmlxGrid分页与排序

最新推荐文章于 2019-12-30 23:57:29 发布

xiaofancn

最新推荐文章于 2019-12-30 23:57:29 发布

阅读量767

点赞数

CC 4.0 BY-SA版权

分类专栏： J2EE 文章标签： json java 人工智能

本文链接：https://blog.youkuaiyun.com/xiaofancn/article/details/83980042

J2EE 专栏收录该内容

47 篇文章

订阅专栏

本文介绍了如何使用dhtmlxGrid组件在Java后端与JSON数据源的支持下，实现在前端进行表格数据的分页和排序功能。通过控制器处理请求，页面端的JavaScript代码以及特定的脚本配置，最终展示出具有动态分页和排序能力的数据表格。

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