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. reason: '*** Collection <__NSCFArray: 0x7ffa43528f70> was mutated while being enumerated.'

    一,错误分析 1.崩溃代码如下: //遍历当前数组,判断是否有相同的元素 for (NSString *str in self.searchHistoryArrM) { if ([str isEqua ...

  2. MySQL连接池

    1. using System; using System.Collections; using MySql.Data.MySqlClient; namespace Helper { /// < ...

  3. SQLSERVER远程备份、恢复(转)

    SQLSERVER服务实例名称:192.168.0.2需要备份的数据库名称: a备份机器名称(Client端):192.168.0.3备份机用户:zf 密码:123备份机域名:domain备份机提供备 ...

  4. 五、点数器《苹果iOS实例编程入门教程》

    该app为应用的功能为一个简单的数数程序 现版本 SDK 8.4 Xcode 运行Xcode 选择 Create a new Xcode project ->Single View Applic ...

  5. FileUpload文件上传控件

    1.FileUpload控件的主要功能是向指定目录上传文件.FileUpload控件不会自动上传控件,而需要设置相关的事件处理程序,然后在程序中实现文件上传. 2.FileUpload控件常见的属性 ...

  6. web app 自适应方案总结 弹性布局之rem

    关于rem,主要参考文档 1.腾讯ISUX (http://isux.tencent.com/web-app-rem.html) 2.http://www.w3cplus.com/css3/defin ...

  7. CSS中id与class命名规则及编码最佳习惯

    一.用class_name方式写类名. 以前喜欢用class-name写,不过好像两样也没什么差别.但我比较反对用className写类名,因为始终对浏览器大小写敏感的问题抱有怀疑态度.但是id我会写 ...

  8. HDU 4006 优先队列

    The kth great number Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65768/65768 K (Java/Oth ...

  9. 使用Fiddler的X5S插件查找XSS漏洞

    OWASP top 10的安全威胁中的CrossSite Scripting(跨站脚本攻击),允许攻击者通过浏览器往网站注入恶意脚本.这种漏洞经常出现在web应用中需要用户输入的地方,如果网站有XSS ...

  10. 2016huas暑假集训训练题 G-Who's in the Middle

    题目链接:http://acm.hust.edu.cn/vjudge/contest/121192#problem/G 此题大意是给定一个数n 然后有n个数 要求求出其中位数  刚开始以为是按数学中的 ...