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. bug:无法给图片加边框

    一,经历 1.错误代码 _avatarView.layer.cornerRadius = GIFT_AVATAR_WIDTH * 0.5; _avatarView.layer.borderColor ...

  2. Android控件属性大全(转)

    http://blog.csdn.net/pku_android/article/details/7365685 LinearLayout         线性布局        子元素任意: Tab ...

  3. C语言-结构体

    #include<stdio.h> struct stu //定义结构体类型 { int num; char *name; char *sex; float score; } boy[]= ...

  4. JSON value

    JSON values can be: A number (integer or floating point) A string (in double quotes) A Boolean (true ...

  5. 【android studio】解决android studio drawable新建项目时只有一个drawable目录的问题

    概述 android studio默认新建Module时,只新建一个drawable目录,并不会新建适配不同分辨率的drawable目录.但其实,这是可以设置的.有以下两种方法: 方法1 详细步骤 进 ...

  6. 简单工程使用sbt公共库（sbt-assembly）

    只是为了简单实现一个算法,想用到breeze算法库.想把breeze当做external libraryies直接导入工程.可是官网没有,网上搜索更多的是在sbt工程或maven工程下. 后来实现目标 ...

  7. 常见26个jquery使用技巧详解(比如禁止右键点击、隐藏文本框文字等)

      来自:http://www.xueit.com/js/show-6015-1.aspx 本文列出jquery一些应用小技巧,比如有禁止右键点击.隐藏搜索文本框文字.在新窗口中打开链接.检测浏览器. ...

  8. VPN fq工具的选择

    豆荚VPN还是不错的.有时候百度会打不开,重新连接一下就可以了 http://wandou.shouyo99.com/ 如果高速模式不可以,请记得选择PPTP模式!!!但有个副作用就是百度打不开了--

  9. Bootstrap css栅格 + 网页中插入代码+css表格

    设计达人 http://www.shejidaren.com/30-minimal-app-icons.html CSS栅格: <!DOCTYPE html> <html lang= ...

  10. IOS第十天(1:QQ好友列表 ,自定义的headview,代理 ,通知 ,black的使用)

    *****HMViewController.m #import "HMViewController.h" #import "HMFriendsGroupModel.h&q ...