Return in tree only what contains the search

Asked

Viewed 45 times

0

Good morning, I have a tree that has various subjects and sub-subjects and at the end I have the requirements. When performing a search on the tree, it opens whole and shows highlighted what contains the search. However, I would like you to return only what was searched, not the whole tree. Can you help me?

<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>
javascript jquery

  • Actually return the entire node. For example, suppose the tree has 100 questions that are sentences. You look for a word "Test". Return all sentences that contain %test% in the content. Other questions hide.

  • Exactly. What you are doing now is to expand the whole tree and then highlight the questions found with the word. The problem is that my tree has more than 1000 questions, and then, for me to visualize what was researched I need to walk through the whole tree.

  • can exemplify?

  • The problem is that if you have an item searched there at the end of the tree, in order to visualize it I will have to scroll down the page, and I have over a thousand questions. That’s why I needed to hide items that don’t contain the research.

  • Let’s go continue this discussion in chat.

  • All that remains is to mark the answer

  • And once again, obg!

  • I thank you for the support you gave me!! The solution was perfect! Hug

  • @dvd has some bugs still in the code you sent me, is opening several nodes of the tree.

Show 4 more comments

1 answer

1


You can browse all folders and items by checking if any have the background normal. When found, hide the item, leaving only those found.

If the item is inside a subfolder, all parent folders will be visible.

Working example (see comments in the code of the lines I added):

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>

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.