动态添加ligerTree节点:
效果图:


源码地址:http://download.csdn.net/detail/poiuy1991719/8571255
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<html>
<head>
<title>动态增加“树”节点</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() {
//显示图标
$("#.l-tree").ligerTree({
checkbox : true
});
manager = $("#.l-tree").ligerGetTreeManager();
}); //添加节点
function addTreeItem() {
var node = manager.getSelected();//获取当前指定的节点
var nodes = [];
nodes.push({
text : $("#txtNode").val()
});
if (node) {//如果选择了节点,就添加节点
manager.append(node.target, nodes);
} else {
manager.append(null, nodes);
}
}
//添加多个节点
function addTreeItems(){
var node = manager.getSelected();
var nodes=[];
nodes.push({text:$("#txtNode").val(),
children:[{text:'子1'},{text:'子2'}]
});
if(node){
manager.append(node.target,nodes);
}else{
manager.append(null,nodes);
}
} //删除节点
function removeTreeItem() {
var node = manager.getSelected();
if (node) {
manager.remove(node.target);
} else {
alert('请先选择节点');
}
} //清空节点
function clearTreeItem() {
manager.clear();
}
</script>
</head>
<body> 带复选框和图标,动态添加、删除、清空节点
<br> <input type="text" class="l-text" value="节点名" id="txtNode"
style="display:block; float:left; margin-right:10px;" /> <a class="l-button" onclick="addTreeItem()"
style="float:left;margin-right:10px;">增加节点</a> <a class="l-button" onclick="removeTreeItem()"
style="float:left;margin-right:10px;">删除节点</a> <a class="l-button" onclick="clearTreeItem()"
style="float:left;margin-right:10px;">清空节点</a> <a class="l-button" onclick="addTreeItems()"
style="width:150px;float:left;margin-right:10px;">增加节点(带子节点)</a>
<br> <!-- 2:编写HTML -->
<div
style="width:200px; height:300px; border:1px solid #ccc; overflow:auto; clear:both;">
<ul class="l-tree">
<li><span>节点1</span>
<ul>
<li><span>节点1.1</span>
<ul>
<li><span>节点1.1.1</span></li>
<li><span>节点1.1.2</span></li>
</ul></li>
<li><span>节点1.2</span></li>
</ul></li> <li><span>节点2</span></li> <li isexpand="false"><span>节点3</span>
<ul>
<li><span>节点3.1</span></li>
<li><span>节点3.2</span></li>
</ul></li>
</ul>
</div>
<div style="display:none"></div>
<a href="index6.jsp">下一效果:</a>
</body>
</html>

ligerui_ligerTree_005_动态增加“树”节点的更多相关文章

  1. Hadoop概念学习系列之Hadoop集群动态增加新节点或删除已有某节点及复制策略导向 (四十三)

    不多说,直接上干货! hadoop-2.6.0动态添加新节点 https://blog.csdn.net/baidu_25820069/article/details/52225216 Hadoop集 ...

  2. hdfs以及hbase动态增加和删除节点

    一个知乎上的问题:Hbase的Region server和hadoop的datanode是否可以部署在一台服务器上?如果是的话,二者是否是一对一的关系?部署在同一台服务器上,可以减少数据跨网络传输的流 ...

  3. Hadoop 2.6.3动态增加/删除DataNode节点

    假设集群操作系统均为:CentOS 6.7 x64 Hadoop版本为:2.6.3 一.动态增加DataNode 1.准备新的DataNode节点机器,配置SSH互信,可以直接复制已有DataNode ...

  4. JS动态增加删除UL节点LI

    JS如何动态增加删除UL节点LI及相关内容. <ul id="ul"> <li id=1>11111111111111111<a href=" ...

  5. Hyperledger fablic 1.0 在centos7环境下的安装与部署和动态增加节点

    Hyperledger fablic 1.0 在centos7环境下的安装与部署和动态增加节点 一.安装docker 执行代码如下: curl -sSL https://get.daocloud.io ...

  6. ZooKeeper动态增加Server(动态增加节点)的研究(待实践)

    说明:是动态增加Server,不是动态增加连接到ZK Server的Client. 场景如下(转自外文): 1.在t=t_1->[peer-1(Leader),peer-2],peer-1是主节 ...

  7. Hadoop动态增加节点与删除节点

    Hadoop的全分布式安装网上也很多教程,踩过很多坑,整理不出来了……赶紧把增加删除节点留住. 均衡数据 (1)设置数据传输带宽为64M(默认值比较低) hdfs dfsadmin -setBalan ...

  8. JPA,EclipseLink 缓存机制学习(一) 树节点搜索问题引发的思考

    最近在项目在使用JPA+EclipseLink 的方式进行开发,其中EclipseLink使用版本为2.5.1.遇到一些缓存方面使用不当造成的问题,从本篇开始逐步学习EclipseLink的缓存机制. ...

  9. ligerui_ligerTree_007_ligerTree动态加载节点

    ligerui:ligerTree:动态加载节点: 源码地址:http://download.csdn.net/detail/poiuy1991719/8571255 效果图: 代码:json.txt ...

随机推荐

  1. hadoop CLASSNAME命令使用注意点

    Hadoop中可是使用hadoop CLASSNAME命令.这个CLASSNAME就是你写好的类名.hadoop CLASSNAME命令类似于java classname. 使用hadoop CLAS ...

  2. GO语言练习:构建json 和 解析JSON 实例

    本文介绍如何使用Go语言自带的库把对象转换为JSON格式,并在channel中进行传输后,并把JSON格式的信息转换回对象. 1.Go语言的JSON 库 Go语言自带的JSON转换库为 encodin ...

  3. [LintCode] Flatten Binary Tree to Linked List 将二叉树展开成链表

    Flatten a binary tree to a fake "linked list" in pre-order traversal. Here we use the righ ...

  4. java基础比较好的笔记总结

    http://wenku.baidu.com/link?url=02LPBvoYztYSd_htlE4wqzJPsA3pu8yKhIZ9yUiyvh0GT-S9D8TCXZ4flsaewkmnN9AY ...

  5. 【转】jquery iframe取得元素与自适应高度

    今天没事来总结一下iframe在jquery中怎么操作的,下面我来给各位介绍jquery 获取iframe子/父页面的元素及iframe在jquery高度自适应实现方法,各位朋友可参考. jquery ...

  6. 第七周PSP

    团队项目PSP 一:表格     C类型 C内容 S开始时间 E结束时间 I时间间隔 T净时间(mins) 预计花费时间(mins) 讨论 讨论用户界面 8:20 10:34 20 58 68 分析与 ...

  7. Hibernate配置Log4J,很有参考价值的

    hibernate3 自带的默认的日志框架是slf4j,hibernate3的slf只是一个日志的接口,而hibernate3 自带默认的日志框架,在实际开发中很少有公司或者是项目中用到,这里记录一种 ...

  8. 如何获得中国所有的IP地址段

    转自: https://wjianz.wordpress.com/2014/09/12/howto-%E4%BB%8Eapnic%E8%8E%B7%E5%8F%96%E4%B8%AD%E5%9B%BD ...

  9. PHP 判断客户端是IOS还是Android

    <?php if(strpos($_SERVER['HTTP_USER_AGENT'], 'iPhone')||strpos($_SERVER['HTTP_USER_AGENT'], 'iPad ...

  10. fuelux.tree用法

    ACE中带了一个树,样式和操作挺好看的,就是难用,下面记录下如何使用. 首先fuelux.tree接受的数据源是Json,关键这个Json还不怎么标准,可接受的Json示例如下: { '刑侦': { ...