jquery zTree異步搜索的例子--搜所有節點

時間 2019-11-11

標籤 jquery ztree 異步搜索例子所有節點欄目 JQuery 简体版

原文原文鏈接

參考博客：javascript

https://segmentfault.com/a/1190000004657854php

https://blog.csdn.net/houpengfei111/article/details/8696436css

https://blog.csdn.net/qq_36785111/article/details/78873488html

這裏思路是：java

先異步加載全部節點，同時判斷全部節點是否異步加載完畢，若是全部節點所有加載完畢時設置搜索按鈕可點擊；node

搜索方法根據全部節點進行模糊查詢getNodesByParamFuzzy，而後將查找到的節點和其全部父節點顯示，其餘節點隱藏；jquery

代碼：web

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="resources/zTreeStyle/zTreeStyle.css" type="text/css">
<link rel="stylesheet" type="text/css" href="resources/bootstrap/bootstrap.min.css">
<title>index</title>
</head>
<body>
    <div class="container">
        <h4>Ztree異步加載使用例子</h4>
        <input type="text" id="search" /> &nbsp; <input type="button" id="btn" value="搜素" onclick="search()"/>
        <ul id="zTree" class="ztree"></ul>
    </div>
</body>
<script src="resources/js/jquery.min.js"></script>
<script type="text/javascript" src="resources/js/jquery.ztree.all.min.js"></script>
<script type="text/javascript" src="resources/js/jquery.ztree.exhide.min.js"></script>
<script type="text/javascript">
var setting = {
        async: {
            enable: true,
            url:"asyncGetNodes",
            autoParam:["id", "pid", "name"],
            dataFilter: filter
        },
        data:{
            simpleData:{
                enable: true,
                idKey:'id',
                pIdKey:'pid',
                rootPId: 0
            }
        },
        view:{
            showIcon: false
        },
        callback: {
            onAsyncSuccess:onAsyncSuccess
          }
};
$(document).ready(function(){
    initZTree();
});


/**
 * 節點加載完的回調函數，加載方式依舊是分批加載，可是不是等用戶展開節點纔去加
 * 載，而是讓它自動完成加載，這裏很差的地方是依舊要加載所有數據，因此必須等待
 * 它加載完才能使用搜索功能 
 */
function onAsyncSuccess(event, treeId, treeNode, msg) {
    //console.log('success');
    var zTreeObj = $.fn.zTree.getZTreeObj(treeId);
    var nodes = zTreeObj.transformToArray(zTreeObj.getNodes()); 
    for (var i = 0; i < nodes.length; i++) {
        // 判斷節點是否已經加載過，若是已經加載過則不須要再加載
         if (!nodes[i].zAsync) {
             zTreeObj.reAsyncChildNodes(nodes[i], 'refresh', true);
         }
    }
}


function filter(treeId, parentNode, childNodes) {
    return childNodes;
}

//初始化樹
function initZTree(){
    $.ajax({
          url:"asyncGetNodes",
          type:"post",
          dataType: "json",
          success: function(data){
              console.log(data);
              var zTreeObj = $.fn.zTree.init($("#zTree"),setting, data); 
              //讓第一個父節點展開
              var rootNode_0 = zTreeObj.getNodeByParam('pid',0,null);
              zTreeObj.expandNode(rootNode_0, true, false, false, false);
              console.log('expended');
              
              //搜索按鈕不可用
              $('#btn').attr('disabled','disabled');
              
              zTreeAsyncReady('zTree',function(){
                 console.log('已經所有加載完了'); 
                 $('#btn').removeAttr('disabled','disabled');
              });
          },
          error: function(){
              
          }
      });
}

//判斷樹節點是否已經所有加載完
function zTreeAsyncReady(treeId, f){
     var zTreeObj = $.fn.zTree.getZTreeObj(treeId); 
     
     zTreeAsyncReady.timer = setInterval(function(){
         var nodes = zTreeObj.getNodesByFilter(function(node) {
            return !node.zAsync;
         });
         
         if(nodes.length==0){
             clearInterval(zTreeAsyncReady.timer);
             zTreeAsyncReady.timer == null;
             zTreeAsyncReady.done = true;
         }
         
         console.log('沒執行完');
         
         if (zTreeAsyncReady.done) {
              f();
         }
     },100);
}

/**
 * 搜索方法
 */
function search(){
    var treeObj = $.fn.zTree.getZTreeObj('zTree');
    var value = $.trim($('#search').val());
    
    if(value == ""){
        var hides = treeObj.getNodesByParam("isHidden", true);    //顯示全部隱藏節點
        treeObj.showNodes(hides);
        return;
    }
    
    //查找節點
    var nodes = treeObj.getNodesByParamFuzzy('name', value);
    if(nodes.length==0){
        alert('未搜索到數據！');
        return;
    }
    
    //隱藏全部節點
    var all = treeObj.transformToArray(treeObj.getNodes());
    for (var i = 0; i < all.length; i++) {
        treeObj.hideNode(all[i]);
    }
    
    //展現查找到的節點
    for (var i = 0; i < nodes.length; i++) {
        treeObj.showNode(nodes[i]);//顯示查到節點
        var parentNodes = [];
        getParentsNode(nodes[i], parentNodes);
        treeObj.showNodes(parentNodes);    ////顯示其全部父節點
        treeObj.expandAll(true);//展開全部查詢到的內容
    }
}

/**
 * 獲取全部節點的父節點
 */
function getParentsNode(node, array){
    var parentNode = node.getParentNode();
    if(parentNode!=null){
        array.push(parentNode);
        getParentsNode(parentNode, array);
    }
    return;
}

</script>
</html>

後臺異步加載節點的代碼：僅僅是模擬使用的；很簡單的模擬：ajax

package com.cy.controller;

import java.util.ArrayList;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.alibaba.fastjson.JSON;
import com.test.model.Node;

@Controller
public class ZtreeController {
    @RequestMapping("/asyncGetNodes")
    @ResponseBody
    public List<Node> asyncGetNodes(String id, String pid, String name) throws Exception{
        List<Node> nodeList = new ArrayList<Node>();
        if(id==null){
            nodeList.add(new Node("1","0","硬件規格","false","true"));
            nodeList.add(new Node("2","0","軟件規格","false","true"));
            return nodeList;
        }
        
        if(id.equals("1")){
            nodeList.add(new Node("10","1","單板","false","true"));
            nodeList.add(new Node("11","1","子卡","false","true"));
            nodeList.add(new Node("12","1","設備","false","true"));
        }else if(id.equals("2")){
            nodeList.add(new Node("20","2","java","false","true"));
            nodeList.add(new Node("21","2","jscript","false","true"));
            nodeList.add(new Node("22","2","php","false","true"));
        }else if(id.equals("10")){
            nodeList.add(new Node("100",id,"單板_00","false","true"));
            nodeList.add(new Node("101",id,"單板_00","false","false"));
        }else if(id.equals("100")){
            nodeList.add(new Node("1000",id,"單板_00_00","false","false"));
        }
        
        Thread.sleep(1000);
        return nodeList;
    }
}

View Code

若是有更好的ztree異步搜索的方法，歡迎大夥留言。不勝感激！！spring

效果：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。