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. DataTable在内存中的使用

    DataTable表示一个与内存有关的数据表,可以使用工具栏里面的控件拖放来创建和使用,也可以在编写程序过程中根据需要独立创建和使用,最常见的情况是作为DataSet的成员使用,在这种情况下就需要用在 ...

  2. JS文档生成工具：JSDoc 介绍

    JSDoc是一个根据javascript文件中注释的信息,生成API文档的工具.生成的文档是html文件.类似JavaDoc和PHPDoc. 用法 /** 一坨注释之类的 */JSDoc会从/**开头 ...

  3. Debug与Release的区别

    Debug版本包括调试信息,所以要比Release版本大很多(可能大数百K至数M).至于是否需要DLL支持,主要看你采用的编译选项.如果是基于ATL的,则Debug和Release版本对DLL的要求差 ...

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

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

  5. Android studio使用增量更新进行版本升级

    今天将Android Studio更新了一下,特此记录一下升级过程,以后可能还会用得着. 首先通过菜单栏进入 Help --> Check for update 查看下当前版本是否需要更新.事实 ...

  6. [LintCode] Valid Parentheses 验证括号

    Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determine if the inpu ...

  7. MySQL数据库基本指令（全）

    数据库基本类型 CHAR 固定长度字符串 char(10) 存两位 占10位 查询有优势VARCHAR 可变长度字符串 varchar(10) 存两位 占两位 存储有优势 枚举类型 只能取一个set类 ...

  8. WIN8 MTK驱动不能安装解决办法

    1.把鼠标移动到桌面最右下角的位置会出来一个侧边栏,按那个齿轮就是“设置”,会出来个菜单,选择最下边的“更多电脑设置” 注:也可以按快捷键“WIN+I” 2.选择“常规”→“高级启动”→”立即重启“ ...

  9. zju(11)在IAR中移植ucos到msp430

    准备材料 1.在TI官网上下载430的固件库,我用的是msp430f5528的板子,下载的是F5xx_F6xx_Core_Lib 地址http://www.ti.com/tool/msp-exp430 ...

  10. log4j日志输出级别高低

    Log4j是Apache的开源项目一个功能强大的日志组件,提供方便的日志记录.日志记录器(Logger)是日志处理的核心组件Log4j建议只使用四个级别,优先级从高到低分别是FATAL, ERROR. ...