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

  • 相关阅读:
    matlab学习笔记10_7数值计算类型和常用计算公式
    matlab学习笔记10_5 通用字符串操作和比较函数
    matlab学习笔记10_6 字符串与数值间的转换以及进制之间的转换
    matlab-数组取值
    matlab学习笔记10_4MATLAB中的字符串表示
    matlab学习笔记10_3关系运算符和逻辑运算符
    matlab学习笔记10_2 一般操作符
    matlab学习笔记10 一般运算符
    matlab学习笔记9 高级绘图命令_2 图形的高级控制_视点控制和图形旋转_色图和颜色映像_光照和着色
    matlab学习笔记9 高级绘图命令_1 图形对象_根对象,轴对象,用户控制对象,用户菜单对象
  • 原文地址:https://www.cnblogs.com/wtcsy/p/2015542.html
Copyright © 2011-2022 走看看