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

所属分类:导航-文件树

 49777  303  查看评论 (34)
分享到微信朋友圈
X
纯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树形下拉菜单 支持Ajax异步加载jquery ajax tree menu
  文件树
 103313  440

jQuery目录树插件jtree

jQuery目录树、文件树插件jtree,带搜索功能
  文件树
 59166  380

jquery mobile 树插件

jquery mobile 树形插件
  文件树
 52361  306

纯手写完成“移动端权限树”插件

实现移动端权限树的全选,半选,以及不选的递归功能
  文件树
 55099  372

讨论这个项目(34)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    正在输入┐┐ 0
    2018/11/27 10:55:03
    响应式的,能右键菜单不错! 回复
    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
        2018/8/8 11:45:20
        setText 只能修改成已有的字符串,我添加了输入框根据输入框的值去修改node的名称,发现出BUG了,每一个经过修改的node的名称都会变成最后一次输入的内容
    回复
    独舞 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

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

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复