存档

文章标签 ‘Dhtmlx TreeGrid’

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

2013年4月23日 没有评论

分析问题

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

解决方案

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

优点

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

阅读全文…

Dhtmlx TreeGrid中文帮助文档

2013年4月17日 没有评论

简单TreeGrid的实现

1、导入关键文件

<link rel="STYLESHEET" type="text/css" 
	href="../dhtmlxGrid/codebase/dhtmlxgrid.css"/>
<script src="../dhtmlxGrid/codebase/dhtmlxcommon.js"/>
<script src="../dhtmlxGrid/codebase/dhtmlxgrid.js"/>
<script src="../dhtmlxGrid/codebase/dhtmlxgridcell.js"/>
<script src="../dhtmlxTreeGrid/codebase/dhtmlxtreegrid.js"/>

2、初始化

<div id="gridbox" width="100%" height="250px" style="overflow:hidden"/>
<script>
	mygrid = new dhtmlXGridObject('gridbox'); 
//xml文件中图片的路径
	mygrid.setImagePath("<%=url%>Grid/codebase/imgs/icons_books/";
	mygrid.setHeader("Tree,Plain Text,Long Text,Color,Checkbox"); 
//列类型(要显示为树行结构第一列必值须为tree,ed为可编辑,txt为文本框…)
	mygrid.setColTypes("tree,ed,txt,ch,ch");
	mygrid.init(); 
	mygrid.loadXML("test_list_1.xml");
</script>

3、基本XML结构(基本机构就是使用row的嵌套达到树形效果)

<?xml version="1.0" encoding="UTF-8"?>
<rows>
	<row id="h1">
		<cell image="folder.gif">Honda</cell>
		<cell>...</cell>
		<cell>...</cell>
		 <row id=“c1”>
			<cell image="folder.gif">Honda</cell>
			<cell>...</cell>
			<cell>...</cell>
		<row>
	</row>
</rows>

阅读全文…