0

Bom dia, eu tenho uma árvore que tem vários assuntos e subassuntos e na ponta tenho os quesitos. Ao realizar uma pesquisa na árvore, ela abre inteira e mostra destacado o que contém a busca. Porém, eu gostaria que retornasse apenas o que foi pesquisado, não a árvore inteira. Pode me ajudar?

<script>
var zNodes =[
            { id:1, pId:0, name:"search node demo 1", t:"id=1", open:true},
            { id:11, pId:1, name:"can search 'name'", t:"id=11"},
            { id:12, pId:1, name:"can search 'level'", t:"id=12"},
            { id:13, pId:1, name:"can search 'id'", t:"id=13"},
            { id:14, pId:1, name:"can search other attr", t:"id=14"},
            { id:2, pId:0, name:"search node demo 2", t:"id=2", open:true},
            { id:21, pId:2, name:"can search single node", t:"id=21"},
            { id:22, pId:2, name:"can search nodes array", t:"id=22"},
            { id:23, pId:2, name:"search me", t:"id=23"},
            { id:3, pId:0, name:"search node demo 3", t:"id=3", open:true },
            { id:31, pId:3, name:"My id is : 31", t:"id=31"},
            { id:32, pId:31, name:"My id is : 32", t:"id=32"},
            { id:33, pId:32, name:"My id is : 33", t:"id=33"}
        ];

var code;

    function setCheck() {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        showCode('setting.check.chkboxType = { "Y" : "ps", "N" : "ps" };');
    }
    function showCode(str) {
        if (!code) code = $("#code");
        code.empty();
        code.append("<li>"+str+"</li>");
    }

    function expandNode(e)
    {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
            type = e.data.type,
            nodes = zTree.getSelectedNodes();
            if (type.indexOf("All")<0 && nodes.length == 0) {
                alert("Selecione uma opção...");
            }

            if (type == "expandAll") {
                zTree.expandAll(true);
            } else if (type == "collapseAll") {
                zTree.expandAll(false);
            } else {
                var callbackFlag = $("#callbackTrigger").attr("checked");
                for (var i=0, l=nodes.length; i<l; i++) {
                    zTree.setting.view.fontCss = {};
                    if (type == "expand") {
                        zTree.expandNode(nodes[i], true, null, null, callbackFlag);
                    } else if (type == "collapse") {
                        zTree.expandNode(nodes[i], false, null, null, callbackFlag);
                    } else if (type == "toggle") {
                        zTree.expandNode(nodes[i], null, null, null, callbackFlag);
                    } else if (type == "expandSon") {
                        zTree.expandNode(nodes[i], true, true, null, callbackFlag);
                    } else if (type == "collapseSon") {
                        zTree.expandNode(nodes[i], false, true, null, callbackFlag);
                    }
                }
            }
        }

        function showRemoveBtn(treeId, treeNode) {
            return !treeNode.isParent;
        }
        function showRenameBtn(treeId, treeNode) {
            return !treeNode.isParent;
        }

        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 === "") return;
                updateNodes(false);

                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);
            }
            updateNodes(true);

        }
        function updateNodes(highlight) {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            for( var i=0, l=nodeList.length; i<l; i++) {
                nodeList[i].highlight = highlight;
                zTree.updateNode(nodeList[i]);
            }
        }
        function getFontCss(treeId, treeNode) {
            return (!!treeNode.highlight) ? {
            color: "#A60000",
            "font-weight": "bold",
            "padding-top": " 0px",
            "background-color": " #FFE6B0",
            "height": "16px",
            "border": "1px #FFB951 solid",
            "opacity": "0.8"
        } : {
            color: "#333",
            "font-weight": "normal",
            "padding-top": " 0px",
            "background-color": "",
            "height": "16px",
            "border": "0",
            "opacity": "1"
        };
        }
        function filter(node) {
            return !node.isParent && node.isFirstNode;
        }

        var key;
        $(document).ready(function(){
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
            $("#key").on("keyup", function(e){
        updateNodes(false);
        if ($(this).val() !== "") {
            nodeList = treeObj.getNodesByParamFuzzy("name", $(this).val(), null);
            updateNodes(true);

            if (nodeList == "") {
                treeObj.expandAll(false);
            }
            //if the keyword match with some node in the tree then collapse all the node and search the node to open
            if (nodeList != "") {
                treeObj.expandAll(true);

                // for (i = 0; i < nodeList.length; i++) {
                //     node = nodeList[i].getParentNode();
                //     treeObj.expandNode(node, true, null, true);
                //     treeObj.expandNode(nodeList[i], true, null, true);
                // };
                                key = $("#key");
                                key.bind("focus", focusKey)
                                .bind("blur", blurKey)
                                .bind("propertychange", searchNode)
                                .bind("click", {type:"expandAll"}, expandNode)
                                .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);
            }
        }
        else {
            treeObj.expandAll(false);
        }
    })


        })

        var newCount = 1;
        function addHoverDom(treeId, treeNode) {

            testid = treeNode.id.toString();
            testid = testid.substring(0,1)
            if(treeNode.isParent)
            {
                var sObj = $("#" + treeNode.tId + "_span");
                if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
                var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
                    + "' title='Adicionar Quesito' onfocus='this.blur();'></span>";
                sObj.after(addStr);
                var btn = $("#addBtn_"+treeNode.tId);
                if (btn) btn.bind("click", function(){
                    var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                    zTree.addNodes(treeNode, {id:('-' + newCount), pId:treeNode.id, name:"Descrição Quesito Personalizado " + (newCount++)});
                    return false;
                });
            }
        };

         function removeHoverDom(treeId, treeNode) {
            $("#addBtn_"+treeNode.tId).unbind().remove();
         };

        var setting = {
            view: {
                addHoverDom: addHoverDom,
                removeHoverDom: removeHoverDom,
                fontCss: getFontCss
                // removeHoverDom: removeHoverDom,
            },
            check: {
                enable: true
            },
            edit: {
                enable: true,
                editNameSelectAll: true,
                showRemoveBtn: showRemoveBtn,
                showRenameBtn: showRenameBtn
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };
</script>



<div align="center"><input type="text"  id="key" value="" class="form-control input-sm" placeholder="Pesquisar" style="width:350px" /></div><br>
                <input type="hidden" id="name" name="keyType" class="radio first" checked />
                <input type="hidden" id="level" name="keyType" class="radio" style="margin-left:68px;" />
                <input type="hidden" id="selecionados" name="selecionados">
                <input type="hidden" id="personalizados" name="personalizados">
                <input type="hidden" id="id" name="keyType" class="radio" style="margin-left:68px;" />
                <input type="hidden" id="getNodeByParam" name="funType" class="radio first" />
                <input type="hidden" id="getNodesByParam" name="funType" class="radio" style="margin-left:36px;" />
                <input type="hidden" id="getNodesByParamFuzzy" name="funType" class="radio" style="margin-left:36px;" checked />
                <input type="hidden" id="getNodesByFilter" name="funType" class="radio" style="margin-left:36px;" />
                <div align="center">
                    <button id="expandAllBtn" class="btn btn-inverse m-r-5 m-b-5" href="#" title="Expandir Árvore" onclick="return false;">Expandir Árvore</button>
                    <button id="collapseAllBtn" class="btn btn-inverse m-r-5 m-b-5" href="#" title="Recolher Árvore" onclick="return false;">Recolher Árvore</button>
                    <button id="panel-expand" class="btn btn-info m-r-5 m-b-5" data-click="panel-expand">Aumentar Tela / Retornar Tela</button>
                </div>
                <br><h4>Seleção de Quesitos</h4>
                <ul id="treeDemo" class="ztree"></ul>
</div>
9
  • Na verdade retorne o nó inteiro. Por exemplo, supondo que a árvore tenha 100 quesitos que são frases. Você busque uma palavra "Test". Retornar todas as frases que contenha %test% no conteúdo. Os demais quesitos esconder.
    – Tadeu
    Commented 22/03/2018 às 14:51
  • Exato. O que está fazendo atualmente é expandir toda a árvore e ai destacar os quesitos encontrados com a palavra. O problema é que minha árvore tem mais de 1000 quesitos, e ai, para eu visualizar o que foi pesquisado preciso andar pela árvore inteira.
    – Tadeu
    Commented 22/03/2018 às 14:56
  • pode exemplificar?
    – Tadeu
    Commented 22/03/2018 às 17:19
  • O problema é que se tiver um item pesquisado lá no final da árvore, para poder visualizar eu vou ter que rolar a página até embaixo, e eu tenho mais de mil quesitos. Por isso que eu precisava esconder os itens que não contenham a pesquisa.
    – Tadeu
    Commented 22/03/2018 às 17:23
  • Vamos continuar esta discussão no chat.
    – Tadeu
    Commented 22/03/2018 às 18:00

1 Resposta 1

1

Você pode percorrer todas as pastas e itens verificando se algum possui o background normal. Ao encontrar, esconde o item, ficando apenas os que foram encontrados.

Caso o item esteja dentro de uma subpasta, todas as pastas-pai ficarão visíveis.

Exemplo de funcionamento (veja comentários no código das linhas que adicionei):

var zNodes =[
            { id:1, pId:0, name:"search node demo 1", t:"id=1", open:true},
            { id:11, pId:1, name:"can search 'name'", t:"id=11"},
            { id:12, pId:1, name:"can search 'level'", t:"id=12"},
            { id:13, pId:1, name:"can search 'id'", t:"id=13"},
            { id:14, pId:1, name:"can search other attr", t:"id=14"},
            { id:2, pId:0, name:"search node demo 2", t:"id=2", open:true},
            { id:21, pId:2, name:"can search single node", t:"id=21"},
            { id:22, pId:2, name:"can search nodes array", t:"id=22"},
            { id:23, pId:2, name:"search me", t:"id=23"},
            { id:3, pId:0, name:"search node demo 3", t:"id=3", open:true },
            { id:31, pId:3, name:"My id is : 31", t:"id=31"},
            { id:32, pId:31, name:"My id is : 32", t:"id=32"},
            { id:33, pId:32, name:"My id is : dvd", t:"id=33"}
        ];

var code;

    function setCheck() {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        showCode('setting.check.chkboxType = { "Y" : "ps", "N" : "ps" };');
    }
    function showCode(str) {
        if (!code) code = $("#code");
        code.empty();
        code.append("<li>"+str+"</li>");
    }

    function expandNode(e)
    {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
            type = e.data.type,
            nodes = zTree.getSelectedNodes();
            if (type.indexOf("All")<0 && nodes.length == 0) {
                alert("Selecione uma opção...");
            }

            if (type == "expandAll") {
                zTree.expandAll(true);
            } else if (type == "collapseAll") {
                zTree.expandAll(false);
            } else {
                var callbackFlag = $("#callbackTrigger").attr("checked");
                for (var i=0, l=nodes.length; i<l; i++) {
                    zTree.setting.view.fontCss = {};
                    if (type == "expand") {
                        zTree.expandNode(nodes[i], true, null, null, callbackFlag);
                    } else if (type == "collapse") {
                        zTree.expandNode(nodes[i], false, null, null, callbackFlag);
                    } else if (type == "toggle") {
                        zTree.expandNode(nodes[i], null, null, null, callbackFlag);
                    } else if (type == "expandSon") {
                        zTree.expandNode(nodes[i], true, true, null, callbackFlag);
                    } else if (type == "collapseSon") {
                        zTree.expandNode(nodes[i], false, true, null, callbackFlag);
                    }
                }
            }
        }

        function showRemoveBtn(treeId, treeNode) {
            return !treeNode.isParent;
        }
        function showRenameBtn(treeId, treeNode) {
            return !treeNode.isParent;
        }

        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 === "") return;
                updateNodes(false);

                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);
            }
            updateNodes(true);

        }
        function updateNodes(highlight) {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            for( var i=0, l=nodeList.length; i<l; i++) {
                nodeList[i].highlight = highlight;
                zTree.updateNode(nodeList[i]);
            }

            // LINHAS ADICIONADAS INÍCIO
            $("li").each(function(){
               
               var $this = $(this),
                   achou = false;
               
               $(this).find("a").each(function(){
                  if($(this).css("background-color") == "rgba(0, 0, 0, 0)"){
                     if( !$this.find("span:first-child").is(".ico_open, .ico_close") ){
                        $(this).closest("li").hide();
                     }
                  }else{
                     achou = true;
                     $(this).closest("li").show();
                  }
               });

               !achou ? $this.hide() : $this.show();
            });
            // LINHAS ADICIONADAS FIM

        }
        function getFontCss(treeId, treeNode) {
            return (!!treeNode.highlight) ? {
            color: "#A60000",
            "font-weight": "bold",
            "padding-top": " 0px",
            "background-color": " #FFE6B0",
            "height": "16px",
            "border": "1px #FFB951 solid",
            "opacity": "0.8"
        } : {
            color: "#333",
            "font-weight": "normal",
            "padding-top": " 0px",
            "background-color": "",
            "height": "16px",
            "border": "0",
            "opacity": "1"
        };
        }
        function filter(node) {
            return !node.isParent && node.isFirstNode;
        }

        var key;
        $(document).ready(function(){
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
            $("#key").on("keyup", function(e){
        updateNodes(false);
        if ($(this).val() !== "") {
            nodeList = treeObj.getNodesByParamFuzzy("name", $(this).val(), null);
            updateNodes(true);

            if (nodeList == "") {
                treeObj.expandAll(false);
            }
            //if the keyword match with some node in the tree then collapse all the node and search the node to open
            if (nodeList != "") {
                treeObj.expandAll(true);

                // for (i = 0; i < nodeList.length; i++) {
                //     node = nodeList[i].getParentNode();
                //     treeObj.expandNode(node, true, null, true);
                //     treeObj.expandNode(nodeList[i], true, null, true);
                // };
                                key = $("#key");
                                key.bind("focus", focusKey)
                                .bind("blur", blurKey)
                                .bind("propertychange", searchNode)
                                .bind("click", {type:"expandAll"}, expandNode)
                                .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);
            }
        }
        else {
            treeObj.expandAll(false);
            $("li").show(); // LINHA ADICIONADA
        }
    })


        })

        var newCount = 1;
        function addHoverDom(treeId, treeNode) {

            testid = treeNode.id.toString();
            testid = testid.substring(0,1)
            if(treeNode.isParent)
            {
                var sObj = $("#" + treeNode.tId + "_span");
                if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
                var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
                    + "' title='Adicionar Quesito' onfocus='this.blur();'></span>";
                sObj.after(addStr);
                var btn = $("#addBtn_"+treeNode.tId);
                if (btn) btn.bind("click", function(){
                    var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                    zTree.addNodes(treeNode, {id:('-' + newCount), pId:treeNode.id, name:"Descrição Quesito Personalizado " + (newCount++)});
                    return false;
                });
            }
        };

         function removeHoverDom(treeId, treeNode) {
            $("#addBtn_"+treeNode.tId).unbind().remove();
         };

        var setting = {
            view: {
                addHoverDom: addHoverDom,
                removeHoverDom: removeHoverDom,
                fontCss: getFontCss
                // removeHoverDom: removeHoverDom,
            },
            check: {
                enable: true
            },
            edit: {
                enable: true,
                editNameSelectAll: true,
                showRemoveBtn: showRemoveBtn,
                showRenameBtn: showRenameBtn
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/zTree.v3/3.5.33/css/zTreeStyle/zTreeStyle.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/zTree.v3/3.5.33/js/jquery.ztree.all.js"></script>

<div align="center"><input type="text"  id="key" value="" class="form-control input-sm" placeholder="Pesquisar" style="width:350px" /></div><br>
    <input type="hidden" id="name" name="keyType" class="radio first" checked />
    <input type="hidden" id="level" name="keyType" class="radio" style="margin-left:68px;" />
    <input type="hidden" id="selecionados" name="selecionados">
    <input type="hidden" id="personalizados" name="personalizados">
    <input type="hidden" id="id" name="keyType" class="radio" style="margin-left:68px;" />
    <input type="hidden" id="getNodeByParam" name="funType" class="radio first" />
    <input type="hidden" id="getNodesByParam" name="funType" class="radio" style="margin-left:36px;" />
    <input type="hidden" id="getNodesByParamFuzzy" name="funType" class="radio" style="margin-left:36px;" checked />
    <input type="hidden" id="getNodesByFilter" name="funType" class="radio" style="margin-left:36px;" />
    <div align="center">
        <button id="expandAllBtn" class="btn btn-inverse m-r-5 m-b-5" href="#" title="Expandir Árvore" onclick="return false;">Expandir Árvore</button>
        <button id="collapseAllBtn" class="btn btn-inverse m-r-5 m-b-5" href="#" title="Recolher Árvore" onclick="return false;">Recolher Árvore</button>
        <button id="panel-expand" class="btn btn-info m-r-5 m-b-5" data-click="panel-expand">Aumentar Tela / Retornar Tela</button>
    </div>
    <br><h4>Seleção de Quesitos</h4>
    <ul id="treeDemo" class="ztree"></ul>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .