


Partage de l'utilisation du plug-in d'arborescence zTree dans jQuery
Instructions de partage :
Le projet doit afficher les données renvoyées par l'arrière-plan sous la forme d'une arborescence et implémenter un clic sur le nœud pour ajouter les informations du nœud à l'ul à droite ; sera obtenu et utilisé après les soumissions ultérieures ; sélectionné pour obtenir un asynchrone. Le plug-in zTree pour le chargement des informations sur les nœuds s'est avéré suffisamment puissant pour répondre à presque tous les besoins. Lorsque je suis entré en contact avec lui pour la première fois, j'ai lu les partages de nombreuses personnes et les ai combinés. avec la documentation officielle de l'API, j'ai enfin réalisé la fonction. Maintenant, je vais partager le résumé de mon apprentissage.
Introduction aux effets En plus des effets par défaut de zTree, quelques opérations pratiques sont ajoutées à l'aide de l'API. ; y compris l'effet accordéon ; cliquez sur le nœud parent pour développer l'effet ; cliquez sur l'effet de la case à cocher associée au texte du nœud ; affichage du nombre de nœuds enfants de premier niveau Effet.
Ressources introduites en externe
1 <link rel="stylesheet" href="./zTree_v3-master/css/zTreeStyle/zTreeStyle.css"> 2 <script type="text/javascript" src="./jquery-1.9.1.js"></script> 3 <script type="text/javascript" src="./zTree_v3-master/js/jquery.ztree.all.min.js"></script>
Code partiel HTML
<div class="box"> <ul id="treeDemo" class="ztree"></ul> <ul id="ulright"> <li style="text-align: center;background-color: #ddd;border-bottom: 1px dashed">已选择</li> </ul> </div>
Code CSS
ul,li,body{ margin: 0; padding: 0; } .ztree li span.node_name { font-size: 16px; } .box{ width: 500px; margin:10px auto; border:3px solid #ccc; padding: 20px; border-bottom: none; } #treeDemo{ width: 200px; display: inline-block; background-color: #f1f1f1; min-height: 200px; } #ulright{ width: 200px; margin-left: 50px; min-height: 200px; border:1px solid #ccc; display: inline-block; vertical-align: top; background-color: #eeeee8; } #ulright li{ width: 100%; height: 30px; list-style: none; line-height: 30px; margin-bottom: 3px; background-color: #00b6ba; padding-left: 10px; box-sizing: border-box; } /**/ .ztree li a.curSelectedNode{ background-color: transparent; border:#00b6ba; } .ztree li span.node_name{ font-size: 18px; line-height: 18px; color: #000; } .ztree li a{ padding: 5px; vertical-align: middle; } .ztree li a:hover{ text-decoration: none; } .ztree li span.button.chk{ margin: 9px 3px; }
Code JS
//递归找到所有节点(非父节点) function getAllChildrenNodes(treeNode,result){ if (treeNode.isParent) { var childrenNodes = treeNode.children; if (childrenNodes) { for (var i = 0; i < childrenNodes.length; i++) { if(!childrenNodes[i].children){ result.push(childrenNodes[i].name); } result = getAllChildrenNodes(childrenNodes[i], result); } } } return result; } var parames = 3; //zTree的所有配置 var setting = { //zTree 的唯一标识,初始化后,等于 用户定义的 zTree 容器的 id 属性值。 treeId:"", //zTree 容器的 jQuery 对象,主要功能:便于操作,内部参数,不可修改 treeObj:null, //异步请求数据配置;当父节点没有子节点时;点击此父节点会触发请求 async:{ //打开此功能 enable: true, url:"./zTreeDemoV9.0SimpleFromV10.0.php", type:"post", //发送的父级id的字段定义;如修改,遵循格式autoParam: ["id=parentId"] autoParam: ["id"], //其他需要提交的参数["name","topic","key","ss"]转换后格式为name=topic&key=ss otherParam:["json",parames || 1,"test","2"], dataType:"json", contentType: "application/x-www-form-urlencoded", //ajax请求后的数据预处理函数 dataFilter: function(treeId,parentNode,responseData){ for(var i=0;i<responseData.length;i++){ responseData[i] = JSON.parse(responseData[i]) } return responseData; } }, //数据配置 data: { simpleData: { enable: true, idKey: "id", //修改默认的ID为自己的id pIdKey: "pid", //修改默认父级ID为自己数据的父级id rootPId: 0 //根节点的父节点id } }, //视图配置 view: { //是否显示节点前的图标 showIcon: false, //节点上a标签的样式 fontCss: { } }, //选框配置 check: { //启用复选框 enable: true, //chkStyle:"radio" //复选框父子级选择联动设置 chkboxType: { "Y": "ps", "N": "ps" } }, //事件配置 callback: { //点击复选框之前的事件 beforeCheck:function(treeId, treeNode){//如果节点是父节点,并且勾选时没有子节点,则不允许勾选;针对父节点没有展开,则没有异步加载子节点,此情况禁止点击父节点全选子节点的操作 if(treeNode.isParent && !treeNode.children){ return false; } }, //回调错误事件 onAsyncError: function(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown){ alert("初始化节点数据失败,请稍后重试"); }, //回调成功事件 onAsyncSuccess: function(event, treeId, treeNode, resData){ var zTree = $.fn.zTree.getZTreeObj("treeDemo"); console.log("数据加载成功"); var count = (treeNode.children.length); //加载成功后;在节点后面显示此父节点下有几个一级子节点 $(".ztree").find("a[title="+treeNode.name+"]").find("span[class='node_name']").html(treeNode.name+"<span>("+count+")</span>"); }, //父节点展开时的事件 onExpand: function(event, treeId, treeNode){ //zTree对象 var zTree = $.fn.zTree.getZTreeObj("treeDemo"); //获取点击的id var nowId = treeNode.id; //获取所有节点 var allNodes = zTree.getNodes(); //获取点击节点的层级 var level = treeNode.level; //定义过滤函数;获取节点层级与点击节点层级相同并且为父节点的节点 function filter(node) { return (node.level == treeNode.level && node.isParent); } //获得点击节点同级的父节点的集合 var sameLevelNodes = zTree.getNodesByFilter(filter); //遍历同级节点集合 for(var i=0;i<sameLevelNodes.length;i++){ //将非被点击父节点收起;实现手风琴效果 if(sameLevelNodes[i].id != nowId){ zTree.expandNode(sameLevelNodes[i], false, true, true); } } }, //点击事件 onClick: function(e, treeId, treeNode, clickFlag) { //tree实例 var zTree = $.fn.zTree.getZTreeObj("treeDemo"); //点击文字关联复选框 //如果不是父节点,则关联,或者是父节点,但展开状态位true是,也关联; if(!treeNode.isParent || (treeNode.isParent && treeNode.open)){ zTree.checkNode(treeNode, !treeNode.checked, true);//点击文字关联复选框 } //点击文字展开当前节点 zTree.expandNode(treeNode, true, true, true); // zTree.reAsyncChildNodes(treeNode, "refresh");//强行异步加载(存在子节点也进行加载) //手风琴效果;直接调用onExpand zTree.setting.callback.onExpand(e, treeId, treeNode); //点击节点名称和勾选节点前面的复选框逻辑相同; //直接在onClick里面调用onCheck函数;并传入所需参数 zTree.setting.callback.onCheck(e, treeId, treeNode); }, //点击复选框事件 onCheck: function(e, treeId, treeNode) { //获取右侧ul内所有li标签;用于比较当前选择复选框在右侧是否一斤存在 var rightLi = $("#ulright").find("li"); //选中的是底层节点; if(!treeNode.isParent){ //选中状态,加入到右侧 if(treeNode.checked){ //遍历右侧li,如果选中的已经存在;return for(var i=0;i<rightLi.length;i++){ if($(rightLi[i]).attr("title") == treeNode.name){ return; } } // 创建li 追加li var addLi = $("<li title="+treeNode.name+"><span></span>"); addLi.find("span").text(treeNode.name); addLi.animate({ width:"100%", height:"30" },400) addLi.appendTo($("#ulright")); //如果点击的节点存在connect字段;判断复选框状态加入到右侧ul或删除 if(treeNode.connect){ //遍历右侧li,如果选中的已经存在;return for(var i=0;i<rightLi.length;i++){ if($(rightLi[i]).attr("title") == treeNode.connect){ return; } } // 创建li 追加li var addLi = $("<li title="+treeNode.connect+"><span></span>"); addLi.find("span").text(treeNode.connect); addLi.animate({ width:"100%", height:"30" },400) addLi.appendTo($("#ulright")); } //将被勾选的节点背景颜色更改 $("#treeDemo").find("a[title="+treeNode.name+"]").css("backgroundColor","#00b6ba"); //非选中状态,删除 }else{ //将右侧的次节点对应的li删除 $("#ulright").find("li[title="+treeNode.name+"]").animate({ width:"0%", height:"0" },400,function(){ $("#ulright").find("li[title="+treeNode.name+"]").remove(); }) //取消此节点的背景颜色 $("#treeDemo").find("a[title="+treeNode.name+"]").css("backgroundColor",""); } //选中的是父节点;获取所有子节点(非父节点),判断复选框状态加入到右侧ul或删除 }else{ //调用递归函数;获取所有非父级子节点数组集合 var addNodesArray = getAllChildrenNodes(treeNode,[]); //是选中状态,加入到右侧ul if(treeNode.checked){ //定义存储右侧li的数组 var rightLiArray = []; $("#ulright li").each(function(i,v){ rightLiArray.push($(v).attr("title")) }) rightLiArray = rightLiArray.slice(1); //遍历勾选的数组集合 for(var i=0;i<addNodesArray.length;i++){ //判断此节点是否在右侧ul内;不存在则加入 if(rightLiArray.indexOf(addNodesArray[i]) == -1){ //创建li 追加li var addLi = $("<li title="+addNodesArray[i]+"><span>"+addNodesArray[i]+"</span>"); addLi.animate({ width:"100%", height:30 },400) addLi.appendTo($("#ulright")); } //将节点背景颜色修改 $("#treeDemo").find("a[title="+addNodesArray[i]+"]").css("backgroundColor","#00b6ba"); } //是非选中状态,删除 }else{ //遍历节点,执行删除操作 for(var i=0;i<addNodesArray.length;i++){ $("#ulright").find("li[title="+addNodesArray[i]+"]").animate({ width:"0%", height:0 },function(){ $(this).css("display","none"); $(this).remove(); }) //还原背景颜色 $("#treeDemo").find("a[title="+addNodesArray[i]+"]").css("backgroundColor",""); } } } }, } }; //zTree的节点信息;可一次性全部加载;可试试异步请求 var zNodes = [{ name: "数据表",//名称 id: 4,//id,子元素的pid isParent:true,//是否为父节点,默认为false pid:0//父节点id;data中的rootPId; },{ name: "测试表", id: 1, isParent:true, pid:0 },{ name: "信息表", id: 2, isParent:true, pid:0 },{ name: "作废表", id: 3, isParent:true, pid:0 }]; $(document).ready(function() { //初始化zTree; zTree容器的jquery对象/ 配置/ 节点 $.fn.zTree.init($("#treeDemo"), setting, zNodes); });
Code php backend Je suis purement front-end, et le code backend ne peut être écrit que simplement ;
<?php $pId = $_POST['id']; if($pId == 4){ $array = array('{"name":"数据表_一","id":"1_1","pid":"0"}','{"name":"数据表_二","id":"1_2","pid":"0"}','{"name":"数据表_三","id":"1_3","pid":"0"}','{"name":"数据表_四","id":"1_4","pid":"0"}','{"name":"数据表_五","id":"1_5","pid":"0"}'); }else if($pId == 1){ $array = array('{"name":"测试表_一","id":"2_1","pid":"1"}','{"name":"测试表_二","connect":"测试表_一","id":"2_2","pid":"1"}','{"name":"测试表_三","id":"2_3","pid":"1"}','{"name":"测试表_四","id":"2_4","pid":"1"}','{"name":"测试表_五","id":"2_5","pid":"1"}'); }else if($pId == 2){ $array = array('{"name":"信息表_一","id":"3_1","pid":"3"}','{"name":"信息表_二","id":"3_2","pid":"3"}','{"name":"信息表_三","id":"3_3","pid":"3"}','{"name":"信息表_四","id":"3_4","pid":"3"}','{"name":"信息表_五","id":"3_5","pid":"3"}','{"name":"信息表_五_一","id":"3_5_1","pid":"3_5"}','{"name":"信息表_五_二","id":"3_5_2","pid":"3_5"}','{"name":"信息表_三_一","id":"3_3_1","pid":"3_3"}','{"name":"信息表_三_二","id":"3_3_2","pid":"3_3"}','{"name":"信息表_三_三","id":"3_3_3","pid":"3_3"}'); }else if($pId == 3){ $array = array('{"name":"作废表_一","id":"4_1","pid":"3"}','{"name":"作废表_二","id":"4_2","pid":"3"}','{"name":"作废表_三","id":"4_3","pid":"3"}'); } echo json_encode($array);
La plupart du code js contient des commentaires ; l'API détaillée peut être consultée sur le site officiel de zTree. Entrez le code officiel du document de l'API. L'opération doit être exécutée dans un environnement serveur ;
Rendu finaux châtaignes
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

AI Hentai Generator
Générez AI Hentai gratuitement.

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Quark Netdisk et Baidu Netdisk sont tous deux des outils de stockage très pratiques. De nombreux utilisateurs se demandent si ces deux logiciels sont interopérables ? Comment partager Quark Netdisk avec Baidu Netdisk ? Laissez ce site présenter en détail aux utilisateurs comment enregistrer les fichiers Quark Network Disk sur Baidu Network Disk. Comment enregistrer des fichiers de Quark Network Disk vers Baidu Network Disk Méthode 1. Si vous souhaitez savoir comment transférer des fichiers de Quark Network Disk vers Baidu Network Disk, téléchargez d'abord les fichiers qui doivent être enregistrés sur Quark Network Disk, puis ouvrez le client Baidu Network Disk, sélectionnez le dossier dans lequel le fichier compressé doit être enregistré et double-cliquez pour ouvrir le dossier. 2. Après avoir ouvert le dossier, cliquez sur « Télécharger » dans le coin supérieur gauche de la fenêtre. 3. Recherchez le fichier compressé qui doit être téléchargé sur votre ordinateur et cliquez pour le sélectionner.

1. Tout d'abord, nous entrons dans NetEase Cloud Music, puis cliquons sur l'interface de la page d'accueil du logiciel pour accéder à l'interface de lecture de chansons. 2. Ensuite, dans l'interface de lecture de la chanson, recherchez le bouton de fonction de partage en haut à droite, comme indiqué dans l'encadré rouge de la figure ci-dessous, cliquez pour sélectionner le canal de partage dans le canal de partage, cliquez sur l'option « Partager sur » sur en bas, puis sélectionnez le premier « WeChat Moments » qui vous permet de partager du contenu avec WeChat Moments.

Récemment, le client Android Baidu Netdisk a inauguré une nouvelle version 8.0.0. Cette version apporte non seulement de nombreux changements, mais ajoute également de nombreuses fonctions pratiques. Parmi eux, le plus frappant est l’amélioration de la fonction de partage de dossiers. Désormais, les utilisateurs peuvent facilement inviter des amis à rejoindre et partager des fichiers importants au travail et dans la vie, obtenant ainsi une collaboration et un partage plus pratiques. Alors, comment partager les fichiers que vous devez partager avec vos amis ? Ci-dessous, l'éditeur de ce site vous fera une introduction détaillée, j'espère qu'il pourra vous aider ! 1) Ouvrez l'application Baidu Cloud, cliquez d'abord pour sélectionner le dossier approprié sur la page d'accueil, puis cliquez sur l'icône [...] dans le coin supérieur droit de l'interface (comme indiqué ci-dessous) 2) Cliquez ensuite sur [+] dans la colonne "Membres partagés" 】, et enfin cochez tous

Comment utiliser la méthode de requête PUT dans jQuery ? Dans jQuery, la méthode d'envoi d'une requête PUT est similaire à l'envoi d'autres types de requêtes, mais vous devez faire attention à certains détails et paramètres. Les requêtes PUT sont généralement utilisées pour mettre à jour des ressources, comme la mise à jour de données dans une base de données ou la mise à jour de fichiers sur le serveur. Ce qui suit est un exemple de code spécifique utilisant la méthode de requête PUT dans jQuery. Tout d'abord, assurez-vous d'inclure le fichier de la bibliothèque jQuery, puis vous pourrez envoyer une requête PUT via : $.ajax({u

Les imprimantes HP sont des équipements d'impression essentiels dans de nombreux bureaux. L'installation du pilote d'imprimante sur l'ordinateur peut parfaitement résoudre des problèmes tels que l'impossibilité de se connecter de l'imprimante. Alors, comment installer le pilote d'imprimante HP ? L'éditeur ci-dessous vous présentera deux méthodes d'installation du pilote d'imprimante HP. La première méthode : télécharger le pilote depuis le site officiel 1. Recherchez le site officiel de HP Chine dans le moteur de recherche et dans la colonne d'assistance, sélectionnez [Logiciel et pilotes]. 2. Sélectionnez la catégorie [Imprimante], entrez votre modèle d'imprimante dans la zone de recherche et cliquez sur [Soumettre] pour trouver votre pilote d'imprimante. 3. Sélectionnez l'imprimante correspondante en fonction de votre système informatique. Pour win10, sélectionnez le pilote pour le système win10. 4. Une fois le téléchargement réussi, recherchez-le dans le dossier

Titre : jQuery Astuces : Modifier rapidement le texte de toutes les balises a de la page En développement web, nous avons souvent besoin de modifier et d'exploiter des éléments de la page. Lorsque vous utilisez jQuery, vous devez parfois modifier le contenu textuel de toutes les balises de la page en même temps, ce qui peut économiser du temps et de l'énergie. Ce qui suit explique comment utiliser jQuery pour modifier rapidement le texte de toutes les balises a de la page et donne des exemples de code spécifiques. Tout d'abord, nous devons introduire le fichier de la bibliothèque jQuery et nous assurer que le code suivant est introduit dans la page : <

Titre : utilisez jQuery pour modifier le contenu textuel de toutes les balises. jQuery est une bibliothèque JavaScript populaire largement utilisée pour gérer les opérations DOM. En développement web, nous rencontrons souvent le besoin de modifier le contenu textuel de la balise de lien (une balise) sur la page. Cet article expliquera comment utiliser jQuery pour atteindre cet objectif et fournira des exemples de code spécifiques. Tout d’abord, nous devons introduire la bibliothèque jQuery dans la page. Ajoutez le code suivant dans le fichier HTML :

De nombreux amis ont leurs propres listes de souhaits d'achat dans le logiciel de comptabilité Meow Meow. Que dois-je faire si je souhaite les partager avec d'autres amis ? Ce qui suit présentera comment fonctionner lors du partage. 1. Cliquez pour ouvrir le logiciel de comptabilité Meow Meow sur votre téléphone mobile et cliquez sur « Mon » dans le coin inférieur droit de la page pour basculer. 2. Recherchez l'élément « Liste de courses » sur la page du centre personnel et cliquez pour l'ouvrir. 3. Ensuite, entrez dans l'interface Ma liste de courses. Sous l'onglet « Liste d'achats », vous verrez la liste de courses que vous avez définie. Cliquez sur l'option que vous souhaitez partager pour y accéder. 4. Cliquez sur l'icône des trois petits points côte à côte dans le coin supérieur droit de la page de détails de la liste. 5. Une fenêtre apparaîtra sous l'icône. Cliquez et sélectionnez l'élément « Partager la liste » pour la partager avec d'autres amis.
