使用JS动态构建目录树

在使用frameset布局的时候,经常会用到目录树,我们可以把一棵树写死,但是更多的情况是,这棵树需要随时被改动,所以我们期望的是他能够被动态的构建。

MVC,算是了解一点,那本文就把这棵树根据M-V-C给拆开分解吧。

下面就来看看这棵树是怎么构建的。

Module [数据层]

var tree = {
            "id": 0,
            "a1": {
                "id": 1,
                "name": "a1",
                "children": {
                    "b1": "b1_1",
                    "b2": "b1_2",
                    "b3": "b1_3"
                }
            },
            "a2": {
                "id": 1,
                "name": "a2",
                "children": {}
            },
            "a3": {
                "id": 1,
                "name": "a3",
                "children": {
                    "b1": "b3_1",
                    "b2": "b3_2",
                    "b3": "b3_3"
                }
            }
        };

这是一颗两层的目录树,用ID来表示层级关系,name来表示改层的名字(也就是节点Text内容吧)。

Control [控制层]

var Tree = function ( module ){
    function createNodeList( obj ) {
        //创建ul节点和documentFragmeng中间变量
        var n = document.createElement("ul"),
            docfrag = document.createDocumentFragment();

        //判断obj是根节点还是孩子节点
        if(obj.id == 0) {
            n.setAttribute("class", "tree_0");

            for(var key in obj) {
                if(key == "id") continue;
                //将节点插入
                var c = document.createElement("li"),
                    span = document.createElement("span");
                span.appendChild(document.createTextNode( obj[key].name ));
                c.appendChild(span);
                docfrag.appendChild( c );
            }
        }else if(obj.id && obj.id == 1) {
            n.setAttribute("class", "tree_1");

            for(var key in obj) {
                if(key == "id" || key == "name" || !obj.children) continue;
                for( var item in obj.children){
                    //将节点插入
                    var c = document.createElement("li");
                    c.appendChild(document.createTextNode( obj.children[item] ));
                    docfrag.appendChild( c );
                }
            }
        }
        n.appendChild( docfrag );
        //返回开始构建的ul节点
        return n;
    }

    //隐藏及显示 工具函数
    function toggle(c){
        c.style.display = ((c.style.display == "none") ? "" : "none");
    }

    function createTree( obj ) {
        var root, child, count = 0;

        root = createNodeList( obj );
        for(var key in obj){
            if(obj[key] == "id" || !obj[key].children) continue;
            child = createNodeList(obj[key]);
            root.children[count].appendChild( child );
            //count来判断插入的位置
            count++;
        }
        return root;
    }

    var T = createTree(module);
    var list = T.children;
    for(var i = 0, len = list.length; i < len; i++){
        list[i].getElementsByTagName("span")[0].onclick = function(){
            var obj = this.nextSibling;
            toggle(obj);
        }
    }
    return T;
}

这里边创建了三个函数,其中

createNodeList() //适用于构建一个树子节点

其中使用documentFragment作为一个节点缓存器,先把节点放置到documentFragment中,然后统一插入到ul,这也是比较常用的使用方式。

createTree() //构建一棵树

基本整棵树的构建就是分为这两步,前者负责创建一个子节点,后者构建一棵树。

在这颗树中绑定了click事件,让其可以折叠,当然也可以在Tree这个类里绑定更多的方法,这个就靠自己发挥了。

View [视图层]

window.onload = function(){
    var T = new Tree(tree);
    document.getElementsByTagName("body")[0].appendChild(T);
}

整棵树的构建,主要用到的是DOM元素的处理,这个必须牢牢掌握!

到此这篇关于使用JS动态构建目录树的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2022-01-09

jQuery zTree插件快速实现目录树

ztree是JQuery的一个开源树形目录的插件,用来快速构建网站的树形目录结构,并且提供了功能丰富,利于扩展的API. JQuery ztree官网 只要引入jquery和ztree的库js,然后给ztree提供需要的json数据,并且设置好ztress的属性,就可以即刻展示出树形目录. 总结下来,要使用ztree的话,必须要完成以下几步: 1. 引入库文件 jquery.js ztree.js ztree.css 2. 获取数据 你要思考数据来源问题了. 如果要自己从数据库查询树形结构这时候

jQuery仿写百度百科的目录树

一.首先来看一下需求(截图为百度百科"医保"词条): 1.点击右侧的目录树,左侧跳转到指定的锚点位置: 2.滚动鼠标,游标跟随一起滚动至响应链接位置 二.实现思路 1.针对第一个需求,只需要设置游标所在div和右侧列表div的position为fixed,根据浏览器窗口定位,然后给左侧文章各区块增加id,为右侧列表每一项增加对应的href属性指向响应的锚点即可: 2.针对第二个需求,定义鼠标的滚动事件mousewheel(在ff下事件为DOMMouseScroll),当时自己琢磨了半天

jQuery+css实现百度百科的页面导航效果

这周不小心看到了百度百科的页面导航效果,感觉挺不错的,周末抽空写了下. 下图为导航部分的效果图: css和图片都是抄百度的,可从百度百科下载. 具体的代码如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head>     <title></title>     <meta charset="utf-8">     <link rel="stylesheet"

基于Jquery实现仿百度百科右侧导航代码附源码下载

先给大家展示下效果图,看看是不是亲想要实现的效果,如果还满意的话请查看本文详情,同时大家也可以下载源码哦. 效果图: 效果展示  源码下载 代码说明: 仿百度百科右侧导航代码jquery插件,这个仿百科右侧导航js代码,在很久以前就像搞个用了,因为这个导航特别适合长篇文档使用,花了半天时间写了这个仿百科导航插件,不过和百度百科比起来还是有点弱,没有实现右侧导航区域滚动的功能,如果您的文档不是超级变态长,应该够用. 如果你的导航超级长,可能要用到侧边导航页可以滚动,一般情况下还是用不到,等过些时候

详解百度百科目录导航树小插件

说起来比较惭愧,在园子里混了4年,注册账号也有3年多了,一篇博客都没有写过,之前不写博客的原因是:1,觉得自己的水平弱爆了,不敢出来误人子弟,也怕大牛们笑话 2,太懒了,有时候自己搞一点小东西,搞的过程中兴趣盎然,等搞出来以后就觉得索然无味了,懒得花时间再去整理.新的一年不想再抱着这种想法继续下去了,改变就从今天开始. 先介绍一下造轮子的背景:前几天给客户设计原型,是关于一个步骤数据展示及打分的页面,客户可以在此页面上看到APP端配置的工作步骤以及采集到的数据,可以分别给每个步骤打分,在设计的时

jquery仿百度百科底部浮动导航特效

jquery类似百度百科底部导航预览,代码很简单,这里就不多废话了. 效果图: CSS * { margin: 0; padding: 0 } .wrap { width: 1000px; overflow: hidden; margin: 0 auto; } .content { width: 780px; float: left; } .slide { width: 200px; float: right; } HTML <div class="wrap"> <d

dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法

在以前的一个公司内部管理系统(InnerOA)中,对于目录树的构造我采用的是dTree,实现无限级目录显示及右键菜单功能(右键菜单中包括:新建.修改.共享.删除.刷新等功能,如下图所示) 关于公司内部管理系统(InnerOA)中目录树的一些知识以后有时间将整理并提供源码. 但是dTree唯一遗憾的是不支持拖拽排序功能,这让我在完成InnerOA之后心里一直纠结的问题.在网上查看关于目录树的一些内容,dTree是我目前认为最符合我项目的一个.在一个偶然机会,发现了另一个强大的目录树,也就是本文所说

教你用python3根据关键词爬取百度百科的内容

前言 关于python版本,我一开始看很多资料说python2比较好,因为很多库还不支持3,但是使用到现在为止觉得还是pythin3比较好用,因为编码什么的问题,觉得2还是没有3方便.而且在网上找到的2中的一些资料稍微改一下也还是可以用. 好了,开始说爬百度百科的事. 这里设定的需求是爬取北京地区n个景点的全部信息,n个景点的名称是在文件中给出的.没有用到api,只是单纯的爬网页信息. 1.根据关键字获取url 由于只需要爬取信息,而且不涉及交互,可以使用简单的方法而不需要模拟浏览器. 可以直接

layui实现checkbox的目录树tree的例子

废话不多说啦,我就直接上代码吧,需要的朋友可以过来参考下 layui.use([ 'tree' ], function() { $ = layui.jquery; form = layui.form; //获取节点数据 getTreeData(); }); function getTreeData() { $.ajax({ url : path+"/RoleController/getResourceTree.do", type : "post", dataType

Python爬虫实现爬取百度百科词条功能实例

本文实例讲述了Python爬虫实现爬取百度百科词条功能.分享给大家供大家参考,具体如下: 爬虫是一个自动提取网页的程序,它为搜索引擎从万维网上下载网页,是搜索引擎的重要组成.爬虫从一个或若干初始网页的URL开始,获得初始网页上的URL,在抓取网页的过程中,不断从当前页面上抽取新的URL放入队列,直到满足系统的一定停止条件.爬虫的工作流程较为复杂,需要根据一定的网页分析算法过滤与主题无关的链接,保留有用的链接并将其放入等待抓取的URL队列.然后,它将根据一定的搜索策略从队列中选择下一步要抓取的网页