首页 > Dhtmlx > Dhtmlx TreeGrid中文帮助文档

Dhtmlx TreeGrid中文帮助文档

简单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>

关键词定位功能实现

具体的实现方法可以参考博文:Dhtmlx TreeGrid关键词定位功能实现

简单算数运算实现(求和)

1、导入关键文件:

<script  src="<%=url%>Grid/codebase/ext/dhtmlxgrid_math.js"/>

2、初始化
//对相应列求和(列中必须位数字,可以有小数点)
mygrid.setColTypes(“tree,price,ed,price[=sum],ed[=sum]“);
//精确到小数位数
mygrid.setMathRound(2);

绑定事件(动态添加删除等)

1、引入JS和CSS文件

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

2、执行初始化方法

<div id="gridbox" width="100%" height="250px" 
	style="background-color:white;overflow:hidden"/>
<script>
	 mygrid = new dhtmlXGridObject('gridbox');
	 mygrid.selMultiRows = true;
	 mygrid.imgURL = "../dhtmlx/dhtmlxGrid/codebase/imgs/icons_books/";
	 mygrid.enableTreeGridLines();
	 mygrid.init();
	 mygrid.loadXML("treegrid.xml");
</script>

增加行,删除行的操作是通过a标记中的onclick事件来实现的
3、其主要功能代码如下:

//添加行
<a href="#" onclick="mygrid.addRow((new Date()).valueOf(),
['new row','text','text',1,0],0)">add new row</a>;
//根据id添加条目
<a href="#" onclick="var z=mygrid.getRowId(this.nextSibling.value); 
	if (z) 
		mygrid.addRow((new Date()).valueOf(),
				['new row','text','text',1,1],0,z)">
	add new row at child of node at position
</a><input>;
//添加一个条目
<a	href="#" onclick="
	var z=mygrid.getSelectedId();	
	if(z) mygrid.addRow((new Date()).valueOf(),
			['new row','text','text',1,1],0,z)">
	add new row as a child of select
</a>
//根据id删除行
<a href="#" onclick="var z=mygrid.getRowId(this.nextSibling.value);
	if (z) mygrid.deleteRow(z)">delete row position
</a>
//删除行
<a href="#" onclick="mygrid.deleteSelectedItem()">delete a row</a>
//返回所选行
<a href="#" onclick="alert(mygrid.getRowIndex(mygrid.getSelectedId()))">
	Index of selected
</a>
//展开所有节点
<div>
	<a href="#" onclick="mygrid.expandAll()">Expand all</a>
</div>
//收缩所有节点
<div>
	<a href="#" onclick="mygrid.collapseAll()">Collapse all</a>
</div>

4、生成xml代码

<table width="835">
	<tr>
		<td width="600px">
			<div id="gridbox" width="100%" height="250px" 
				style="background-color:white;"></div>
		</td>
		<td valign="top">
		    <textarea style='width:300px; height:230px;'></textarea>
		    <div>
		    <a href="#" 
		    	onclick="this.parentNode.previousSibling.
			    	value=mygrid.serialize();return false;">
		    	Serialize TreeGrid
		    </a>
		  	</div>
		</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
	</tr>
</table>

5、样式下图所示:

Dhtmlx TreeGrid绑定事件

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

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