`
hopechart
  • 浏览: 5278 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

ztree顶级节点不具备删除按钮其下子节点具备

 
阅读更多

ztree顶级节点不具备删除按钮其下子节点具备，需要设置showRemoveBtn: setRemoveBtn

edit: {
    enable: true,
    showRemoveBtn: setRemoveBtn,
}

 

function setRemoveBtn(treeId, treeNode) {

      //判断为顶级节点则不显示删除按钮
      if(treeNode.level == 0)
            return false;
            else
               return true;
              
        }

 

<!DOCTYPE html>
<HTML>
<HEAD>
	<TITLE> ztree仅并列同级进行推拽(同一个组织下不同部门排序拖拽)</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.1.js"></script>
    <script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.1.js"></script>
	<script type="text/javascript" src="../../../js/jquery.ztree.exedit-3.1.js"></script>
	<SCRIPT type="text/javascript">
		<!--
		var dragId;
		var setting = {
			view: {
				addHoverDom: addHoverDom,
				removeHoverDom: removeHoverDom,
				selectedMulti: false
			},
			edit: {
				enable: true,
				showRemoveBtn: setRemoveBtn,
				drag: {
			          prev: true,
			          next: true,
			          inner: false
		        },
				editNameSelectAll: true
			},
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: {
				beforeDrag: beforeDrag,
				beforeEditName: beforeEditName,
				beforeRemove: beforeRemove,
				beforeRename: beforeRename,
				onRemove: onRemove,
				onRename: onRename,
				beforeDrag: beforeDrag,
				beforeDrop: beforeDrop
			}
		};
 
		var zNodes =[
			{ id:1, pId:0, name:"总公司", open:true, iconSkin:"pIcon01"},
			{ id:2, pId:1, name:"一分公司", open:true, iconSkin:"pIcon02"},
			{ id:3, pId:2, name:"总经办", open:true, iconSkin:"pIcon02"},
			{ id:4, pId:3, name:"总经理", open:true, iconSkin:"pIcon01"},
			{ id:5, pId:4, name:"研发经理", open:true, iconSkin:"pIcon01"},
			{ id:6, pId:5, name:"研发部", iconSkin:"icon01"},
			{ id:7, pId:3, name:"销售经理"},
			{ id:8, pId:3, name:"售后经理"},
			{ id:9, pId:1, name:"二分公司",open:true, iconSkin:"icon02"}
		];
 
		var log, className = "dark";
		function beforeDrag(treeId, treeNodes) {
			return false;
		}
		function beforeEditName(treeId, treeNode) {
			className = (className === "dark" ? "":"dark");
			showLog("[ "+getTime()+" beforeEditName ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			zTree.selectNode(treeNode);
			return true;
		}
		function beforeRemove(treeId, treeNode) {
			className = (className === "dark" ? "":"dark");
			showLog("[ "+getTime()+" beforeRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			zTree.selectNode(treeNode);
			return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");
		}
		function onRemove(e, treeId, treeNode) {
			showLog("[ "+getTime()+" onRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
		}
		function beforeRename(treeId, treeNode, newName) {
			className = (className === "dark" ? "":"dark");
			showLog("[ "+getTime()+" beforeRename ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
			if (newName.length == 0) {
				alert("节点名称不能为空.");
				var zTree = $.fn.zTree.getZTreeObj("treeDemo");
				setTimeout(function(){zTree.editName(treeNode)}, 10);
				return false;
			}
			return true;
		}
		function onRename(e, treeId, treeNode) {
			showLog("[ "+getTime()+" onRename ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
		}
		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 addHoverDom(treeId, treeNode) {
			var sObj = $("#" + treeNode.tId + "_span");
			if (treeNode.editNameFlag || $("#addBtn_"+treeNode.id).length>0) return;
			var addStr = "<button type='button' class='add' id='addBtn_" + treeNode.id
				+ "' title='add node' onfocus='this.blur();'></button>";
			sObj.append(addStr);
			var btn = $("#addBtn_"+treeNode.id);
			if (btn) btn.bind("click", function(){
				var zTree = $.fn.zTree.getZTreeObj("treeDemo");
				zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"new node" + (newCount++)});
				return false;
			});
		}
		function setRemoveBtn(treeId, treeNode) {
		    if(treeNode.level == 0)
	           return false;
            else
               return true;
               
        }
       
		function removeHoverDom(treeId, treeNode) {
			$("#addBtn_"+treeNode.id).unbind().remove();
		};
		
		function beforeDrag(treeId, treeNodes) {
			for (var i=0,l=treeNodes.length; i<l; i++) {
				   dragId = treeNodes[i].pId;
				if (treeNodes[i].drag === false) {
					return false;
				}
			}
			return true;
		}
		function beforeDrop(treeId, treeNodes, targetNode, moveType) {
				  if(targetNode.pId == dragId){
				    return true;
				  }else{
			        return false;
			      }
		}
		
		function selectAll() {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			zTree.setting.edit.editNameSelectAll =  $("#selectAll").attr("checked");
		};
		$(document).ready(function(){
			$.fn.zTree.init($("#treeDemo"), setting, zNodes);
			$("#selectAll").bind("click", selectAll);
		});
		-->
	</SCRIPT>
<style type="text/css">
.ztree li button.pIcon01_ico_open{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/1_open.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li button.pIcon01_ico_close{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/1_close.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li button.pIcon02_ico_open, .ztree li button.pIcon02_ico_close{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/2.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li button.icon01_ico_docu{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/3.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li button.icon02_ico_docu{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/4.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li button.icon03_ico_docu{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/5.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li button.icon04_ico_docu{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/6.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li button.icon05_ico_docu{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/7.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li button.icon06_ico_docu{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/8.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li button.add {margin-left:2px; margin-right: -1px; background-position:-144px 0; vertical-align:top; *vertical-align:middle}
</style>
 </HEAD>

<BODY>
<div style="height:500px;">
	<ul id="treeDemo" class="ztree"></ul>
</div>
</BODY>
</HTML>

 

0
顶
1
踩
分享到：
ztree仅并列同级进行推拽(同一个组织下不 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    解决ztree添加节点不显示问题

    ### 解决ztree添加节点不显示问题 #### 一、问题背景 在使用zTree库进行前端开发时，可能会遇到一个常见的问题：当尝试通过zTree API动态添加新节点时，新添加的节点无法正常显示在界面上。这个问题在zTree的最新...

    ztree树界节点删除，移动

    ztree树界节点删除，移动 利用ztree插件对树节点进行删除，移动

    jquery ztree 根目录只能够添加一级目录，子节点添加新的节点到当前节点下方

    例如，如果要在当前选中的节点下添加子节点，可以使用`var parentNode = zTree.getSelectedNodes()[0]; zTree.addNodes(parentNode, newNode);`。 4. **事件处理**：如果在某个特定事件（如点击、拖拽）后添加节点...

    js树插件zTree获取所有选中节点数据的方法

    本文实例讲述了js树插件zTree获取所有选中节点数据的方法。分享给大家供大家参考。具体分析如下： 由于刚接触Tree方面的东西。在网上看到了zTree，是中国人写的。所以API肯定是中文的。而且评论也很好。所以尝试用...

    ztree实现左右两棵树的节点移动

    在"ztree实现左右两棵树的节点移动"这个主题下，我们主要关注的是如何实现节点在两棵树之间的转移。 1. **节点移动逻辑**： - 左移右：当用户选择左侧树的一个节点并将其移动到右侧时，我们需要在后台处理这个动作...

    struts2文档整理 ztree树节点调用iframe

    ### Struts2 文档整理：ZTree树节点调用Iframe #### 一、概述 在Web开发过程中，经常需要构建具有层次结构的数据展示界面，例如文件管理器、组织架构等场景。`ZTree`是一款非常强大的前端插件，能够帮助开发者轻松...

    ztree根据文本内筛选叶子节，并改变叶子节点字体颜色

    叶子节点通常指的是没有子节点的节点，它们通常是数据的终端。 在"ztree根据文本内筛选叶子节，并改变叶子节点字体颜色"这个任务中，我们需要做两部分工作： 1. **文本内筛选**：我们需要编写JavaScript代码来遍历...

    ztree树选中节点弹出层编辑

    "ztree树选中节点弹出层编辑"这个话题涉及到ZTree的一个重要功能，即用户在选择树形结构中的某个节点时，会触发一个弹出层来编辑该节点的相关信息。这种交互设计提高了用户体验，使得数据的修改和管理更为直观和便捷...

    ztree树节点前面有checkbox

    var zTree = $.fn.zTree.getZTreeObj("treeDemo"), type = { "Y":'ps', "N":'ps'}; zTree.setting.check.chkboxType = type; }); function aa(){ var treeObj=$.fn.zTree.getZTreeObj("treeDemo"); ...

    ztree节点后面复选下拉框

    同时，`check.chkboxType`用于控制父节点和子节点的复选状态联动关系，例如`{ "Y": "ps", "N": "ps" }`表示父节点被选中时，所有子节点都被选中，反之则全取消。 下拉框的添加则可能需要自定义扩展ZTree的功能，...

    zTree异步加载子节点针对大数据量数列表

    最近项目中有一个比较大型的树节点加载，网上面也看过一些解决方案，感觉都不是很好，也有很多误区，比如单击节点时加载子...ztree fileter方法是在每次展开时都会执行，所以根据不同的请求达到异步加载子节点的需求。

    zTree实现节点修改的实时刷新功能

    例如，在test1234节点下新建子节点首先要选中test1234节点，然后添加成功后，根据test1234结点的TID去后台请求对应子节点数据，实现动态刷新。删除节点类似。 三、代码实现 1、初始化时必须设置配置 在初始化...

    ztree将节点数据提交给Server端

    ztree将节点数据提交给Server端例子： 将页面的节点ID遍历解析成字符串形式提交到后台。 文件分为MyEclipse项目ztest.rar和war包。 war包tomcat下运行，打开http://localhost:8080/ztest测试。 开发环境： MyEclipse...

    jQuery插件zTree实现清空选中第一个节点所有子节点的方法

    4. **实现清空子节点功能**：编写一个名为`removeChildNodesTree`的函数，该函数通过`$.fn.zTree.getZTreeObj()`获取zTree对象，然后遍历所有节点，找到第一个节点并移除其所有子节点。 ```javascript function ...

    获取ztree节点数据

    在很多场景下，我们需要获取用户在界面上选择的节点信息，以便进行后续操作，如保存、删除等。 #### zTree简介 zTree是一款高度定制化的树形插件，支持多种树结构数据展示，并提供了丰富的API接口来操作树节点。它...

    纯js的树形菜单(添加删除节点)

    2. 如果选择的是父节点，还需递归删除其所有子节点。 3. 使用jQuery的`.remove()`方法移除选定节点。 在HTMLPage1.htm中，可能包含了HTML结构以及事件处理函数的定义；而jquery-1.4.1.js是jQuery库的引用，确保了...

    jQuery插件zTree实现删除树节点的方法示例

    zTree插件支持节点的动态添加、删除、编辑等操作，本知识点将重点介绍zTree中删除节点的实现方法。 首先，要使用zTree，必须确保已经正确引入了zTree所需的JavaScript和CSS文件。从给定的内容部分来看，实例中引入...

    jQuery zTree 异步加载添加子节点重复问题

    在解决jQuery zTree异步加载添加子节点时出现的重复问题之前，我们首先需要理解zTree树插件的基本特性和其工作原理。zTree是一个基于jQuery的树形控件，它支持多功能的树形结构展示，并且可以轻松实现节点的增删改查...

    zTree获取当前节点的下一级子节点数实例

    在本文中，我们将深入探讨如何使用zTree这个流行的JavaScript插件来获取当前节点的下一级子节点数。zTree是一款功能强大的树形控件，它提供了丰富的API接口和灵活的配置选项，使得开发者能够轻松地在网页中创建交互...

    带搜索的ztree 结果高亮

    通过JavaScript API，我们可以动态加载、添加、删除和修改这些节点。在HTML页面中，ZTree会根据这些数据生成对应的DOM元素，展示为树形结构。 搜索功能的实现通常涉及到前端的实时查询和高亮显示。当用户在搜索框中...

Magicbox
Global site tag (gtag.js) - Google Analytics