jquery ztree实现模糊搜索功能

前端之家收集整理的这篇文章主要介绍了jquery ztree实现模糊搜索功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

ZTREE DEMO - getNodeByParam / getNodesByParam / getNodesByParamFuzzy <Meta http-equiv="content-type" content="text/html; charset=UTF-8">

根据参数查找节点

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

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

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

    @H_502_1@@H_502_1@

    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使用汇总》 。@H_502_1@

    以上就是jquery ztree实现模糊搜索功能代码,希望对大家的学习有所帮助。@H_502_1@ 原文链接:https://www.f2er.com/jquery/49962.html

    猜你在找的jQuery相关文章