Return only the one containing the search in the tree

Question

Return only the one containing the search in the tree

Navigation

#1 by (1 votes)

0

Good morning, I have a tree that has several subjects and subassuntos and in the tip I have the requirements. When you perform a search in the tree, it opens whole and shows what the search contains. However, I would like it to return only the one that 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

asked by anonymous 22.03.2018 / 15:25

1 answer

How to print the result of a php function from another page? Global State using reactjs

score 1 · Accepted Answer

You can browse through all folders and items by checking to see if anyone has background normal. When you find it, hide the item, leaving only those found.

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

Functional example (see comments in the line code I've 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><linkrel="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><divalign="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>