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. spring源码学习之路---IOC实现原理（三）

    作者:zuoxiaolong8810(左潇龙),转载请注明出处,特别说明:本博文来自博主原博客,为保证新博客中博文的完整性,特复制到此留存,如需转载请注明新博客地址即可. 上一章我们已经初步认识了Be ...

  2. 瀑布流 &留言板

    实例:瀑布流 留言板(一)瀑布流瀑布流实现原理分析1.ajax文件内容function ajax(method, url, data, success) {    var xhr = null;   ...

  3. Redhat5.8 环境下编译安装 Redis 并将其注册为系统服务

    系统环境: $ cat /etc/issueRed Hat Enterprise Linux Server release 5.8 (Tikanga)Kernel \r on an \m 1. 下载安 ...

  4. Jquery局部刷新小案列

    /* 调用showTest()方法去后台拿到处理数据后返回到part.jsp页面,main.jsp再调用html()方法 和显示的结果集show()方法把part.jsp显示到当前的页面,实现局部页面 ...

  5. C# @符号的作用， 可定义关键字为变量名

    一 字符串中的用法字符@表示,其后的字符串是个“逐字字符串”(verbatim string).@只能对字符串常量作用.1.用于文件路径以下是引用片段:string s_FilePath =" ...

  6. 演示save point及自治事务的用处

    1.确认数据库版本 2 举一个例子,说明save point的用处,给出SQL演示. 2.1环境准备 save point的作用是通过在事务中间设置检查点,可以更加精细的控制事务,防止一部分操作错误而 ...

  7. iOS no visible @interface for 'UIButton' declares the selector errors

    no visible @interface for 'UIButton' declares the selector errors  原理不是特别理解,通过清理缓存,代码更新了,Xcode还是读旧的缓 ...

  8. IOS第18天(6,CAKeyframeAnimation关键帧动画）

    ******* #import "HMViewController.h" @interface HMViewController () @property (weak, nonat ...

  9. EmguCV 轮廓

    一.相关函数 public static void cvDrawContours( IntPtr img, IntPtr contour, MCvScalar externalColor, MCvSc ...

  10. 【iCore3 双核心板】例程十九：USBD_MSC实验——虚拟U盘

    实验指导书及代码包下载: http://pan.baidu.com/s/1i4eNbQd iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...