首页 > Dhtmlx > dhtmlxGrid中实现分页查询

dhtmlxGrid中实现分页查询

注:将Tomcat 5.0下的conf/server.xml中的URIEncoding 设置成UTF-8可以解决中文问题

导入文件

<link rel="STYLESHEET" type="text/css"
	href="../../codebase/dhtmlxgrid.css">
<link rel="STYLESHEET" type="text/css"
	href="../../codebase/ext/dhtmlxgrid_pgn_bricks.css">
<script src="../../codebase/dhtmlxcommon.js"></script>
<script src="../../codebase/dhtmlxgrid.js"></script>
<script src="../../codebase/ext/dhtmlxgrid_pgn.js"></script>
<script src="../../codebase/dhtmlxgridcell.js"></script>

jsp页中的相关设置

//两个input域 和一个button按钮用于模糊查询

<div>
	Name
	<br>
	<input type="text" id="search_name">
</div>
<div>
	Chname
	<br>
	<input type="text" id="search_chname">
	<button onclick=
	reloadGrid();
id="submitButton"
		style="margin-left: 30px;">
		Search
	</button>
</div>
<div id="gridbox"
	style="width: 100%; height: 200px;
	margin-top: 20px; margin-bottom: 10px;">
</div>
<div>
	<span id="pagingArea"></span>
</div>

初始化

<script>
	function doOnLoad() {
		var mygrid = new dhtmlXGridObject('gridbox');
		mygrid.setImagePath("../../codebase/imgs/");
		mygrid.setHeader("id,name,chname,pwd");
		mygrid.setInitWidths("150,150,*,150")
		mygrid.setColAlign("left,left,left,right")
		mygrid.setColSorting("server,na,na,server");
		mygrid.setColTypes("ro,ro,ro,ro");
		mygrid.setSkin("light");
		mygrid.init();
		mygrid.enablePaging(true, 10, 5, "pagingArea", true);
		mygrid.setPagingSkin("bricks");
		///////////////////////
		mygrid.loadXML("../../../user!mylist.action");
	}
</script>

//enablePaging中对应的参数的意义分别是:
是否开启分页;
每页显示的行数(这里设置为10行);
每次显示多少页(下图为显示5页);
分页div的id;
是否显示统计结果(对应下图的 Records from 1 to 10 of 999)
dhtmlXGrid实现分页效果
//模糊插叙方法

function reloadGrid(){
	var name_mask = document.getElementById("search_name").value
	var chname_mask = document.getElementById("search_chname").value
	//把查询条件传到action中
	mygrid.clearAndLoad("<%=basePath%>user!mylist.action?
			name_mask="+name_mask+"&chname_mask="+chname_mask);
}

后台action

//得到posStart(从那条数据开始读)count(读取多少条数据)和两个查询条件

String count = req.getParameter("count");
String posStart = req.getParameter("posStart");
String name = req.getParameter("name_mask");
String chname = req.getParameter("chname_mask");

//第一次请求posStart和count值均为空,需要一个默认值

int icount = 50;//默认第一次取出50条记录
try {
	icount = Integer.parseInt(count);
} catch (Exception e) {
	if (null == count)
		icount = 50;
}

int iposStart = 0;
try {
	iposStart = Integer.parseInt(posStart);
} catch (Exception e) {
	if (null == posStart)
		iposStart = 0;
}

//统计数据的总条数(在这里直接得到一个list,然后conntlist.size取得的)对应xml文件中的total_count的值

List conntlist = baseService.queryByHqlName("queryPage", map);
//定义一个Map,将查询条件put到map中
Map map = new HashMap();
if (name == null) {
	name = "";
}
if (chname == null) {
	chname = "";
}
map.put("nameP", "%" + name + "%");
map.put("chnameP", "%" + chname + "%");
//通过调用BaseDaoImpl中类的loadPageData方法进行分页查询,得到一个list
//参数"queryPage"为user-query.hbm.xml中的name(就是下面的代码)
list = baseService.loadPageData(iposStart, icount, UserForm.class,
		"queryPage", map);

user-query.hbm.xml配置文件

<query name="queryPage">
	from UserForm where 1=1 
	and name like :nameP 
	and chname like :chnameP
</query>

xml文件格式

<?xml version="1.0" encoding="UTF-8"?>
	<rows total_count='conntlist.size()' pos='iposStart'>
		<row id='user_id'>
		<cell>
			user_id
		</cell
		<cell>user_Name</cell>
		<cell>user_Chname</cell>
		<cell>user_Pwd</cell>
	</row>
</rows>

除非注明,文章为IT热血青年原创,欢迎转载!转载请注明本文地址,谢谢。
本文地址:http://blog.itblood.com/the-dhtmlxgrid-achieve-paging-query.html

  1. 本文目前尚无任何评论.
  1. 本文目前尚无任何 trackbacks 和 pingbacks.