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. iOS 两种易混淆的存储路径

    一,NSBundle 1>我们可以通过解压等操作获取 NSBundle 中的内容. 2>NSBundle主要是包路径,也就是代码编译后的 imge 和 sb 资源文件... 3>例如 ...

  2. Hibernate4Maven

    How to create a Maven project with Hibernate libs? This blog will be a demo to describe this issue. ...

  3. php 安装memcacheq

    berkeley: http://download.oracle.com/otn/berkeley-db/db-6.1.19.tar.gz?AuthParam=1408431634_4887d4468 ...

  4. console ouput 与 重定向输出 效率对比

    昨天做一个程序的性能测试的时候,由于用了自动化脚本,测试的时候直接把结果(包括执行时间等信息)输出到文件.后来我在调整源代码的时候单独跑了可执行文件,此时结果是输出到控制台(printf).大约100 ...

  5. [LintCode] Submatrix Sum 子矩阵之和

    Given an integer matrix, find a submatrix where the sum of numbers is zero. Your code should return ...

  6. HDU1166线段树（单点更新，区间求和）

    敌兵布阵 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  7. HDU1257

    最少拦截系统 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submis ...

  8. centos下安装mysql遇到的问题

    我前边遇到的坎,竟然和这篇百度经验惊人的相似,他帮我大忙了,十分感谢作者啊,连接双手奉上http://jingyan.baidu.com/article/ce436649fec8533773afd38 ...

  9. wampserver的php.ini文件

    在修改php.ini文件时,找到了php文件夹下的php.ini文件,但是重启所有服务后就是不起作用.查看前辈的博客后,明白了是在apache目录下的php.ini才是起作用的. .

  10. CentOs5.8下安装Oracle12C

    12C安装向导: http://docs.oracle.com/database/121/LTDQI/toc.htm 12C下载地址: http://www.oracle.com/technetwor ...