社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > js教程 > jquery ztree實作模糊搜尋功能_jquery

jquery ztree實作模糊搜尋功能_jquery

WBOY
發布： 2016-05-16 15:13:48
原創
2401 人瀏覽過

本文分享了jquery ztree實現模糊搜尋功能兩個實例，供大家參考，具體內容如下

ztree官方demo程式碼裡的:
根據參數找出節點
以上文件修改成以下程式碼

<!DOCTYPE html>
<HTML>
<HEAD>
  <TITLE> ZTREE DEMO - getNodeByParam / getNodesByParam / getNodesByParamFuzzy</TITLE>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="../../../css/demo.css" type="text/css">
  <link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
  <script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
  <script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script>
  <script type="text/javascript" src="../../../js/jquery.ztree.exhide-3.5.js"></script>
<!--<script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.5.js"></script>
  <script type="text/javascript" src="../../../js/jquery.ztree.exedit-3.5.js"></script>-->
  <SCRIPT type="text/javascript">
     
    var setting = {
      data: {
        key: {
          title: "t"
        },
        simpleData: {
          enable: true
        }        
      }
    };
 
    var zNodes =[
      { id:1, pId:0, name:"节点属性搜索演示 1", t:"id=1"},
      { id:11, pId:1, name:"关键字可以是名字", t:"id=11"},
      { id:12, pId:1, name:"关键字可以是level", t:"id=12"},
      { id:13, pId:1, name:"关键字可以是id", t:"id=13"},
      { id:14, pId:1, name:"关键字可以是各种属性", t:"id=14"},
      { id:2, pId:0, name:"节点搜索演示 2", t:"id=2"},
      { id:21, pId:2, name:"可以只搜索一个节点", t:"id=21"},
      { id:22, pId:2, name:"可以搜索节点集合", t:"id=22"},
      { id:23, pId:2, name:"搜我吧", t:"id=23"},
      { id:3, pId:0, name:"节点搜索演示 3", t:"id=3"},
      { id:31, pId:3, name:"我的 id 是: 31", t:"id=31"},
      { id:32, pId:31, name:"我的 id 是: 32", t:"id=32"},
      { id:33, pId:32, name:"我的 id 是: 33", t:"id=33"}
    ];
 
    function focusKey(e) {
      if (key.hasClass("empty")) {
        key.removeClass("empty");
      }
    }
    function blurKey(e) {
      if (key.get(0).value === "") {
        key.addClass("empty");
      }
    }
    var lastValue = "", nodeList = [], fontCss = {};
    function clickRadio(e) {
      lastValue = "";
      searchNode(e);
    }
    function searchNode(e) {
      var zTree = $.fn.zTree.getZTreeObj("treeDemo");
      if (!$("#getNodesByFilter").attr("checked")) {
        var value = $.trim(key.get(0).value);
        var keyType = "";
        if ($("#name").attr("checked")) {
          keyType = "name";
        } else if ($("#level").attr("checked")) {
          keyType = "level";
          value = parseInt(value);
        } else if ($("#id").attr("checked")) {
          keyType = "id";
          value = parseInt(value);
        }
        if (key.hasClass("empty")) {
          value = "";
        }
        if (lastValue === value) return;
        lastValue = value;
        if (value === "") {
          zTree.showNodes(zTree.transformToArray(zTree.getNodes())) ;
          return;
        }
 
        if ($("#getNodeByParam").attr("checked")) {
          var node = zTree.getNodeByParam(keyType, value);
          if (node === null) {
            nodeList = [];
          } else {
            nodeList = [node];
          }
        } else if ($("#getNodesByParam").attr("checked")) {
          nodeList = zTree.getNodesByParam(keyType, value);
        } else if ($("#getNodesByParamFuzzy").attr("checked")) {
          nodeList = zTree.getNodesByParamFuzzy(keyType, value);
        }
      } else {
        updateNodes(false);
        nodeList = zTree.getNodesByFilter(filter);
      }
      /**不查询父级
      for(var x = 0 ; x<nodeList.length ; x++){
        if(nodeList[x].isParent){
          nodeList.splice(x--,1);
        }
      }
      */
      nodeList = zTree.transformToArray(nodeList);
      updateNodes(true);
 
    }
    function updateNodes(highlight) {
      var zTree = $.fn.zTree.getZTreeObj("treeDemo");
      var allNode = zTree.transformToArray(zTree.getNodes());
      zTree.hideNodes(allNode);
      for(var n in nodeList){
        findParent(zTree,nodeList[n]);
      }
       
      zTree.showNodes(nodeList);
    }
     
    function findParent(zTree,node){
      zTree.expandNode(node,true,false,false);
      var pNode = node.getParentNode();
      if(pNode != null){
        nodeList.push(pNode);
        findParent(zTree,pNode);
      }
       
    }
     
     
    function getFontCss(treeId, treeNode) {
      return (!!treeNode.highlight) &#63; {color:"#A60000", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"};
    }
    function filter(node) {
      return !node.isParent && node.isFirstNode;
    }
 
    var key;
    $(document).ready(function(){
      $.fn.zTree.init($("#treeDemo"), setting, zNodes);
      key = $("#key");
      key.bind("focus", focusKey)
      .bind("blur", blurKey)
      .bind("propertychange", searchNode)
      .bind("input", searchNode);
       
      $("#name").bind("change", clickRadio);
      $("#level").bind("change", clickRadio);
      $("#id").bind("change", clickRadio);
      $("#getNodeByParam").bind("change", clickRadio);
      $("#getNodesByParam").bind("change", clickRadio);
      $("#getNodesByParamFuzzy").bind("change", clickRadio);
      $("#getNodesByFilter").bind("change", clickRadio);
       
       
    });
     
  </SCRIPT>
</HEAD>
 
<BODY>
<h1>根据参数查找节点</h1>
<h6>[ 文件路径: core/searchNodes.html ]</h6>
<div class="content_wrap">
  <div class="zTreeDemoBackground left">
    <ul id="treeDemo" class="ztree"></ul>
  </div>
  <div class="right">
    <ul class="info">
      <li class="title"><h2>1、getNodeByParam / getNodesByParam / getNodesByParamFuzzy 方法操作说明</h2>
        <ul class="list">
        <li class="highlight_red">使用 zTreeObj.getNodeByParam / getNodesByParam / getNodesByParamFuzzy / getNodeByTId 方法，详细请参见 API 文档中的相关内容</li>
        <li><p>搜索试试看：<br/>
            属性值( value )：<input type="text" id="key" value="" class="empty" /><br/>
            属性( key )：<input type="radio" id="name" name="keyType" class="radio first" checked /><span>name (string)</span><br/>
            <input type="radio" id="level" name="keyType" class="radio" style="margin-left:68px;" /><span>level (number) ... 根节点 level = 0</span><br/>
            <input type="radio" id="id" name="keyType" class="radio" style="margin-left:68px;" /><span>id (number)</span><br/>
            方法：<input type="radio" id="getNodeByParam" name="funType" class="radio first" /><span>getNodeByParam</span><br/>
            <input type="radio" id="getNodesByParam" name="funType" class="radio" style="margin-left:36px;" /><span>getNodesByParam</span><br/>
            <input type="radio" id="getNodesByParamFuzzy" name="funType" class="radio" style="margin-left:36px;" checked /><span>getNodesByParamFuzzy (only string)</span><br/>
            <input type="radio" id="getNodesByFilter" name="funType" class="radio" style="margin-left:36px;" /><span>getNodesByFilter (参考本页源码中 function filter)</span><br/>
          </p>
        </li>
        </ul>
      </li>
      <li class="title"><h2>2、setting 配置信息说明</h2>
        <ul class="list">
        <li>不需要对 setting 进行特殊设置</li>
        </ul>
      </li>
      <li class="title"><h2>3、treeNode 节点数据说明</h2>
        <ul class="list">
        <li class="highlight_red">请注意各个方法使用时保证传入查找的参数类型与设定要查找的属性的类型一致</li>
        </ul>
      </li>
    </ul>
  </div>
</div>
</BODY>
</HTML>
登入後複製

這樣就簡單的實作了模糊搜尋顯示的功能了。

第二個Ztree樹結構模糊搜尋實作方法，具體內容如下

function expand_ztree(treeId){
    var treeObj = $.fn.zTree.getZTreeObj(treeId);
    treeObj.expandAll(true);
  }
   
  
  function close_ztree(treeId){
    var treeObj = $.fn.zTree.getZTreeObj(treeId);
    var nodes = treeObj.transformToArray(treeObj.getNodes());
    var nodeLength = nodes.length;
    for (var i = 0; i < nodeLength; i++) {
      if (nodes[i].id == '0') {
        //根节点：展开         treeObj.expandNode(nodes[i], true, true, false);
      } else {
        //非根节点：收起         treeObj.expandNode(nodes[i], false, true, false);
      }
    }
  }
   
  
  function search_ztree(treeId, searchConditionId){
    searchByFlag_ztree(treeId, searchConditionId, "");
  }
   
  
  function searchByFlag_ztree(treeId, searchConditionId, flag){
    //<1>.搜索条件     var searchCondition = $('#' + searchConditionId).val();
    //<2>.得到模糊匹配搜索条件的节点数组集合     var highlightNodes = new Array();
    if (searchCondition != "") {
      var treeObj = $.fn.zTree.getZTreeObj(treeId);
      highlightNodes = treeObj.getNodesByParamFuzzy("name", searchCondition, null);
    }
    //<3>.高亮显示并展示【指定节点s】     highlightAndExpand_ztree(treeId, highlightNodes, flag);
  }
   
  
  function highlightAndExpand_ztree(treeId, highlightNodes, flag){
    var treeObj = $.fn.zTree.getZTreeObj(treeId);
    //<1>. 先把全部节点更新为普通样式     var treeNodes = treeObj.transformToArray(treeObj.getNodes());
    for (var i = 0; i < treeNodes.length; i++) {
      treeNodes[i].highlight = false;
      treeObj.updateNode(treeNodes[i]);
    }
    //<2>.收起树, 只展开根节点下的一级节点     close_ztree(treeId);
    //<3>.把指定节点的样式更新为高亮显示，并展开     if (highlightNodes != null) {
      for (var i = 0; i < highlightNodes.length; i++) {
        if (flag != null && flag != "") {
          if (highlightNodes[i].flag == flag) {
            //高亮显示节点，并展开             highlightNodes[i].highlight = true;
            treeObj.updateNode(highlightNodes[i]);
            //高亮显示节点的父节点的父节点....直到根节点，并展示             var parentNode = highlightNodes[i].getParentNode();
            var parentNodes = getParentNodes_ztree(treeId, parentNode);
            treeObj.expandNode(parentNodes, true, false, true);
            treeObj.expandNode(parentNode, true, false, true);
          }
        } else {
          //高亮显示节点，并展开           highlightNodes[i].highlight = true;
          treeObj.updateNode(highlightNodes[i]);
          //高亮显示节点的父节点的父节点....直到根节点，并展示           var parentNode = highlightNodes[i].getParentNode();
          var parentNodes = getParentNodes_ztree(treeId, parentNode);
          treeObj.expandNode(parentNodes, true, false, true);
          treeObj.expandNode(parentNode, true, false, true);
        }
      }
    }
  }
   
  
  function getParentNodes_ztree(treeId, node){
    if (node != null) {
      var treeObj = $.fn.zTree.getZTreeObj(treeId);
      var parentNode = node.getParentNode();
      return getParentNodes_ztree(treeId, parentNode);
    } else {
      return node;
    }
  }
   
  
  function setFontCss_ztree(treeId, treeNode) {
    if (treeNode.id == 0) {
      //根节点       return {color:"#333", "font-weight":"bold"};
    } else if (treeNode.isParent == false){
      //叶子节点       return (!!treeNode.highlight) &#63; {color:"#ff0000", "font-weight":"bold"} : {color:"#660099", "font-weight":"normal"};
    } else {
      //父节点       return (!!treeNode.highlight) &#63; {color:"#ff0000", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"};
    }
  }
 
  //==============HTML==============  
  
class="padd" style="padding-bottom: 0px;">
    
class="input-append row-fluid" style="margin-bottom: 0px;">
      "search_condition" type="text" placeholder="请输入搜索条件" class="span8" style="font-size:12px"/>
      "button" class="btn btn-info" onclick="search_ztree('dep_tree', 'search_condition')">搜索
  
"dep_tree" class="ztree">
登入後複製

以上就是jquery ztree實現模糊搜尋功能的程式碼，希望對大家的學習有所幫助。

相關標籤：
jquery 模糊搜尋
來源：php.cn
上一篇：JQuery ztree帶篩選、非同步載入實例講解_jquery 下一篇：JavaScript設計模式經典之指令模式_javascript技巧
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
使用 Javascript / Jquery 提交表單且不含按鈕 我試圖透過呼叫JavaScript函數並使用JQUERY/PHP執行表單來提交沒有按鈕的表單。我希望表單在後端靜默執行，而無需重新載入頁面。不幸的是，它不斷傳回JavaScript...
來自於 2024-04-06 14:54:03
0
2
421
如何使用 jquery 檢索 HTML 資料表中未選定行的值 我試圖獲取所有未單擊按鈕的行的值。例如，當我單擊第一行上的按鈕時，我想檢索沒有單擊的行的值。 vartable=document.getElementById("all_...
來自於 2024-04-05 09:26:49
0
1
1418
需要一個 jquery 腳本，根據最終用戶的當前選擇從選擇框中移動選定的選項 我有一個HTML頁面，最終用戶可以透過選擇框元素對我們的項目進行排名。請參閱小提琴來觀看簡單的演示：https://jsfiddle.net/Balkanlii/ghecv1j8/...
來自於 2024-04-04 18:40:04
0
1
3528
我已經透過書籤在純 CSS 中創建了一個元素。它已創建，但不可見 我的程式碼如下：g=document.createElement('div');g.setAttribute("id","divcontainer&q...
來自於 2024-04-04 17:27:27
0
1
417
在 Safari/Firefox iOS 上無法傳送表單數據 這適用於除iOS上的Safari/Firefox之外的所有平台：jQuery("#gform_1").one('submit',function(event){...
來自於 2024-04-04 12:53:48
0
1
303
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板