ztree异步加载数据&amp;amp;amp;&amp;amp;amp;给父节点动态追加子节点

最新推荐文章于 2020-09-09 16:21:28 发布

心如猛虎细嗅蔷薇

最新推荐文章于 2020-09-09 16:21:28 发布

阅读量580

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/weixin_39816740/article/details/80858337

版权

web前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

对于ztree，整了两天了，在数据库中查出json符合格式的数据，这很好整，但是在ztree追加时出现重复节点，找了半天资源，最终还是用ztree自带的异步加载解决问题，特此记录一下下！！如果不足请指出（一种颜色是一段）

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="../common/common.jsp"%>
<%@ taglib uri="/WEB-INF/PageInfo.tld" prefix="m"%>
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<%@ include file="../common/head.html"%>
<style>
.main {
   text-align: center; /*让div内部文字居中*/
   background-color: #cfdbdb;
   border-radius: 20px;
   width: 300px;
   height: 320px;
   margin: auto;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
}
</style>
</head>
<body>
<！--跑马灯-->
<marquee width=100%,height=200 scrollamount=15 bgcolor=#97FFFF> <a href=#><FONT face=楷体_GB2312 color=#383838 size=3 >从当前选中用户${JyMember.username }开始,仅支持向下查看7级(含自己)</a></marquee>

<div class="main">
       <div>
           <ul id="treeFenXiao" class="ztree"></ul>
       </div>
   </div>


</body>
</html>
<%@ include file="../common/bottom.html"%>
   <script type="text/javascript">

   var setting = {
           async : {
                enable : true,//是否为异步加载
                url : "<%=basePath%>/manger/jyMember/xia.do",//相关的请求网址，此请求是等初始化的ajax加载完后才会去执行
                autoParam:['id','${JyMember.id }'], //请求携带的参数
                type:"post",
                dataFilter: filter //请求成功后处理方法
            },
           data: {
               simpleData: {
                   enable:true,//设置简单数据类型
                   idKey: "id", //自己的id
                   pIdKey: "pId", //父id
                   rootPId:0    //根节点id
               }
           },
           view:{
                    showIcon: false //true / false 分别表示显示 / 隐藏图标
                }

   }

   function filter(treeId, parentNode, childNodes) {//childNodes返回的参数在此处
       if (childNodes.xia) {
           console.log(childNodes.xia)
           $(function() {
               var treeObj = $.fn.zTree.getZTreeObj("treeFenXiao");// 传入参数为ul的id
               var selectedNode = treeObj.getSelectedNodes();
               var newNodes =childNodes.xia ;
                        newNode = treeObj.addNodes(parentNode, newNodes);
       });
       }
   // return childNodes;//此处注掉对我没用
}
   $(function() {
       initZTree();//初始化树

    })
    //初始化树
function initZTree(){
    $.ajax({
          url:"<%=basePath%>/manger/jyMember/xiaChu.do?id=${JyMember.id }",//加载基础节点数据
          type:"post",
          dataType: "json",
          success: function(data){//数据成功后展开这些基础数据
              console.log(data.chushi);
              var zTreeObj = $.fn.zTree.init($("#treeFenXiao"),setting, data.chushi);
              //让第一个父节点展开
              var rootNode_0 = zTreeObj.getNodeByParam('pid',0,null);
              zTreeObj.expandNode(rootNode_0, true, false, false, false);
          },
          error: function(){

          }
      });
}
   </script>

心如猛虎细嗅蔷薇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ztree异步加载数据&amp;amp;amp;&amp;amp;amp;给父节点动态追加子节点

对于ztree，整了两天了，在数据库中查出json符合格式的数据，这很好整，但是在ztree追加时出现重复节点，找了半天资源，最终还是用ztree自带的异步加载解决问题，特此记录一下下！！如果不足请指出
复制链接

扫一扫