DHTMLX Tree强大的树插件

来源:https://www.sucaihuo.com/js/320.html 2015-08-20 19:28浏览(2932) 收藏

DHTMLX是一套完整的具有客户端程序效果的界面组件,解决了常见的客户端操作要求。这套组件采用javascript、xml定义组件性征,某些组件甚至可以直接渲染HTML元素。 常见的容器元素包括:布局(layout)、滑动窗口(accordion)、页签(tab)、窗口(window); 常见的数据元素包括:表格(grid)、树(tree)、选择框(combo)、日历(calendar); 常见的窗体元素包括:右键菜单(menu)、工具条(toolbar)。
DHTMLX Tree强大的树插件
分类:导航菜单 > 树形菜单 难易:高级
查看演示 下载资源 下载积分: 60 积分

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);
标签: tree
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2