微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

jquery ztree实现模糊搜索功能

本文分享了jquery ztree实现模糊搜索功能两个实例,供大家参考,具体内容如下

ztree官方demo代码里的: 根据参数查找节点 以上文件修改成如下代码

rush:xhtml;"> ZTREE DEMO - getNodeByP<a href="https://www.jb51.cc/tag/ara/" target="_blank" class="keywords">ara</a>m / getNodesByP<a href="https://www.jb51.cc/tag/ara/" target="_blank" class="keywords">ara</a>m / getNodesByP<a href="https://www.jb51.cc/tag/ara/" target="_blank" class="keywords">ara</a>mFuzzy <Meta http-equiv="content-type" content="text/html; charset=UTF-8">

根据参数查找节点

[ 文件路径: core/searchNodes.html ]
1、getNodeByParam / getNodesByParam / getNodesByParamFuzzy 方法操作说明
    aram / getNodesByParam / getNodesByParamFuzzy / getNodeByTId 方法,详细请参见 API 文档中的相关内容
  • 搜索试试看:
    属性值( value ):
    属性( key ):name (string)
    level (number) ... 根节点 level = 0
    id (number)
    方法getNodeByParam
    getNodesByParam
    getNodesByParamFuzzy (only string)
    getNodesByFilter (参考本页源码中 function filter)

  • 2、setting 配置信息说明
      不需要对 setting 进行特殊设置
  • 3、treeNode 节点数据说明
      方法使用时保证传入查找的参数类型与设定要查找的属性的类型一致
  • 这样就简单的实现了模糊搜索显示功能了。

    第二个Ztree树结构模糊搜索实现方法,具体内容如下

    rush:js;"> 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],false);
    } else {
    //非根节点:收起 treeObj.expandNode(nodes[i],false);
    }
    }
    }

    function search_ztree(treeId,searchConditionId){
    searchByFlag_ztree(treeId,searchConditionId,"");
    }

    function searchByFlag_ztree(treeId,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,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);
    treeObj.expandNode(parentNode,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);
    treeObj.expandNode(parentNode,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) ? {color:"#ff0000","font-weight":"bold"} : {color:"#660099","font-weight":"normal"};
    } else {
    //父节点 return (!!treeNode.highlight) ? {color:"#ff0000","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">

    更多关于ztree控件的内容,请参考专题插件ztree使用汇总》 。

    以上就是jquery ztree实现模糊搜索功能代码,希望对大家的学习有所帮助。

    原文地址:https://www.jb51.cc/jquery/49962.html

    版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

    相关推荐