`

dhtmlxGrid分页与排序

    博客分类:
  • J2EE
 
阅读更多

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;
}
 
  • 大小: 90 KB
分享到:
评论
3 楼 howgoo 2012-12-26  
http://www.dhtmlx.com/docs/products/dhtmlxGrid/editions.shtml
免费版不支持分页,我晕。。。
2 楼 yspl66 2012-09-27  
能不能把程序包发我邮箱359164636@qq.com,十分感谢,我就想看下json格式,我做的xml可以显示总页数,但是用json做就不行了。
1 楼 sjx84110 2012-08-12  
enablePaging方法在3.5里面有么?

相关推荐

    DHTMLX grid复制以及分页栏跳转

    本篇文章将深入探讨DHTMLX Grid中的数据复制和分页栏跳转功能。 一、DHTMLX Grid的复制功能 DHTMLX Grid的复制功能允许用户方便地选取并复制表格中的数据。这在处理大量信息时非常实用,用户可以快速地将表格数据...

    dhtmlxgrid 1.4 pro

    1. **分页功能**:dhtmlxGrid 1.4 Pro支持分页显示数据,这在处理大数据集时尤为重要,它可以提高网页性能,减少服务器负载,并提供良好的用户体验。用户可以轻松切换页面,查看不同部分的数据。 2. **数据编辑**:...

    dhtmlxgrid专业版下载

    9. **API与插件**:dhtmlxGrid具有完善的API,可以通过JavaScript调用方法进行操作。同时,它还支持插件系统,可以扩展更多功能。 10. **响应式设计**:适应不同设备屏幕尺寸,支持移动设备和触摸操作。 在描述中...

    dhtmlxGrid介绍及使用手册(中文版)

    此外,dhtmlxGrid还提供了与其他数据库交互的途径,能够对单元格进行扩展,类似EXCEL,并且具备拆分模式,也称作冻结栏。本文将详细介绍dhtmlxGrid的功能和API操作方法。 #### dhtmlxGrid介绍 1. **自定义XML**: ...

    dhtmlxGrid v2.0使用手册

    dhtmlxGrid可以与其他dhtmlx库中的组件(如dhtmlxCalendar、dhtmlxCombo)无缝集成,提供更丰富的交互体验。 **6. API与事件处理** 尽管v2.0的手册缺乏搜索功能,但开发者仍然可以通过查阅API文档,了解每个方法、...

    dhtmlxGrid

    3. **分页**:对于大量数据,dhtmlxGrid可以实现分页显示,以优化性能和用户体验。 4. **数据格式化**:dhtmlxGrid允许自定义单元格和行的样式,以及数据的显示格式,使数据呈现更加美观和直观。 5. **拖放功能**...

    dhtmlxGrid取一列方法

    - **数据绑定**:dhtmlxGrid可以与多种数据源绑定,包括本地数组、JSON对象或远程服务器端点,确保数据的实时更新和同步。 - **性能优化**:在处理大量数据时,dhtmlxGrid提供了分页、虚拟滚动等特性,有效提升了...

    dhtmlxgrid

    1. **数据操作**:dhtmlxGrid支持动态加载、分页、排序、过滤、搜索等功能,使得用户可以轻松地浏览和操作大量数据。 2. **编辑功能**:内置多种编辑器(文本、下拉框、日期选择器等),允许用户直接在单元格内进行...

    dhtmlxGrid_v14_Pro_70813.rar

    5. **分页**:dhtmlxGrid提供分页功能,帮助用户管理和浏览大量数据,提高页面响应速度。 6. **拖放操作**:支持列的拖放调整,以及行的拖放排序,增强了用户体验。 7. **API支持**:dhtmlxGrid拥有丰富的API,...

    dhtmlxGrid_v14_Pro_70813.zip_dhtmlxgrid

    在实际应用中,dhtmlxGrid通常与其他dhtmlx组件结合使用,构建完整的前端应用框架。例如,可以与dhtmlxForm结合处理表单数据,或与dhtmlxCalendar配合展示日期选择功能。此外,dhtmlxGrid也可以与后端框架,如PHP、...

    dhtmlxgrid_v1.2_pro真正可用的pro版本

    排序与过滤:** 用户可以通过点击列头进行升序或降序排序。同时,`dhtmlxGrid` 支持列过滤,通过设置条件筛选出满足特定要求的数据。 **6. 内置搜索功能:** 内建的搜索功能使用户能够在整个表格或指定列中查找...

    dhtmlxgrid 专业版 2.5 带例子

    - **表格布局**:dhtmlxGrid允许用户以表格形式展示大量数据,支持多列、排序、分页等功能。 - **自定义列头**:可以设置自定义的列头文字、图标和样式,以适应不同需求。 - **行和列的可调整**:用户可以自由...

    改造过的DhtmlXGrid表格控件

    DhtmlXGrid是一款功能强大的JavaScript表格控件,它允许开发者在网页中创建复杂的数据网格,支持数据的排序、过滤、编辑、分页等操作。经过改造后的DhtmlXGrid控件,更加强调了对JavaScript表格一般需求的满足,提高...

    dhtmlxGrid2.1.zip

    通过dhtmlxConnector,开发者可以轻松地将dhtmlxGrid2.1与其他dhtmlx组件的数据操作功能与服务器端逻辑结合。 **四、核心文件详解** 1. **dhtmlxgrid.css**:这是dhtmlxGrid的样式表文件,包含了表格的各种样式...

    dhtmlxgrid1.6

    5. **集成其他dhtmlx库**:dhtmlxGrid能与dhtmlxSuite中的其他组件(如dhtmlxCalendar、dhtmlxChart等)无缝集成,扩展应用功能。 6. **多语言支持**:支持多语言界面,方便全球化的应用程序开发。 7. **皮肤定制*...

    12306_dhtmlxGrid

    dhtmlxGrid是这个项目的关键技术,它是一个功能丰富的JavaScript数据网格组件,支持大量的特性,如数据分页、排序、过滤、编辑、拖放以及自定义列格式。它允许开发者在前端实现复杂的数据管理和展示,提供了良好的...

    dhtmlxGrid 3.0

    4. **排序与过滤**:允许用户对数据进行列排序,并支持自定义过滤条件,便于数据筛选。 5. **拖放功能**:允许用户通过拖放操作调整列的顺序,甚至可以将行或数据单元格拖放到其他位置。 6. **扩展性**:dhtmlx...

    dhtmlxgrid专业版和其配套中文API下载

    - **排序与过滤**:支持多列排序和动态过滤,便于用户快速查找所需信息。 - **分页与虚拟滚动**:实现大量数据的高效加载,提供分页功能,对于大数据集,使用虚拟滚动提高性能。 - **拖放操作**:允许用户通过...

Global site tag (gtag.js) - Google Analytics