ligerui_ligerTree_005_动态增加“树”节点

动态添加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 --><divstyle="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>

转载于:https://www.cnblogs.com/zjsy/p/4398932.html

ligerui_ligerTree_005_动态增加“树”节点相关推荐

layui的tree如何实现动态加载_layui tree组件如何异步加载数据，动态添加树节点...
$data = [ [ 'id' => 1, 'name' => '江苏省', 'pid' => 0], [ 'id' => 2, 'name' => '徐州市', 'p ...
js动态增加ul节点li及input
之前也做过有关节点的追加或者删除,但相对下面我要介绍的功能简单多了,都是单个节点的追加或者删除.下面小编将这个功能大概介绍一下. 这个功能的目的是创建多级专区,类似书籍的目录那种的,如下图: 这个功能 ...
solr-cloud 集群动态增加、删除节点
本次讲述动态增加节点基于上一章集群搭建的基础上来讲:https://blog.csdn.net/u013490585/article/details/86494476 上一章的例子中用了3台zk,4台 ...
activiti动态增加节点_图神经网络之动态图
图这种结构普遍存在于人类社会生活中,如互联网中网页间的互相链接会构成图.网民购买商品会构成"网民-商品"图.人和人的交流会构成图.论文的互相引用也会构成图.有许多任务需要根据这些图 ...
hadoop+Spark+hbase集群动态增加节点
如果一个集群资源不够用需要扩展的时候怎么办,那么是可以不关机动态扩展的,具体操作如下: 已有集群: 192.168.111.11 lyy1 ---master节点 192.168.111.12 lyy ...
greenplum 实验，动态增加节点
greenplum 实验,动态增加节点 1.我原有在hadoop4-hadoop6上初始化了一个greenplum的集群 2.所有的primary,mirror都启动着,我连接master,在两个表里 ...
jquery追加html后删除,jquery动态增加删除元素节点
jquery动态增加删除元素节点对于语言编程,不同的思路有着不同的解决办法,Jquery对于动态的ul-li节点的增加删除实力操作思路: 1.做一个按钮用于增加li节点,使用Jquery:appen ...
雪花算法(snowflake)容器化部署支持动态增加节点
先简单的介绍一下雪花算法,雪花算法生成的Id由:1bit 不用 + 41bit时间戳+10bit工作机器id+12bit序列号,如下图: 不用:1bit,因为最高位是符号位,0表示正,1表示负,所以这 ...
ajax与easyui树节点,EasyUI中的tree用法介绍
真的是太忙了,本应该有好多东西可以写,但是没什么闲时间,每次想到写的时候,来点事就又给忘了.10月最后一天了,在忙也得把这篇文章写完,不然又得多一个空白月了. 这是之前带领成员开发一个小模块功能的时候 ...

ligerui_ligerTree_005_动态增加“树”节点

ligerui_ligerTree_005_动态增加“树”节点相关推荐

最新文章

热门文章