dhtmlXTree有以下特点:
<ul class='ul_demo'><li>多浏览器/多平台支持</li><li>全部由JavaScript控制</li><li>动态加载</li><li>XML支持</li><li>大数据树动态翻译(智能XML解析)</li><li>拖拽(同一个树,不同的树之间,不同的框架之间)</li><li>带多选框(CheckBox)的树(两态/三态)</li><li>定制图标(使用JavaScript或xml)</li><li>内容菜单(与dhtmlxMenu集成)</li><li>结点数据为用户数据</li><li>多行结点</li><li>高稳定性</li><li>支持Macromedia Cold Fusion</li><li>支持Jsp</li><li>支持ASP.NET</li></ul>
页面初始化
<script>
tree.enableCheckBoxes(false);
tree.enableDragAndDrop(true);
</script>
使用脚本增加结点
<script> tree=new dhtmlXTreeObject('treeBox',"100%","100%",0); tree.insertNewChild(0,1,"New Node 1",0,0,0,0,"SELECT,CALL,TOP,CHILD,CHECKED"); tree.insertNewNext(1,2,"New Node 2",0,0,0,0,"CHILD,CHECKED"); </script>
<ul class='ul_demo'><li>上面部分 后两个参数都是0(选择后调用的方法,所使用的图片)意味着都使用默认值</li><li>最后一个使用逗号分隔的参数可以是以下值(只能是大写):</li><li>SELECT - 插入后选择此结点</li><li>CALL - 在选择时调用方法</li><li>TOP - 在最上方插入此结点</li><li>CHILD - 此结点有子结点</li><li>CHECKED - 此结点的多选框被选中(如果有的话)</li></ul>
使用XML加载数据
<script>
tree=new dhtmlXTreeObject('treeBox',"100%","100%",0);
tree.setXMLAutoLoading("http://127.0.0.1/xml/tree.xml");
tree.loadXML("http://127.0.0.1/xml/tree.xml");//load root level from xml
</script>
<ul class='ul_demo'><li>在调用时,被打开的结点id(就像url参数一样)将会被增加到初始化XMLAutoLoading(url) 的URL地址上去</li><li>调用loadXML(url)方法不会增加id到url地址上</li><li>调用无参的loadXML()将会使用XMLAutoLoading(url)所指定的url地址</li></ul>
PHP需要在头部添加以下代码:
<?php
if ( stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml") ) {
header("Content-type: application/xhtml+xml"); } else {
header("Content-type: text/xml");
}
echo("<?xml version=/"1.0/" encoding=/"iso-8859-1/"?>/n");
?>
<tree>结点是必须有的.指定加载数据的父结点.这个id参数指定了父结点id.加载根层需要在创建树的时候指定id:new myObjTree(boxObject,width,height,0) <itrem>可以包含(为了一次加载多层结点)或者不包含子结点.并且可以包含<itemtext>标签,可以为结点标签(label)增加一些HTML (text属性将会被忽略)
<item id="123">
<itemtext><![CDATA[<font color="red">Label</font>]]></itemtext>
</item>
必要属性
<ul class='ul_demo'><li><div align="left">text - 结点显示的标签 </div></li><li><div align="left">id - 结点id</div></li></ul>
可选属性
<ul class='ul_demo'><li>tooltip - 鼠标放在结点上提示的信息</li><li>im0 - 没有子结点的结点显示的图片(将会从setImagePath(url)方法指定的路径去获取图片)</li><li>im1 - 包含子结点的结点展开时显示的图片</li><li>im2 - 包含子结点的结点关闭时显示的图片</li><li>aCo1 - 没有选中的结点的颜色</li><li>sCol - 选中的结点的颜色</li><li>select - 在加载时选择此结点(可以为任意值)</li><li>style - 结点文本风格</li><li>open - 展开此结点(可以为任意值)</li><li>call - 选择时调用函数(可以为任意值)</li><li>checked - 如果存在的话,选择此结点的多选框(可以为任意值)</li><li>child - 指定结点是否有子结点(1:有,0:无)</li><li>imheight - 图标的高度</li><li>imwidth - 图标的宽度</li><li>topoffset - 设置结点和上层结点间的偏移量</li><li>radio - 如果非空 则此结点的子结点会有单选按钮</li></ul>
简单TreeGrid的实现
<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"/>
初始化
<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>
基本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>
简单算数运算实现(求和)
1、导入关键文件:
<script src="<%=url%>Grid/codebase/ext/dhtmlxgrid_math.js"/>
2、初始化
mygrid.setColTypes(“tree,price,ed,price[=sum],ed[=sum]“);//对相应列求和(列中必须位数字,可以有小数点)
//精确到小数位数
mygrid.setMathRound(2);
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791