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

对于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>

ztree异步加载数据amp;amp;amp;amp;amp;amp;amp;amp;给父节点动态追加子节点相关推荐

ztree java 异步_使用 zTree 异步加载
使用 zTree 异步加载使用场景可能需要展示类别很多,如果采用直接加载的方式,需要展示的数据量过大,交互十分不友好.所以采用 zTree 异步加载数据. demo 环境 SpringBoot 1 ...
php ztree异步加载数据格式,zTree异步加载简单demo
这几天花了些时间,试了试zTree自带的异步加载方式还不错. 有个奇怪的问题: 无论我在服务器设置 setContentType("text/plain;charset=UTF-8&quo ...
zTree 异步加载
前几天一直在研究zTree 怎么实现异步加载,看了很多文章头也是蒙蒙的,现在自己来总结一下,在这里先解释一下所谓的异步加载.异步加载就是数据没有一次性全部加载出来,当用户点击父节点上的"+& ...
zTree异步加载(自定义图片)
zTree官网:点击打开链接一:文件下载点击首页右下角的ztree download,选择Guihub下载点击Clone or download下载二:相关包介绍 jquery.ztree.c ...
学习下ECharts 异步加载数据
ECharts 通常数据设置在 setOption 中,如果我们需要异步加载数据,可以配合 jQuery等工具,在异步获取数据后通过 setOption 填入数据和配置项就行. ECharts 通常数 ...
ajax实现向上正在加载,向上滚动或者向下滚动分页异步加载数据(Ajax + lazyload)
/**** desc : 分页异步获取列表数据,页面向上滚动时候加载前面页码,向下滚动时加载后面页码 ajaxdata_url ajax异步的URL 如data.php page_val_name a ...
新手教程：不写JS，在MIP页中实现异步加载数据
从需求谈起:在 MIP 页中异步加载数据 MIP(移动网页加速器) 的加速原理除了靠谱的 MIP-Cache CDN 加速外,最值得一提的就是组件系统.所有 JS 交互都需要使用 MIP 组件实现 ...
JQuery Datatables 动态配置参数异步加载数据
背景需求在前端动态设置datatables需要传递到后端的查询参数,异步加载返回的数据.点击这里进入datatables中文网异步加载数据说明直接上代码 var table; var url = ...
highcharts.js两种数据绑定方式和异步加载数据的使用
一,我们先来看看异步加载数据的写法(这是使用MVC的例子) 1>js写法 <script src="~/Scripts/jquery-2.1.4.min.js"> ...

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

ztree异步加载数据amp;amp;amp;amp;amp;amp;amp;amp;给父节点动态追加子节点相关推荐

最新文章

热门文章