漂亮的JS树控件，自带8个皮肤（dhtmlxTree）

本文链接：https://blog.youkuaiyun.com/zhanghe100/article/details/6004127

dhtmlxTree是一款强大的JavaScript树形菜单组件，具备跨浏览器兼容性、Ajax支持、节点编辑和拖放功能。其丰富的客户端API允许完全控制TreeView的外观和行为。此外，它还支持在不同树之间进行拖放操作，只需简单引入相关资源并配置即可实现。用户可以设置8种内置皮肤，并通过XML定义树的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

dhtmlxTree（DHTML的扩展树）是一个功能丰富的JavaScript树形菜单，允许你轻松地创建有吸引力，快速装载能力下降层次树与跨浏览器兼容性，Ajax支持，在线节点编辑，和拖放的N -。 Special techniques implemented into this JavaScript tree control make it possible to load even big trees fast and effectively .树控件的JavaScript特别的技术落实到这使人们有可能甚至大树负荷快速有效。

Rich client-side API provides complete control over the TreeView appearance and behaviour. Since version 2.5, in addition to the existing functional API, dhtmlxTree also provides object constructor that allows developers to define object properties within a single command. 丰富的客户端API和行为提供了完全控制TreeView的外观。自从2.5版本的API，除了现有的功能，还提供了对象的构造dhtmlxTree，允许开发人员定义一个命令对象的属性在。

Advanced drag-and-drop allows you to drag items not just within one tree, but between different ones (even if the trees are located in different frames or iframes). You can try this functionality right now:先进的拖曳及放下让你拖不仅在树项目之一，但不同的（即使是iframe的树木分布在不同的框架或）现在。你可以试试这个功能的权利：

使用很简单，先把代码中的dhtmlxTree下的codebase文件夹拷贝到你的项目中，这里只JS和CSS等资源

首先在页面添加引用

在添加一个DIV来渲染

在添加JS代码

这个控件自带了8个皮肤，皮肤地址dhtmlxTree/codebase/imgs，皮肤名对应文件夹名，自己可以设置

setSkin('csh_yellowbooks');

在JS代码中大家可以看到数的内容是有XML来的

格式如下

xml version='1.0' encoding='iso-8859-1'?>   
<tree id="0">   
    <item text="Books" id="books" open="1" call="1" select="1">   
        <item text="Mystery !!! & Thrillers" id="mystery" open="1">   
            <item text="Bestsellers" id="bsthrillers" >   
                <item text="Lawrence Block" id="lb">item>   
            item>   
            <item text="Robert Crais" id="rc" >item>   
            <item text="Ian Rankin" id="ir" >item>   
            <item text="James Patterson" id="jp" >item>   
            <item text="Nancy Atherton" id="na" >item>   
        item>   
        <item text="History" id="history" >   
            <item text="John Mack Faragher" id="jmf" >item>   
            <item text="Jim Dwyer" id="jd" >item>   
            <item text="Larry Schweikart" id="ls" >item>   
            <item text="R. Lee Ermey" id="rle" >item>   
        item>   
        <item text="Horror" id="horror">   
            <item text="Stephen King" id="sk" >item>   
            <item text="Dan Brown" id="db" >item>   
            <item text="Mary Janice Davidson" id="mjd" >item>   
            <item text="Katie Macalister" id="km" >item>   
        item>   
        <item text="Science Fiction & Fantasy" id="fantasy">   
            <item text="Audrey Niffenegger" id="af" >item>   
            <item text="Philip Roth" id="pr" >item>   
        item>   
        <item text="Sport" id="sport" >   
            <item text="Bill Reynolds" id="br" >item>   
        item>   
        <item text="Teens" id="teens" >   
            <item text="Joss Whedon" id="jw" >item>   
            <item text="Meg Cabot" id="mc" >item>   
            <item text="Garth Nix" id="gn" >item>   
            <item text="Ann Brashares" id="ab" >item>   
        item>   
    item>   
    <item text="Magazines" id="magazines" open="1">   
        <item text="Sport" id="mag_sp">item>   
    item>   
tree>

很简单的操作，以上就可以完成一个TREE了

下载地址：http://www.51ascx.com/101.html