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. qt编译常见错误

    一.fatal error: QWidget: 没有那个文件或目录 类似于找不到文件目录的,在.pro文件中添加 QT +=\ widgets 类似就可以编译通过

  2. javascrit2.0完全参考手册(第二版) 第2章第1节 基本定义

    在这里,我们介绍一些将要使用的编程语言术语.表2-1提供了精确定义的概念. Table 2-1: 编程语言的基本术语 名字 定义 例子 Token令牌 最小的不可分割的词汇的语言单位.一个连续的字符序 ...

  3. Optimizely:在线网站A/B测试平台

    Optimizely:在线网站A/B测试平台是一家提供 A/B 测试服务的公司.A/B 测试能够对比不同版本的设计,选取更吸引用户眼球的那一款,从而带来更为优化的个人体验.让网站所有者易于对不同版本的 ...

  4. CAS单点登录配置

    见http://download.csdn.net/detail/u010786672/6942715下载.

  5. 学习使用vim,熟悉Linux

    随着对vim一步一步的熟悉,对Linux的资料查阅,在加上今天阅读了王垠的文章,更加的觉得学习vim是正确的选择.抛弃Windows思维,进入Linux的世界,才发现是思维上的转变,如学习英语一样,是 ...

  6. 安装redis和php的redis扩展

    一.安装Redis 在服务器上下载好最新的redis解压包后,解压 #tar -zxvf redis-3.2.0-tar-gz #cd redis-3.2.0-tar-gz #make (redis- ...

  7. ajax测试Demo以及json简单的转化

    Ajax是局部刷新,并不影响页面其他的操作 实例1:本测试是演示利用Ajax在一个页面播放视频,点击赞和踩按钮,视频不会受影响, 新建一个ajaxTest.html页面 <!DOCTYPE ht ...

  8. 创建catalog数据库

    1数据库版本 2环境准备 3目录数据库准备 4创建目录数据库 5使用目录数据库

  9. zju(3)内核编译与运行

    1.实验目的 学习和掌握Linux配置和编译的基本步骤. 二.实验内容 1. 对Linux内核及用户程序进行配置: 2. 编译生成内核映像文件: 3. 把编译的映像文件烧写到FLASH中,查看运行结果 ...

  10. Yii源码阅读笔记(二十五)

    Module类中剩余部分代码,通过控制器ID实例化当前模块的控制器,当前模块的Action方法的前置和后置方法: /** * This method is invoked right before a ...