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. memcached 的安装与使用

    准备条件:下载memcached的服务器端memcached-1.2.1.win32.zip(虽然最新版本已经是1. 4.6了,但win版本的好像还一直未更新,或找不到.) A.windows上的安装 ...

  2. python--range()函数

    1: >>> range(10, 0, -1) [10, 9, 8, 7, 6, 5, 4, 3, 2, 1] >>> range(10) [0, 1, 2, 3, ...

  3. spring mvc 拦截器 拦截子目录

    项目中碰到这一个问题: 对于/user/loginpage,/user/login这一类的url,放行: 对于/user/{userId}/xxx(xxx不为空)的操作,需要拦截,url-patter ...

  4. MyBatis环境搭建配置文件+入门视频下载

    1.MyBatis优点 操作简单话,代码量少,效率高,成本就降低了 2.MyBatis缺点 参数只能限制为一个 selece语都要手动来写 3.与JDBC的关系:是对JDBC的扩展 把sql语句和ja ...

  5. HDU1063 大数 java

    Exponentiation Time Limit: 2000/500 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...

  6. Daily Scrum 11.3

    今天开发人员的任务都还行,测试的同学要开始辛苦了. 下面是今天的Task统计:

  7. Ajax请求中的Redirect（）

    页面中有一个IsLogin()方法,用以判断该请求的触发者是否登录,如果登录了,则执行查询操作,如果没有登录,则Redirect()至登录界面 页面使用了较多的Ajax请求来获取数据,而在Ajax请求 ...

  8. liunx系统计划任务管理（at/crond调度）

    一.at命令 at命令格式at HH:MM YYYY-MM-DD 其中 HH(小时):MM(分钟) YYYY(年)-MM(月份)-DD(日) 启动atd进程 /etc/init.d/atd start ...

  9. 获取Java系统相关信息

    package com.test; import java.util.Properties; import java.util.Map.Entry; import org.junit.Test; pu ...

  10. 图解Java内存回收机制

    在Java中,它的内存管理包括两方面:内存分配(创建Java对象的时候)和内存回收,这两方面工作都是由JVM自动完成的,降低了Java程序员的学习难度,避免了像C/C++直接操作内存的危险.但是,也正 ...