Dhtmlx TreeGrid关键词定位功能实现

今天爱分享给大家带来Dhtmlx TreeGrid关键词定位功能实现，希望能够帮助到大家。

引入JS文件

<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"/>
<script src="../dhtmlxGrid/codebase/ext/dhtmlxgrid_filter.js"/>
<script src="../dhtmlxTreeGrid/codebase/ext/dhtmlxtreegrid_filter.js"/>

执行初始化方法

<div id="gridbox" width="100%" height="250px"
	style="background-color: white; overflow: hidden">
</div>
<script>
	//将treeGrid放入id为’gridbox’的div中
	mygrid=newdhtmlXGridObject('gridbox');
	//引入图片
	mygrid.setImagePath("../dhtmlxGrid/codebase/imgs/icons_books/");
	//设置表头		
	mygrid.setHeader("Search, Text Filter, Select Filter");
	//设置检索类型(有文本框查找，文本框过滤，下拉列表过滤)
	mygrid.attachHeader("#text_search,#text_filter,#select_filter");
	//设置单元格的大小
	mygrid.setInitWidths("200,100,*");
	//数据的对齐方式
	mygrid.setColAlign("left,right,right");
	//设置每列的数据类型
	mygrid.setColTypes("tree,price,ed");
	//排序方式(有字符排序,数字排序,Date排序等)
	mygrid.setColSorting("str,int,int");
	//初始化
	mygrid.init();
	// loadXML()方法在XMl或Action中得到XML类型的数据
	mygrid.loadXML("treegrid_sample.xml");
</script>

ML文档的格式

<?xml version="1.0" encoding="UTF-8"?>
<rows>
	<row id="bmw">
			<cell image="folder.gif">….</cell>
		<row id="bmw1">
			<cell image="folder.gif">…</cell>
				<row id="bmw11">
					<cell image="leaf.gif">…..</cell>
					<cell>…….</cell>
				</row>
		</row>
		<row>
			<cell image="folder.gif">……cell>
		</row>
	</row>
</rows>