纯javript实用多级目录树结构插件

所属分类:导航-文件树

 26317  54  查看评论 (32)
纯javript实用多级目录树结构插件 ie兼容9

简要教程

aimaraJS是一款非常实用的纯javascript响应式多级目录树结构插件。该目录树可以动态添加和删除树节点,可以制作多级树结构,每个节点上可以都带有右键上下文菜单,并且每个节点上都可以配置不同的图标。它的特点有:

可以创建一个基本的树结构并渲染它。

可以实时添加和删除树节点。

可以显示不同的树节点图标。

在树节点打开和关闭的时候可以自定义事件。

每个树节点上都可以制作右键上下文菜单。


使用方法

使用该幻灯片插件需要在页面中引入Aimara.css和Aimara.js文件。

<link rel="stylesheet" href="css/Aimara.css" />
<script src="js/Aimara.js"></script>

    

HTML结构

可以使用一个空的<div>来作为这个目录树的容器。

<div id="div_tree"></div>

           

 JAVASCRIPT

然后你可以通过下面的方法来初始化该目录树插件。你可以创建一些树节点和子节点,然后渲染它们。节点可以在树被渲染之前或之后添加到树结构中。

<script type="text/javascript">
    window.onload = function() {
        //创建树结构
        var tree = createTree('div_tree','white');
        //创建树节点node1
        var node1 = tree.createNode('First node',false,'images/star.png',null,null,null);
        //node1添加到树结构中
        node1.createChildNode('First child node', false, 'images/blue_key.png',null,null);
        //渲染树结构
        tree.drawTree();
        //创建第二个树节点
        node1 = tree.createNode('Second node',false,'images/star.png',null,null,null);
        node1.createChildNode(<code class="js string" style="box-sizing: content-box; font-size: 12.3165006637573px; padding: 0px; font-family: 'Source Code Pro', 'Courier New', Courier, monospace; colo


相关插件-文件树

jQuery目录树插件

jQuery文件树插件
  文件树
 23760  95

jQuery文件树插件SimpleTree.js

jQuery文件树插件SimpleTree.js,代码少使用方便。
  文件树
 20581  52

基于bootstraptreeview无限分类树层级联动菜单

基于bootstraptreeview做的一个漂亮的无限分类树层级联动菜单
  文件树
 13331  42

js动态树插件DynamicTree

简单好用的 tree ,纯 js ,可编辑 Tree,并能导出为 html sql php
  文件树
 8807  21

讨论这个项目(32)回答他人问题或分享插件使用方法奖励jQ币

    siren 0
    2017/12/12 17:59:24
    /oh ppant 0
    2017/10/17 7:47:54

    这个非常不错,站里搜了一圈最后就是用这个了,至于没有币的兄弟可以打开源码然后把几个js和css外链的文件下载下来就可以用了

    回复
    小烦恼SJ 0
    2017/9/29 15:04:23

    参数怎么感觉不全啊

    回复
    爱萌的小蜗牛!! 0
    2017/9/26 10:03:20
    0
    2017/9/22 14:08:40
              柠澈、 0
    2017/8/23 16:06:42

    好像没有修改啊,删除添加都有

        Amy0
        2018/4/3 11:07:42
        可以通过setText修改节点文字
    回复
    独舞 0
    2017/8/3 10:43:06
    这张图片的路径应该在哪里改啊??? 回复
    藏器 0
    2017/7/19 14:46:42

    看起来不错,没钱啊

        玫瑰香0
        2017/11/29 15:37:12

        可以通过签到领取jQ币,连续签到3天以上,每天签到都会获得1jQ币。

    回复
    Network penetration 0
    2017/6/22 12:08:59

    这个好,完美的解决了我的问题

    回复
    Lucia Huang` 0
    2017/4/11 10:08:03
    css里面的三张图片不知道是做什么的... 回复
取消回复