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>ligerTree节点操作</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() {

        //通过url添加txt文档节点

        $("#tree1").ligerTree({

            url : 'json.txt'

        });

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

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

    });

    //全部折叠

    function collapseAll() {

        manager.collapseAll();

    }

    //全部展开

    function expandAll() {

        manager.expandAll();

    }

    function getChecked() {

        var notes = manager.getChecked();

        var text = "";

        for (var i = 0; i < notes.length; i++) {

            text = text + notes[i].data.text + ",\n";

        }

        alert('选择的节点数：' + text);

    }

    function getSelected() {

        var note = manager.getSelected();

        alert('选择的是：' + note.data.text);

    }

</script>

</head>

<body>

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

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

    <br> 1、折叠全部：

    <a class="l-button" onclick="collapseAll()"

        style="float:left;margin-right:10px"> 折叠全部</a>

    <br> 2、展开全部：

    <a class="l-button" onclick="expandAll()"

        style="float:left;margin-right:10px"> 张开全部</a>

    <br> 3、获取选择项（复选项）：

    <a class="l-button" onclick="getChecked()"

        style="float:left;margin-right:10px"> 获取选择(复选)</a>

    <br> 4、获取指定项（鼠标最近一次点击项）：

    <a class="l-button" onclick="getSelected()"

        style="flat:left;margin-right:10px"> 获取指定项（鼠标最近一次点击项）</a>

    <br> 带复选框和图表

    <br>

    <div

        style="width:200px; height:300px; border:10px; solid #ccc; overflaw:auto; clear:both; ">

        <ul id="tree1">

        </ul>

    </div>

    <br>

    <a href="index5_1.jsp">下一效果：</a>

</body>

</html>

ligerui_ligerTree_004_对"ligerTree"节点操作的更多相关文章

  1. 深入理解DOM节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...

  2. 深入学习jQuery节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]删除节点[4]复制节点[5]替换节点[6]包裹节点 前面的话 DOM节点操作包括创建节点.插入节点.移除节点.替换节点和复制节点.jQuery也有类似的 ...

  3. Query节点操作，jQuery插入节点，jQuery删除节点，jQuery Dom操作

    一．创建节点 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div> ...

  4. 第6章 DOM节点操作

    一．创建节点 为了使页面更加智能化,有时我们想动态的在 html 结构页面添加一个元素标签,那么 在插入之前首先要做的动作就是:创建节点. varbox=$('<div id="box ...

  5. js节点操作

    在看<javascript高级程序设计>,看到节点操作这一块,觉得我只知道用appendChild(),太肤浅了,记录下学到的东西. 每个节点都有一个 parentNode 属性,该属性指 ...

  6. js 节点 document html css 表单节点操作

    js 节点 document html css 表单节点操作 节点操作:访问.属性.创建 (1)节点的访问:firstChild.lastChild.childNodes.parentChild(父子 ...

  7. ext 树节点操作

    ext 树节点操作 tree :树    node:节点 1.全部展开 tree.expandAll(); 2.全部收缩 tree.collapseAll(); 3.得到父节点 node.parent ...

  8. ligerui_ligerTree_002_利用JavaScript代码配置ligerTree节点

    利用JavaScript代码配置ligerTree节点: 源码地址:http://download.csdn.net/detail/poiuy1991719/8571255 效果图: <%@ p ...

  9. cocos2d-x 节点操作 -->J2ME

      cocos2d-x 的节点操作涉及到以下几点          1.  节点之间的关系          2.  节点的添加操作          3.  节点的删除操作          4.  ...

随机推荐

  1. flex lineChart 显示所有的数据节点

    .If you're using <mx:LineSeries>, then set the following property:itemRenderer="mx.charts ...

  2. Photoshop教您快速的制作标准一寸证件照教程

    Photoshop教您快速的制作标准一寸证件照教程 对急需证件照的朋友,只要有一部相机,有电脑安装了PS软件,就可很快自己完成一寸照片的制作. 首先将相机卡里的照片存放在电脑硬盘里: 打开PS图片处理 ...

  3. github仓库的克隆、修改、上传方法（图）

  4. HighchartsJS创建环形带标识的图表实例

    HighchartsJS 是一款功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库,目前最新版本库是Highcharts 4.1.9.另外,HighchartsJS还提供很多的插件和第三 ...

  5. 改进iOS客户端的升级提醒功能

    改进iOS客户端的升级提醒功能 功能设计 先申明一下,我是码农,不是一个产品经理,但我觉得现有市面上的很多 App,设计的 "升级提示功能" 都不太友好.在此分享一下我的想法,欢迎 ...

  6. [CareerCup] 17.9 Word Frequency in a Book 书中单词频率

    17.9 Design a method to find the frequency of occurrences of any given word in a book. 这道题让我们找书中单词出现 ...

  7. Uc爆破工具

    #coding:utf-8 import requests import sys from threading import Thread from Queue import Queue NUM=5 ...

  8. echarts一个页面动态加载两张不同图表数据

    参考 http://www.stepday.com/topic/?877 http://blog.csdn.net/for_china2012/article/details/45167161 // ...

  9. Lua数据结构

    lua中的table不是一种简单的数据结构,它可以作为其他数据结构的基础,如:数组,记录,链表,队列等都可以用它来表示. 1.数组 在lua中,table的索引可以有很多种表示方式.如果用整数来表示t ...

  10. 牛人整理分享的面试知识：操作系统、计算机网络、设计模式、Linux编程，数据结构总结 转载

    基础篇:操作系统.计算机网络.设计模式 一:操作系统 1. 进程的有哪几种状态,状态转换图,及导致转换的事件. 2. 进程与线程的区别. 3. 进程通信的几种方式. 4. 线程同步几种方式.(一定要会 ...