首页 > Dhtmlx > dhtmlx TreeGrid分步请求加载的实现方法

dhtmlx TreeGrid分步请求加载的实现方法

分析问题

在页面显示效果如:
dhtmlx TreeGrid分步请求
在treegrid中实现点击北京市只加载北京市的子节点,也就是说在页面只显示如上图所示的,而海淀区、西城区、东城区等下面的节点不能在点击北京市时也加载出来。只有当点击海淀区、西城区等时,对应的子节点才加载。

解决方案

分步请求加载内容:将批量内容的加载,分成若干个步加载。

优点

缓解数据库的压力,更有效、更快地将有关内容加载到页面。

实现的步骤

1、数据库表的设计,以area表为例:
dhtmlx TreeGrid分步请求缓存实现方式
给表中添加一个parentId字段,来确定每条记录的父ID。在tree中也就是说确定各自对应的父节点。
如下图所示:
dhtmlx TreeGrid分步请求缓存实现
这样就可以通过sql语句来控制每次请求时要加载的内容了如,显示北京市的子ID。
实现的sql查询语句是select areaName from area where parentid=1
同样的道理,要想得到某个节点的子节点,只需通过
from area where parenId = ? 就可得到对应的子节点。
如:select areaName from area where parentid=2//海淀区的子节点
2、页面工作
1) 在dataTreeGridUser.jsp页面里显示数据,代码如下:

//列表数据展示
try{
    var tmpArg = new XTreeGridArgs(600,200,"地区,邮政编码,城市人口",
    	"tree,ed,txt","150,100,100",true);
	var tmpGrid = XFactory.Create(GComponents.XTreeGrid,tmpArg);
	tmpGrid.bindDIV("gridbox7");
	tmpGrid.kidsXmlFile("user!showTreeGrid.action");
    tmpGrid.loadXML("user!showTreeGrid.action?id=-1");
}catch(ex){
	alert(ex);
}

代码部分解析:
tmpGrid.kidsXmlFile(“user!showTreeGrid.action”);
这条语句很重要要想实现动态加载,必须加上这句。它的意思可以理解成动态加载treeGrid数据,给服务器指定加载的url
tmpGrid.loadXML(“user!showTreeGrid.action?id=-1″);
而这条语句,大家可能对action后面的id,非常感兴趣,为什么时id,而且为什么其值是-1.那么带着这些问题我们再来看看DHX API中的这一段:
dhtmlx TreeGrid分步请求缓存实现2
它的意思是说,当服务器响应时,客户端就会给出一个id这个id是对应row的id,那么好,当发出第一次请求时,在页面只显示出北京市,也就是说如下图所示:
那么对应的xml文件该怎么些呢?还有保证点击北京市后,向服务器发出id=1的响应,该如何写xml文件呢?
这下就轮到id=-1上场了。
2) 在xmTreeGrid.jsp文件中如下配置

<%@ page contentType="text/html; charset=UTF-8" 
	language="java"  errorPage="" import="java.util.*" %>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
	request.setAttribute("decorator", "none");
	response.setCharacterEncoding("UTF-8");
	response.setContentType("text/xml");
	response.setHeader("Cache-Control","no-cache"); 
	response.setHeader("Pragma","no-cache");
	int id =Integer.parseInt(request.getParameter("id"));
%>
<%if(id == -1){ %>
<rows>
	<row id="1" selected="1" call="1" xmlkids="1">
			<cell image="folder.gif">北京市</cell>
	</row>
</rows>
<%}else{%>
<rows parent="<%=id%>"><!-- parent="<%=id%>表示父节点对应的id-->
   <s:iterator value="list" status="stat">
   	<row id = "<s:property value='id'/>" xmlkids="1">
	<!--  xmlkids="1"表示还有子节点-->
	<cell image="folder.gif"><s:property value="areaName"/></cell>
	<cell image="folder.gif"><s:property value="postalcode"/></cell>
	<cell image="folder.gif"><s:property value="populationAmount"/></cell>
   	</row>
   </s:iterator>
</rows>
<%}%>
<rows>
	<row id="1" selected="1" call="1" xmlkids="1">
		<cell image="folder.gif">北京市</cell>
	</row>
</rows>

代码部分解析:
当id=-1时服务器得到的xml只是

<rows>
	<row id="1" selected="1" call="1" xmlkids="1">
			<cell image="folder.gif">北京市</cell>
	</row>
</rows>

那么在页面自然只显示出:
dhtmlx TreeGrid分步请求缓存实现4
这时,当点击 后,客户端就会自动向服务器发出id=1(客户端获得北京市在数据库中对应的id),然后…
3) 在action中接到id后,就处理过滤数据的回应。
代码如下:

//过滤数据,通过id来查询子id的内容
public String showTreeGrid() throws Exception{
	Map map = new HashMap();
	map.put("pId", id);
	list = baseService.queryByHqlName("queryAreaByParentId", map);
	return "showTreeGrid";
}

部分解析:
list = baseService.queryByHqlName(“queryAreaByParentId”, map);
//根据配置文件里面的HQL语句,获取Map中的K,V对自动为HQL语句赋值
其hibernate配置文件是:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE hibernate-mapping PUBLIC 
    "-//Hibernate/Hibernate Mapping DTD 3.0//EN"
    "http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd">
<hibernate-mapping package="aerotek.orgmgt.form">
	<query name="queryUserByParentId">
		from UserForm  where 1=1 and parent = :pId
	</query>
	<query name="queryAreaByParentId">
		from AreaForm  where 1=1 and parentId = :pId
	</query>
</hibernate-mapping>

4) 再然后处理的数据回到xmTreeGrid.jsp文件里根据条件执行。
5) 再再然后, o(∩_∩)o…哈哈,就没了…

小结:
以上通过hql语句将数据过滤,得到要想得到的效果。

除非注明,文章为IT热血青年原创,欢迎转载!转载请注明本文地址,谢谢。
本文地址:http://blog.itblood.com/dhtmlx-treegrid-step-by-step-request.html

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