


ztree implements dynamic spanning tree on the left and content details function example sharing on the right
This article mainly shares with you ztree's function of dynamically generating trees on the left and content details on the right. zTree uses the core code of JQuery to implement a set of Tree plug-ins that can complete most common functions. It is compatible with IE, FireFox, Chrome and other browsers. Multiple Tree instances can be generated simultaneously in one page. Supports JSON data. Supports one-time static generation and Ajax asynchronous loading. Supports multiple event responses and feedback. Supports tree node movement, editing, and deletion. Supports arbitrary skin/personalized icon changes. (relying on css).
Page prototype:
Functional requirements: Click on the child node in the tree on the left to send a request to the background and display the requested information on the right
Front-end code implementation in the form:
Introduce css document:
<link rel="stylesheet" type="text/css" href="<c:url value=" rel="external nofollow" rel="external nofollow" rel="external nofollow" /js/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css"/>" /> <link rel="stylesheet" type="text/css" href="<c:url value=" rel="external nofollow" rel="external nofollow" rel="external nofollow" /js/bower_components/ztree_v3/css/zTreeStyle/zTreeStyle.css"/>" /> <link rel="stylesheet" type="text/css" href="<c:url value=" rel="external nofollow" rel="external nofollow" rel="external nofollow" /css/global/ztree_custom.css"/>" />
Introduce js file:
<script type="text/javascript" src="<c:url value="/js/bower_components/ztree_v3/js/jquery.ztree.core-3.5.min.js"/>"></script> <script type="text/javascript" src="<c:url value="/js/bower_components/ztree_v3/js/jquery.ztree.exedit-3.5.min.js"/>"></script> <script type="text/javascript" src="<c:url value="/js/bower_components/ztree_v3/js/jquery.ztree.excheck-3.5.min.js"/>"></script> <script src="<c:url value="/js/system/organ.js"/>"></script>
jsp part: The HTML part is very simple, it is quite In the p
<ul id="organTree" class="ztree"style=" overflow :auto;"></ul>
js part of a blooming tree:
Set tree nodes
var setting = { check : { enable : false }, view : { selectedMulti : false, // addHoverDom: addHoverDom, // removeHoverDom: removeHoverDom, }, data : { key : { name : "name" }, simpleData : { enable : true, idKey : "id", pIdKey : "pId" } }, edit : { enable : true, removeTitle : "删除节点", showRemoveBtn : $("#pdelete").val() == "delete" ? setRemoveBtn : false, showRenameBtn : false }, callback : { // onRightClick : onRightClick, // 单击事件 onClick : zTreeOnClick, onNodeCreated : zTreeOnNodeCreated, beforeRemove : zTreeBeforeRemove, onRemove : zTreeOnRemove } };
Initialization, determine whether to expand the node:
var zTreeObj; function initTree() { $.get(basePath + "/system/organ/getOrganTreeList", function(data) { zTreeObj = $.fn.zTree.init($("#organTree"), setting, data.returnData.organTree); zTreeObj.expandAll(false); }); } // 给生成的节点添加class属性 // 控制节点是否显示删除图标 function setRemoveBtn(treeId, treeNode) { return treeNode.pId != null; } // 给生成的节点添加class属性 function zTreeOnNodeCreated(event, treeId, treeNode) { var str = treeNode.tId + "_span"; $("#" + str).addClass(treeNode.type); }
Click event , like a background request, requesting the information on the right
// 单击事件,向后台发起请求 function zTreeOnClick(event, treeId, treeNode) { if (treeNode.id == "1") { return; } $("#moreinform").show(); $("#baseinform").hide(); $(".po_phone_num_r").css("display", "none"); $(" .po_email_r").css("display", "none"); if (treeNode.type == "organ") { $("#organ").html("部门名称"); $("#Partman").show(); $("#Email").hide(); $("#sorgan").html("上级部门"); $("#partaddress").html("部门地址"); $("#partman").html("部门负责人"); $("#parttel").html("手机"); if (treeNode.id == "1") { $("#po").hide(); } else { $("#po").show(); } $.ajax({ url : basePath + "/system/organ/" + treeNode.id, type : "get", success : function(data) { var organ = data.returnData.organ; $("#organId").val(organ.organId); $("#sex").hide(); $("#name").val(organ.organName); $("#diz").val(organ.address); $("#tel").val(organ.phone); $("#manage").val(organ.manager); $("#parentOrgan").val(organ.parentId); } }); } else { $("#po").show(); $("#organ").html("姓名"); $("#sex").show(); $("#Email").show(); $("#Partman").hide(); $("#sorgan").html("所属部门"); $("#partaddress").html("职位"); $("#parttel").html("手机"); $.ajax({ url : basePath + "/system/organ/getStaff/" + treeNode.id, type : "get", success : function(data) { var staff = data.returnData.staff; $("#organId").val(staff.id); $("#name").val(staff.name); $("#diz").val(staff.position); $("#tel").val(staff.tel); $("#profession").val(staff.sex) $("#Email02").val(staff.email); $("#parentOrgan").val(staff.organId); } }); } }
Delete event:
##
// 删除节点事件 function zTreeOnRemove(event, treeId, treeNode) { if (treeNode.type == "organ") { $.ajax({ url : basePath + "/system/organ/" + treeNode.id, type : "DELETE", success : function(data) { $("#confirmDialog").modal("hide"); // 点击删除按钮,隐藏弹框 if (customGlobal.ajaxCallback(data)) { location.reload(); } } }); } else { $.ajax({ url : basePath + "/system/organ/deleteStaff/" + treeNode.id, type : "DELETE", success : function(data) { $("#confirmDialog").modal("hide"); // 点击删除按钮,隐藏弹框 if (customGlobal.ajaxCallback(data)) { initTree(); } } }); } }
Example Explain jQuery's use of zTree plug-in to implement drag-and-drop function
Detailed examples of zTree jQuery tree plug-in usage
Detailed examples of jQuery's use of ztree to implement tree shapes sheet
The above is the detailed content of ztree implements dynamic spanning tree on the left and content details function example sharing on the right. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

You can measure a screen's refresh rate by counting the number of times the image updates per second. DRR is a new feature included in Windows 11 that helps you save battery life while still providing a smoother display, but it's no surprise when it doesn't work properly. Screens with higher refresh rates are expected to become more common as more manufacturers announce plans to stop producing 60Hz monitors. This will result in smoother scrolling and better gaming, but it will come at the cost of reduced battery life. However, the dynamic refresh rate feature in this iteration of the OS is a nifty addition that can have a big impact on your overall experience. Read on as we discuss what to do if Windows 11’s dynamic refresh rate isn’t working

On iPhone, Apple's screen recording feature records a video of what you're doing on the screen, which is useful if you want to capture gameplay, walk someone through a tutorial in an app, demonstrate a bug, or anything else. On older iPhones that have a notch at the top of the display, the notch is not visible in screen recording, as it should be. But on newer iPhones with the Dynamic Island cutout, such as the iPhone 14 Pro and iPhone 14 Pro Max, the Dynamic Island animation displays the red recording indicator, which causes the cutout to be visible in captured videos. this might

When creating a virtual machine, you will be asked to select a disk type, you can select fixed disk or dynamic disk. What if you choose fixed disks and later realize you need dynamic disks, or vice versa? Good! You can convert one to the other. In this post, we will see how to convert VirtualBox fixed disk to dynamic disk and vice versa. A dynamic disk is a virtual hard disk that initially has a small size and grows in size as you store data in the virtual machine. Dynamic disks are very efficient at saving storage space because they only take up as much host storage space as needed. However, as disk capacity expands, your computer's performance may be slightly affected. Fixed disks and dynamic disks are commonly used in virtual machines

If you want to convert a dynamic disk to a basic disk in Windows 11, you should create a backup first as the process will erase all data in it. Why should you convert dynamic disk to basic disk in Windows 11? According to Microsoft, dynamic disks have been deprecated from Windows and their use is no longer recommended. Additionally, Windows Home Edition does not support dynamic disks, so you will not be able to access these logical drives. If you want to combine more disks into a larger volume, it is recommended to use Basic Disks or Storage Spaces. In this article, we will show you how to convert dynamic disk to basic disk on Windows 11 How to convert dynamic disk to basic disk in Windows 11? In the beginning

Generating random data is very important in the field of data science. From building neural network predictions, stock market data, etc., date is usually used as one of the parameters. We may need to generate random numbers between two dates for statistical analysis. This article will show how to generate k random dates between two given dates using the random and datetime modules. Datetime is Python’s built-in library for handling time. On the other hand, the random module helps in generating random numbers. So we can combine random and datetime modules to generate a random date between two dates. Syntax random.randint (start, end, k) random here refers to the Python random library. The randint method uses three important

Imagine you are looking for something on your system but are not sure which application to open or select. This is where the Live Tiles feature comes into play. A live tile for any supported application can be added to the desktop or Windows system's Start menu, with its tiles changing frequently. LiveTiles make application widgets come alive in a very pleasing way. Not just for its appearance, but even for convenience. Suppose you are using whatsapp or facebook application on your system, wouldn't it be convenient if the number of notifications is displayed on the application icon? This is possible if any such supported app is added as a live tile. Let’s see how to do it in Windows

How to use PHP to generate refreshable image verification codes. With the development of the Internet, in order to prevent malicious attacks and automatic machine operations, many websites use verification codes for user verification. One common type of verification code is the image verification code, which generates a picture containing random characters and requires the user to enter the correct characters before proceeding. This article will introduce how to use PHP to generate refreshable image verification codes and provide specific code examples. Step 1: Create a verification code image First, we need to create a verification code image

Natural language generation is an artificial intelligence technology that converts data into natural language text. In today's big data era, more and more businesses need to visualize or present data to users, and natural language generation is a very effective method. PHP is a very popular server-side scripting language that can be used to develop web applications. This article will briefly introduce how to use PHP for basic natural language generation. Introducing the natural language generation library The function library that comes with PHP does not include the functions required for natural language generation, so
