zoukankan      html  css  js  c++  java
  • 来 写颗简单的树......

    数据源用数组混json结构

    实现了基本的功能

    效率一般  跟 dhtree 梅花雪 树 对比了下  都差不多 (ps感觉比dhtree快点 跟梅花雪树差不多   个人测试  也许测试的方法是错误的 哈哈  如果是错误 请告诉我一下)

     这个实现树的原理是根据json

    不断的生成ul li 

    下面是一个简单的例子   (只有涉及到生成树 也就是说只是展示  tree类代码只有64行)

    没有用innerHTML生成 全是是创建节点来创建ul li

    所以创建节点碎片添加  然后再一次性添加很重要啊

    确实能提高不是速度

    在就是处理图片样式了

    这个我参照的风之石的那个tree

     结构和样式都很好  写起来很方便

    所以介绍一下

    最后一个节点   因为没有向下的虚线了  li就不要设置背景图了  切+那个图片也要换

    这边是里加个 l

    这个是 +样子样式

    #demo .tvdash-f{
        background-position: -240px -40px;
    }

    这个是-样式

    #demo .tvdash-f-open{
        background-position: -200px -40px;
    }

    这个就是最后一个节点的样式了

    #demo .tvdash-fl{
        background-position: -100px -40px;
    }

     png图在ie6下有点问题 所以ie6下图可能会看不见  下面那个例子用的是gif的  效果在ie6下正常




    上面只是一个简单的树

     但是树应该是有input的

    并且能够选中 记录选中

    能够开打任何节点

    能够删除不

    能够编辑 保存

    说一下我在这里怎么完成上面的功能

     选中应该是比较麻烦的

    因为选中了 一个节点 

    要让他所有的子节点都选中

    他的父节点也有可能要选中(如果同级的都是选中状态的)

    接着他的父的父也有可能要选中

    所以设计到很多的查找

    当生成一个li的时候

     给li一个属性

                    li.child.push({
                        li    : li,
                        input : isInput ?$q('input',li)[0]:undefined,
                        data  : o
                    });

    记录下他下一级(是下一级 不是所有的子 )的所有的input 和li

    同时记录父的li 和 input

                    li.parent = {
                        li    : parent,
                        input : isInput ?$q('input',parent)[0]:undefined
                    };
    这样查找起来很方便

    但是内存就要用的多些了

    例子

     




     恩 找个时间补个ajaxtree

  • 相关阅读:
    IO 单个文件的多线程拷贝
    day30 进程 同步 异步 阻塞 非阻塞 并发 并行 创建进程 守护进程 僵尸进程与孤儿进程 互斥锁
    day31 进程间通讯,线程
    d29天 上传电影练习 UDP使用 ScketServer模块
    d28 scoket套接字 struct模块
    d27网络编程
    d24 反射,元类
    d23 多态,oop中常用的内置函数 类中常用内置函数
    d22 封装 property装饰器 接口 抽象类 鸭子类型
    d21天 继承
  • 原文地址:https://www.cnblogs.com/wtcsy/p/2015542.html
Copyright © 2011-2022 走看看