首頁 > web前端 > js教程 > 主體

什麼是ztree二次載入數據

一个新手
發布: 2017-09-08 09:12:50
原創
2253 人瀏覽過

關於ztree二次載入資料。

js程式碼:

var groupSetting = {  
              /* check : {  
                  enable : true//复选框
              },  */ 
              view: {
                  showIcon: false,//是否显示节点的图标
                  showLine: true,//显示节点之间的连线。
                  expandSpeed: "slow",//节点展开、折叠时的动画速度
                  selectedMulti: true//不允许同时选中多个节点。
              },
              callback: {
                onClick: groupzTreeOnClick,//点击节点加载子节点
                },
              data : {  
                  simpleData : {  
                      enable : true,  //使用简单数据模式
                      idKey : "id",  //节点数据中保存唯一标识的属性名称
                      pIdKey : "pid", //节点数据中保存其父节点唯一标识的属性名称 
                      rootPId : 0   //用于修正根节点父节点数据   默认值:null
                  },
                  key: {
                      name:"shopName",
                    }
              }  
          };          var groupTreeNodes;          function loadOrgTree(){
              $.ajax({  
                  url : "getOrgTree.action",  
                  type : 'POST',//请求方式:post  
                  data: {shopId:1},
                  dataType : 'json',//数据传输格式:json  
                  async : false,//是否异步  
                  cache : false,//是否使用缓存 
                  error : function() {  
                      //请求失败处理函数  
                    $.messager.alert("警告",'请求失败!');  
                  },  
                  success : function(data) { 
                      if(data!=null && data!=""){
                          groupTreeNodes = data;//把后台封装好的简单Json格式赋给treeNodes  
                      }
                  }  
              });  
              var group = $("#groupTree");  
               $.fn.zTree.init(group, groupSetting, groupTreeNodes);
          }          function groupzTreeOnClick(event, treeId, treeNode) {

                var shopId=treeNode.id;                //判断该节点下是否有节点,没有就加载节点
                var treeObj = $.fn.zTree.getZTreeObj(treeId);                var node = treeObj.getNodeByTId(treeNode.tId);                if(node.children == null || node.children == "undefined"){  
                    $.ajax({  
                          url : "getOrglod.action",  
                          type : 'get',//请求方式:get  
                          data: {shopId:shopId},
                          dataType : 'json',//数据传输格式:json  
                          error : function() {  
                              //请求失败处理函数  
                            $.messager.alert("警告",'亲,请求失败!');  
                          },  
                          success : function(data) { 
                              if(data!=null && data!=""){                                    //添加新节点  
                                newNode = treeObj.addNodes(node, data);  
                              }
                          }   
                      });
                };  
        };
登入後複製

jsp程式碼:

<p data-options="region:&#39;west&#39;,split:true"  style="width:15%;">
        <ul id="groupTree" class="ztree" ></ul>
        </p>
登入後複製

引用ztree外掛程式:

<link href="<%=request.getContextPath()%>/js/zTree/zTreeStyle/zTreeStyle.css" rel="stylesheet">
<script src="<%=request.getContextPath()%>/js/zTree/jquery.ztree.core-3.5.js"></script>
        <script src="<%=request.getContextPath()%>/js/zTree/jquery.ztree.excheck-3.5.js"></script>
登入後複製


########################################################

以上是什麼是ztree二次載入數據的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板