zTree实例（可增删编辑）

最新推荐文章于 2022-03-30 15:38:40 发布
最新推荐文章于 2022-03-30 15:38:40 发布
阅读量1.5k 收藏
点赞数
分类专栏： 编程语言
 <!DOCTYPE html>
 <HTML>
 <HEAD>
 <TITLE> ZTREE DEMO - addNodes / editName / removeNode / removeChildNodes</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.4.js"></script>
 <script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.4.js"></script>
 <script type="text/javascript" src="../../../js/jquery.ztree.exedit-3.4.js"></script>
 <SCRIPT type="text/javascript">
 <!--
 var setting = {
 view: {
 selectedMulti: false
 },
 edit: {
 enable: true,
 showRemoveBtn: false,
 showRenameBtn: false
 },
 data: {
 keep: {
 parent:true,
 leaf:true
 },
 simpleData: {
 enable: true
 }
 },
 callback: {
 beforeDrag: beforeDrag,
 beforeRemove: beforeRemove,
 beforeRename: beforeRename,
 onRemove: onRemove
 }
 };
  
 var zNodes =[
 { id:1, pId:0, name:"父节点 1", open:true},
 { id:11, pId:1, name:"叶子节点 1-1"},
 { id:12, pId:1, name:"叶子节点 1-2"},
 { id:13, pId:1, name:"叶子节点 1-3"},
 { id:2, pId:0, name:"父节点 2", open:true},
 { id:21, pId:2, name:"叶子节点 2-1"},
 { id:22, pId:2, name:"叶子节点 2-2"},
 { id:23, pId:2, name:"叶子节点 2-3"},
 { id:3, pId:0, name:"父节点 3", open:true},
 { id:31, pId:3, name:"叶子节点 3-1"},
 { id:32, pId:3, name:"叶子节点 3-2"},
 { id:33, pId:3, name:"叶子节点 3-3"}
 ];
 var log, className = "dark";
 function beforeDrag(treeId, treeNodes) {
 return false;
 }
 function beforeRemove(treeId, treeNode) {
 className = (className === "dark" ? "":"dark");
 showLog("[ "+getTime()+" beforeRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
 return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");
 }
 function onRemove(e, treeId, treeNode) {
 showLog("[ "+getTime()+" onRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
 }
 function beforeRename(treeId, treeNode, newName) {
 if (newName.length == 0) {
 alert("节点名称不能为空.");
 var zTree = $.fn.zTree.getZTreeObj("treeDemo");
 setTimeout(function(){zTree.editName(treeNode)}, 10);
 return false;
 }
 return true;
 }
 function showLog(str) {
 if (!log) log = $("#log");
 log.append("<li class='"+className+"'>"+str+"</li>");
 if(log.children("li").length > 8) {
 log.get(0).removeChild(log.children("li")[0]);
 }
 }
 function getTime() {
 var now= new Date(),
 h=now.getHours(),
 m=now.getMinutes(),
 s=now.getSeconds(),
 ms=now.getMilliseconds();
 return (h+":"+m+":"+s+ " " +ms);
 }
  
 var newCount = 1;
 function add(e) {
 var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
 isParent = e.data.isParent,
 nodes = zTree.getSelectedNodes(),
 treeNode = nodes[0];
 if (treeNode) {
 treeNode = zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, isParent:isParent, name:"new node" + (newCount++)});
 } else {
 treeNode = zTree.addNodes(null, {id:(100 + newCount), pId:0, isParent:isParent, name:"new node" + (newCount++)});
 }
 if (treeNode) {
 zTree.editName(treeNode[0]);
 } else {
 alert("叶子节点被锁定，无法增加子节点");
 }
 };
 function edit() {
 var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
 nodes = zTree.getSelectedNodes(),
 treeNode = nodes[0];
 if (nodes.length == 0) {
 alert("请先选择一个节点");
 return;
 }
 zTree.editName(treeNode);
 };
 function remove(e) {
 var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
 nodes = zTree.getSelectedNodes(),
 treeNode = nodes[0];
 if (nodes.length == 0) {
 alert("请先选择一个节点");
 return;
 }
 var callbackFlag = $("#callbackTrigger").attr("checked");
 zTree.removeNode(treeNode, callbackFlag);
 };
 function clearChildren(e) {
 var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
 nodes = zTree.getSelectedNodes(),
 treeNode = nodes[0];
 if (nodes.length == 0 || !nodes[0].isParent) {
 alert("请先选择一个父节点");
 return;
 }
 zTree.removeChildNodes(treeNode);
 };
  
 $(document).ready(function(){
 $.fn.zTree.init($("#treeDemo"), setting, zNodes);
 $("#addParent").bind("click", {isParent:true}, add);
 $("#addLeaf").bind("click", {isParent:false}, add);
 $("#edit").bind("click", edit);
 $("#remove").bind("click", remove);
 $("#clearChildren").bind("click", clearChildren);
 });
 //-->
 </SCRIPT>
 </HEAD>
  
 <BODY>
 <h1>用 zTree 方法 增 / 删 / 改 节点</h1>
 <h6>[ 文件路径: exedit/edit_fun.html ]</h6>
 <div class="content_wrap">
 <div class="zTreeDemoBackground left">
 <ul id="treeDemo" class="ztree"></ul>
 </div>
 <div class="right">
 <ul class="info">
 <li class="title"><h2>1、addNodes / editName / removeNode / removeChildNodes 方法操作说明</h2>
 <ul class="list">
 <li>利用 addNodes / editName / removeNode / removeChildNodes 方法也可以实现 增 / 删 / 改 节点的目的，这里简单演示使用方法</li>
 <li>cancelEditName 方法仅仅是在节点进入名称编辑状态时有效，请在必要时使用，Demo 不进行此方法的演示</li>
 <li class="highlight_red">利用 setting.data.keep.parent / leaf 属性 实现了父节点、叶子节点的状态锁定</li>
 <li><p>对节点进行 增 / 删 / 改，试试看：<br/>
 &nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" id="callbackTrigger" checked /> removeNode 方法是否触发 callback<br/>
 &nbsp;&nbsp;&nbsp;&nbsp;[ <a id="addParent" href="#" title="增加父节点" onclick="return false;">增加父节点</a> ]
 &nbsp;&nbsp;&nbsp;&nbsp;[ <a id="addLeaf" href="#" title="增加叶子节点" onclick="return false;">增加叶子节点</a> ]
 &nbsp;&nbsp;&nbsp;&nbsp;[ <a id="edit" href="#" title="编辑名称" onclick="return false;">编辑名称</a> ]<br/>
 &nbsp;&nbsp;&nbsp;&nbsp;[ <a id="remove" href="#" title="删除节点" onclick="return false;">删除节点</a> ]
 &nbsp;&nbsp;&nbsp;&nbsp;[ <a id="clearChildren" href="#" title="清空子节点" onclick="return false;">清空子节点</a> ]<br/>
 remove log:<br/>
 <ul id="log" class="log"></ul></p>
 </li>
 <li class="highlight_red">使用 zTreeObj.addNodes / cancelEditName / editName / removeNode / removeChildNodes 方法，详细请参见 API 文档中的相关内容</li>
 </ul>
 </li>
 <li class="title"><h2>2、setting 配置信息说明</h2>
 <ul class="list">
 <li>同 "基本 增 / 删 / 改 节点"</li>
 <li class="highlight_red">保持 父 / 叶子 节点状态，需要设置 setting.data.keep.parent / leaf 属性，详细请参见 API 文档中的相关内容</li>
 </ul>
 </li>
 <li class="title"><h2>3、treeNode 节点数据说明</h2>
 <ul class="list">
 <li>同 "基本 增 / 删 / 改 节点"</li>
 </ul>
 </li>
 </ul>
 </div>
 </div>
 </BODY>
 </HTML>
cymbidium999
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
zTree可 添加，编辑，删除，移动 节点
Vin__的博客
07-19 3746
可编辑移动删除的zTree · js 需要引入 all.js 或者 后面的三个js（别忘了css样式文件） 效果就是下面的树，可以对节点进行 移动（拖动）、添加子节点、编辑、删除 配置内容： 1.至今不明白的一个点，用ajax异步获取节点然后设置节点，好多ztree的好多回调函数会失效。这种方法初始化才行。 2.加载完成后展开一级节点 · 控制 添加编辑...
ztree懒加载以及ztree增加修改删除节点
qq_42129143的博客
11-25 1390
ztree懒加载 ztree增加节点 ztree删除节点 ztree编辑节点
ZTree基本使用及本人详解
热门推荐
刘大猫
03-30 1万+
文章目录ZTree树简介简介ZTree的特点练习ztree之前的小建议ZTree文件介绍ZTree的配置介绍ZTree使用案例需求1：前端初始化数据（标准json数据）前端代码需求2：后端查询ztree数据（简单JSON数据）+需求3：设置节点默认选中+需求4：【添加/编辑/删除】节点+需求5：自定义图标固定和不固定显示前端代码后端代码需求6：左侧菜单栏前端代码需求7：拖拽节点高级控制前端代吗需求8：2棵树之间的数据交互前端代吗 ZTree树简介 简介 ZTree的特点 练习ztree之前的小建议 如
使用zTree作为权限树，并进行权限的添加和删除
谁的博客
07-03 1180
zTree具体api参看官方文档：http://www.treejs.cn/v3/api.php 功能描述 属于用户管理模块，其他类似。 每个用户展示的权限树是一样的，不一样的是各个用户拥有的权限前会打勾。 点击树的勾选框选择是添加还是删除权限。 用户拥有的角色的权限是不可编辑的，树节点显示为不可编辑状态（无法勾选）。 一、获取数据并展示某个用户的权限树 1、zNodes = ...
ztree addNode editName removeNode
weixin_34289454的博客
03-09 537
1.ztree api中完全拥有以上操作的相关解释，及简单Demo。 2.主要是要学会将单独的效果组合起来使用。 2.1 如： 添加完新的Node节点之后，怎么立即进入新节点的编辑状态来修改名称(或者在添加新节点之前怎么输入节点名称)。 var zTree = $.fn.zTree.getZTreeObj("departmentTree"); //创建新节点，并保...
ztree全套的增删改查实例,包括编辑排序子节点操作，源码仅供参考
11-29
在这个"ztree全套的增删改查实例"中，我们可以深入学习如何在实际项目中应用ZTree进行数据的管理。 首先，让我们了解ZTree的基本结构。ZTree的数据以JSON格式存储，每个节点包含id、pId（父节点id）、name等属性，...
ztree连接数据库的一些增删该查
11-02
【zTree连接数据库的增删改查】 zTree是一个基于jQuery的开源树形插件，以其高效的性能、灵活的配置和丰富的功能而受到广大开发者欢迎。它特别适用于处理树状菜单、树状数据的Web显示以及权限管理等场景。zTree采用...
ztree 树插件简单实例-example-01
03-17
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。...灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽哟 在一个页面内可同时生成多个 Tree 实例 简单的参数配置实现 灵活多变的功能
ztree树的部分js文件
11-28
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。... 灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽哟 在一个页面内可同时生成多个 Tree 实例 简单的参数配置实现 灵活多变的功能
zTree_v3.zip
09-23
zTree提供了丰富的API和事件，允许开发者进行节点的增删改查、状态控制、异步加载等操作。通过学习和实践压缩包中的示例，开发者可以轻松地将zTree集成到自己的项目中，实现功能强大的树形界面。
ztree树选中节点弹出层编辑
08-25
ztree树选中节点弹出层编辑
jquery ztree自定义编辑的树形菜单插件
05-11
jquery ztree自定义编辑的树形菜单插件----------------------------------------------------------
Ztree最强DEMO,最真实现右键维护,即增删改差功能.ajax的！
07-13
右键某个树形菜单节点，弹出小界面可以删除 编辑 增加，而且可以双击节点进入编辑模式。ajax配套的。领你进门接下来自己处理吧。祝你成功！ -------静态测试数据为您准备好了贴心吗？=）接下来看你的了---------- [ { "empNums" : 0, "id" : "D3A568C61E4742029F2AE3F3100B783A", "name" : "信息部门", "pdepartmentId" : "", "totalNums" : 2 }, { "empNums" : 2, "id" : "892F6E9E11229D41D8AAE2937E4DF97F", "name" : "测试组", "pdepartmentId" : "D3A568C61E4742029F2AE3F3100B783A", "totalNums" : 2 }, { "empNums" : 0, "id" : "6AE4D8CDD6D67A43FAD95242AA8E75C3", "name" : "开发组", "pdepartmentId" : "D3A568C61E4742029F2AE3F3100B783A", "totalNums" : 0 } ];
juqery Ztree简单demo
05-10
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发,尤其是 树状菜单、树状数据，简单实现树形结构操作，包含各种示例，大家安心下载
Ztree增删改查
03-16
ztree树增删改查 ztree树增删改查 ztree树增删改查
eclipse编辑velocity和html工具eclipsewebedit下载与安装
Ghost_T的专栏
07-15 1735
<br />这个东东用的还不是很熟悉，不过是个很好的开源插件，可以下下来玩玩：<br />下面是下载的链接：http://sourceforge.net/projects/velocitywebedit/<br />
web后台ztree树插件和dataTable表格插件
ws346348183的博客
02-04 3011
最近做一个小项目，需要自己写前端页面，找了点前端插件，用着感觉不错，记录下来备忘。 1.ztree 左侧的树图选择的ztree,上官网下载css和js文件http://www.treejs.cn/v3/main.php#_zTreeInfo,放在webapp下 显示页面如下： <%-- Created by IntelliJ IDEA. User: user Date: 2
ztree 自定义参数_ztree的自定义编辑
weixin_39606638的博客
12-22 858
组织架构树是项目中特别常见的一类组件，我一般都用ztree，前两天又用到这个，不过需求跟平时有点区别，我感觉也算比较常见，就把他稍微整理一下。需求大致是这样：一个普通的树结构，点击编辑。会弹出来操作按钮，而且并不是所有用户都有增删改的权限，对该节点不具备的权限会置灰，如下图所示。我们知道ztree是带编辑功能的，但是长这样子而且ztree的官方demo的编辑按钮是在鼠标hover到节点以后才弹出来...
ztree 点击新增按钮, 可在该节点上方增加叶子节点
最新发布
06-09
在 zTree 中，可以使用 `addNodes` 方法在指定节点下增加子节点。要在点击新增按钮后在该节点上方增加叶子节点，需要先获取该节点的父节点，然后使用 `addNodes` 方法向父节点下的指定位置插入新节点。 具体步骤...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值