ligerui：ligerTree：动态加载节点：

源码地址：http://download.csdn.net/detail/poiuy1991719/8571255

效果图：

代码：json.txt

[

    { text: '节点1', children: [

        { text: '节点1.1' },

        { text: '节点1.2' },

        { text: '节点1.3', children: [

                { text: '节点1.3.1' ,children: [

                    { text: '节点1.3.1.1' },

                    { text: '节点1.3.1.2' }]

                },

                { text: '节点1.3.2' }

        ]

        },

        { text: '节点1.4' }

        ]

    },

    { text: '节点2' },

    { text: '节点3' },

    { text: '节点4' }

]

代码：HTML

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<html>

<head>

<title>异步动态加载节点</title>

<!-- 1：引入文件 -->

<script src="lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>

<link href="lib/ligerUI/skins/Aqua/css/ligerui-tree.css"

    rel="stylesheet" type="text/css" />

<script src="lib/ligerUI/js/plugins/ligerTree.js" type="text/javascript"></script>

<!-- 2：配置数据 -->

<script type="text/javascript">

    var manager = null;

    $(function() {

        $("#tree1").ligerTree({

            url : 'json.txt',

            onBeforeExpand : onBeforeExpand

        });

        //manager要在加载好ligerTree之后才获取

        manager=$("#tree1").ligerGetTreeManager();

    });

    //展开前激发事件

    function onBeforeExpand(note) {

        if (note.data.children && note.data.children.length == 0) {

            //这里模拟一个加载节点的方法，append方法也用loadData(target,url)代替

            manager.append(note.target, [{

                text : note.data.text + "child1"

            }, {

                text : note.data.text + "child2"

            }, {

                text : note.data.text + "child3"

            }]);

        }

    }

</script>

</head>

<body>

    JavaScript配置数据，的“树”效果

    <br>

    <div

        style="width:200px; height:500px; margin:10px; float:left; border:1px solid #ccc; overflow:auto;  ">

        <!-- 3：编写HTML代码 -->

        <ul id="tree1">

            <li isexpand="false"><span>第一个节点</span>

                <ul></ul></li>

            <li isexpand="false"><span>第二个节点</span>

                <ul></ul></li>

        </ul>

    </div>

    <div style="display:none"></div>

    <br>

    <a href="index.jsp">第一个效果：</a>

</body>

</html>

ligerui_ligerTree_007_ligerTree动态加载节点的更多相关文章

  1. 使用jsTree动态加载节点

    因为项目的需要,需要做一个树状菜单,并且节点是动态加载的,也就是只要点击父节点,就会加载该节点下的子节点. 大致的效果实现如下图: 以上的实现就是通过jsTree实现的,一个基于JQuery的树状菜单 ...

  2. dhtmlxtree动态加载节点数据的小随笔

    最近做了一个这个东西,颇有些感触,随笔记录一下自己的过程. 首先特别感谢:https://blog.csdn.net/cfl20121314/article/details/46852591,对我的帮 ...

  3. Easyui _treegrid 动态加载子节点

    <table id="dg" class="easyui-treegrid" title="数据字典列表" data-options= ...

  4. 记录Js动态加载页面.append、html、appendChild、repend添加元素节点不生效以及解决办法

    今天再优化blog页面的时候添加了个关注按钮和图片,但是页面上这个按钮和图片时有时无,本来是搞后端的,被这个前端的小问题搞得抓耳挠腮的! 网上各种查询解决方案,把我解决问题的艰辛历程分享出来,希望大家 ...

  5. （转）jQuery EasyUI Tree - TreeGrid动态加载子节点

    有时我们已经得到充分的分层树形网格(TreeGrid)的数据. 我们还想让树形网格(TreeGrid)按层次惰性加载节点. 首先,只加载顶层节点. 然后点击节点的展开图标来加载它的子节点. 本教程展示 ...

  6. 044. asp.net主题之三应用或禁用主题和动态加载主题

    1.为单个页面指定主题可以将@Page指令的Theme或StyleSheetTheme属性设置为要使用的主题名称, 代码如下: <%@ Page Theme ="MyTheme&quo ...

  7. highcharts 柱状图 动态加载

    highcharts柱状图动态加载 (1):导入样式 <script type="text/javascript" src="<%=request.getCo ...

  8. （转）高性能JavaScript：加载和运行（动态加载JS代码）

    浏览器是如何加载JS的 当浏览器遇到一个<script>标签时,浏览器首先根据标签src属性下载JavaScript代码,然后运行JavaScript代码,继而继续解析和翻译页面.如果需要 ...

  9. Dex动态加载

    Dex动态加载是为了解决什么问题? 在Android系统中,一个App的所有代码都在一个Dex文件里面. Dex是一个类似Jar的存储了多个Java编译字节码的归档文件. 因为Android系统使用D ...

随机推荐

  1. Java_Servlet 中文乱码问题及解决方案剖析

    一.常识了解 1.GBK包含GB2312,即如果通过GB2312编码后可以通过GBK解码,反之可能不成立; 2.java.nio.charset.Charset.defaultCharset() 获得 ...

  2. X-UA-Compatible/IE=EmulateIE7/IE=7

    1.<meta http-equiv="X-UA-Compatible" content="IE=5" /> 像是使用了 Windows Inter ...

  3. ArcGIS初步 系列视频教程

    本人才疏学浅,但鉴于较少的ArcGIS10以上版本的学习视频,所以利用业余时间做了这么个业余的视频系列教程,本随笔提供在线观看地址与720P原版下载地址. 1认识ArcGIS 优酷在线地址  (优酷清 ...

  4. java-常见异常

    一.运行时异常 1.空指针(java.lang.NullPointerException) 2.类型转换() 3.数组下标越界(java.lang.ArrayIndexOutOfBoundsExcep ...

  5. 所有设备的CSS像素

    mydevice.io Mobile devices, in Responsive Web Design, relate to a core value which is the value of C ...

  6. c#中文转全拼或首拼

    参考:http://www.jb51.net/article/42217.htmhttp://blog.csdn.net/cstester/article/details/4758172 Chines ...

  7. MySQL Server-id踩到的坑

    最近踩到一个说大不大,说小不小的坑,在此分享出来给各位同学.事情是这样的,线上有2台服务器,1主1从.A -> B,B服务器从A服务器同步数据.每天使用xtrabackup在B服务器上面进行全备 ...

  8. js 闭包的简单理解

    let a = function(){ var i=0; let b = function(){ i++; alert(i); } return b; } let c = a(); c(); 这段代码 ...

  9. 20145218&20145240 《信息安全系统设计基础》实验一 开发环境的熟悉

    20145218&20145240 <信息安全系统设计基础>实验一 开发环境的熟悉 课程:信息安全系统设计基础 班级:1452 姓名:(按贡献大小排名)刘士嘉 张晓涵 学号:(按贡 ...

  10. python学习道路(day1note)(变量，注释，用户输入，格式化输出，if,while,for循环并扩展练习)

    python是一门动态解释性的强类型定义语言,其应用范围非常之广 1:进入python语言 #!/usr/bin/env python #_*_coding:utf-8_*_ print(" ...