zTree异步增加删除树节点

最新推荐文章于 2022-11-25 18:57:56 发布
置顶 最新推荐文章于 2022-11-25 18:57:56 发布
阅读量2.2k 收藏 2
点赞数
分类专栏： web 页面开发 zTree异步增加删除树节点 文章标签： zTree异步增加删除树节点
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ljj2312/article/details/16821859
版权
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - Simple Data</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script>
<!--  <script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.5.js"></script>
 <script type="text/javascript" src="../../../js/jquery.ztree.exedit-3.5.js"></script>-->
<SCRIPT type="text/javascript">
<!--
var setting = {
data: {
simpleData: {
enable: true
}
}
};


var zNodes =[
{ id:1, pId:0, name:"父节点1 - 展开", open:true},
{ id:11, pId:1, name:"父节点11 - 折叠"},
{ id:12, pId:1, name:"叶子节点111"},
{ id:13, pId:1, name:"叶子节点112"},
{ id:2, pId:0, name:"父节点1 - 展开", open:true},
{ id:21, pId:1, name:"父节点11 - 折叠"},
{ id:22, pId:1, name:"叶子节点111"},
{ id:23, pId:1, name:"叶子节点112"},
{ id:3, pId:0, name:"父节点1 - 展开", open:true},
{ id:31, pId:1, name:"父节点11 - 折叠"},
{ id:32, pId:1, name:"叶子节点111"},
{ id:33, pId:1, name:"叶子节点112"},

];


$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
//-->
</SCRIPT>
 </HEAD>


<BODY>
<h1>最简单的树 -- 简单 JSON 数据</h1>
<h6>[ 文件路径: core/simpleData.html ]</h6>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>

</div>
<input type="button" value="动态增加树节点" οnclick="addTreeNode()">
<input type="button" value="动态删除树节点" οnclick="deleteTreeNode()">


</BODY>
</HTML>


<script>
var i = 111;
function addTreeNode(){
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
var treeNode = zTree.getNodeByParam("id",3,null);
zTree.addNodes(treeNode, {id:i++, pId:3,name:"ljj"});
}


function deleteTreeNode(){
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
var treeNode = zTree.getNodeByParam("id", --i, null);
zTree.removeNode(treeNode);
}
</script>
飞奔的蜗牛2017
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery zTree v3.5 实例4 对树的节点进行编辑和删除
money house
08-21 5818
对于jquery ztree生成的树，节点进行编辑和删除
zTree实现删除树节点
热门推荐
游海东的技术专栏
05-18 1万+
zTree实现删除树节点 1、实现源码 zTree实现基本树 <!-- var setting = { data: { simpleData: { enable: true } } }; var zNodes =[ { id:1, pId:0, name:"湖北省", open:true},
30zTree - 基本 增 / 删 / 改 节点
阿甘兄
04-26 503
效果图： 代码： <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - edit</TITLE> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="style...
通过ztree插件实现动态增删改 可进行树的自维护
mfc1561的博客
05-04 972
前台代码加载树，回显页面，以及动态的进行增删改查&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt; &lt;%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %&gt; &am
ztree树，带复选框，右键增加，修改，删除节点可连接后台。
08-30
ztree树，带复选框，右键增加，修改，删除节点可连接后台。针对ztree进行了小小修改。完美运行兼容性好。支持火狐，谷歌，IE10.
jQuery zTree 异步加载添加子节点重复问题
10-18
在解决jQuery zTree异步加载添加子节点时出现的重复问题之前，我们首先需要理解zTree树插件的基本特性和其工作原理。zTree是一个基于jQuery的树形控件，它支持多功能的树形结构展示，并且可以轻松实现节点的增删改查...
zTree异步加载子节点针对大数据量数列表
05-26
最近项目中有一个比较大型的树节点加载，网上面也看过一些解决方案，感觉都不是很好，也有很多误区，比如单击节点时加载子节点，导致节点重复添加。ztree fileter方法是在每次展开时都会执行，所以根据不同的请求...
zTree异步加载展开第一级节点的实现方法
08-29
zTree异步加载展开第一级节点的实现方法可以通过在setting中的callback中添加onAsyncSuccess回调函数，并在回调函数中实现展开第一级节点的逻辑来实现。同时，zTree还提供了获取当前节点的下一级子节点数的实现方法...
使用zTree框架完成树形框架链接到数据库实现增删改
04-01
使用了zTree框架，完成树形结构。实现增删改，链接到底层数据库
完整的ZTree树展示及对树节点的增删改
07-03
ZTree树节点的增删改及本树或者本树与其他树节点之间的拖拽
ZTree异步加载时查询节点
李曼 'S BLOG
12-22 6397
ZTree的异步加载大大提高了页面的加载速度。但是，异步加载树时，ZTree的自带的模糊查询方法（getNodesByParamFuzzy）可就不那么实用了； 它的查询范围仅限于当前页面已经加载出来的节点，而不能搜索还未加载出来的节点。相信大家在使用ZTree的过程中也遇到了这个问题， 在此我将我的解决方法分享出来，供大家参考：1、初始异步加载树，如下图： 以下是树的初始化的代码：<!--
ztree的异步加载和右键增删改
yuanlijiefengjuan的博客
01-26 411
ztree的异步加载和右键增删改, html如下 class="ztree" id="ModelcarEditTree"> id="rMenu"> id="m_add" onclick="addTreeNode();">增加节点 id="m_del" onclick="removeTreeNode();">删除节点 更改节点-->
Ztree 异步加载值的改变
xingjianxinn的专栏
01-03 929
$(document).ready(function(){ var tree = $.fn.zTree.getZTreeObj("treeDemo"); var id=$("#flag").val(); //后台传回来的id var ids = id.split(","); for(var i=0; i var node = tree.getNodeByParam("id",
zTree 异步删除节点操作
www.wuxianjie.net
06-18 937
最近考虑使用 zTree 自带的编辑功能，但发现 beforeRemove 函数并提供针对异步操作（如 AJAX、setTimeout）时的回调函数。 其实，要实现像这种需要根据异步返回结果来判断是否能够删除节点的操作，也非常简单。我们只需要借助 zTree 的 removeNode 和 getSelectedNodes 两个 API，在异步回调函数中手动删除节点即可： var beforeRe...
ztree树点击删除按钮的时候弹出一个提示框，点击确定才能删除，否则不能直接删除
笑到世界都狼狈的博客
05-07 2107
相信很多项目中有遇到用ztree树的小伙伴都非常清楚ztree默认的删除是鼠标点击直接删除，但是我们的项目中这样是不合乎常理的，万一手抖删错了怎么办，接下来的方法就教你如何实现点击删除按钮后弹出一个框。 从ztree API中可以看到有一个beforeRemove事件（beforeRemove是写在callback里面的），在这个事件里编写删除之前需要处理的函数即可。代码如下： before...
31zTree - 高级 增 / 删 / 改 节点
阿甘兄
04-26 547
效果图： 代码： <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - beforeEditName / beforeRemove / onRemove / beforeRename / onRename</TITLE> <meta http-equiv="content-typ...
ztree懒加载以及ztree增加修改删除节点
最新发布
qq_42129143的博客
11-25 1476
ztree懒加载 ztree增加节点 ztree删除节点 ztree编辑节点
Struts2整合Ztree实现异步加载树节点
1. **ZTree异步加载**： 异步加载是ZTree的一个重要特性，它允许在用户需要时动态地获取数据，提高页面的加载速度。在上述代码中，通过设置`async.enable`为`true`启用了异步加载功能。异步请求的数据源由`url`指定...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值