如何使用 asp.net Web 表单在 Telerik 树中实现搜索和过滤

Posted 2023-04-12

【中文标题】如何使用 asp.net Web 表单在 Telerik 树中实现搜索和过滤

【英文标题】：How to implement Search and fillter in telerik tree using asp.net web form

【发布时间】：2022-01-10 08:40:28

【问题描述】：

我是 telerik 的新手。我想过滤 telerik:red tree 数据但无法在收件箱中触发。 我的代码是-

 

<telerik:RadPane ID="LeftPanelAssigned" runat="server" Width="20%" CssClass="management" OnClientBeforeResize="LeftPanelAssigned_OnClientBeforeResize">
                  <asp:Label ID="RadTextBox2" Text="Assigned" runat="server" />
                <asp:Label ID="txtAssinedcount" ReadOnly="true" runat="server" />

                 <asp:TextBox ID="txtSearch" runat="server" onkeyup="SearchEmployees(this, '#TreeAssignedWorkflow');"     placeholder="Search employee">
                </asp:TextBox>


                <telerik:RadTreeView ID="TreeAssignedWorkflow" runat="server" CssClass="tree" OnNodeClick="TreeAssignedWorkflow_NodeClick"
                    OnClientMouseOver="TreeAssignedWorkflowOnClientMouseOver" OnClientMouseOut="TreeAssignedWorkflowOnClientMouseOut"
                    OnClientContextMenuItemClicked="WFTreeContextMenuClick">
                    <ContextMenus>
                        <telerik:RadTreeViewContextMenu ID="RadTreeViewContextMenu1" runat="server">
                            <Items>
                                <telerik:RadMenuItem Text="Reference Search">
                                </telerik:RadMenuItem>
                                <telerik:RadMenuItem Text="Sort By Date">
                                </telerik:RadMenuItem>
                                <telerik:RadMenuItem Text="Sort By Type">
                                </telerik:RadMenuItem>
                            </Items>
                            <CollapseAnimation Type="none" />
                        </telerik:RadTreeViewContextMenu>
                    </ContextMenus>
                </telerik:RadTreeView>
            </telerik:RadPane>

请帮忙。

【参考方案1】：

我最终重写了大部分代码，如果有人感兴趣，我会将其发布在这里。 我的最终结果看起来像这样并且效果很好。

此过滤器在按键时过滤并在清除过滤器文本框时恢复树。 它还展开并选择所有匹配的节点。 它并不花哨，我相信它可以被重写以更有效。

    var selectednode;
        function valueChanging(sender, args) 
            var tree = $find("<%= RadTreeView_Organisation.ClientID %>");
            var textbox = document.getElementById("<%= Filter.ClientID %>");
            //alert(textbox.value);
            var searchString = textbox.value;
            if (searchString == "") 
                ClearFilter();
            
            else 
                var allNodes = tree.get_allNodes();
                var index;
                for (index = 0; index < allNodes.length; index++) 
                    var node = allNodes[index];
                    node.set_selected(false);
                

                for (index = 0; index < allNodes.length; index++) 
                    var node = allNodes[index];
                    if (node.get_expanded)
                        node.collapse();
                

                LoopIt(searchString, tree, textbox);
                expandit();
            
            return false;
        
            function ClearFilter() 
                var tree = $find("<%= RadTreeView_Organisation.ClientID %>");
                var textbox = $find("<%= Filter.ClientID %>");
                var allNodes = tree.get_allNodes();
                for (index = 0; index < allNodes.length; index++) 
                    var node = allNodes[index];
                    node.set_visible(true);
                    node.set_selected(false);
                    if (node.get_expanded)
                        node.collapse();
                
                setTimeout(allNodes[0].expand(), 450); 
                return false;
            
            function LoopIt(searchString, tree, textbox) 
                var allNodes = tree.get_allNodes();
                allNodes[0].expand;
                for (var i = 0; i < tree.get_nodes().get_count() ; i++)            
                    findNodes(tree.get_nodes().getNode(i), searchString);
                
            
            function expandit() 
                if (selectednode != null) 
                    selectednode = selectednode.get_parent();
        
                    while (selectednode != null) 
                        //  selectednode.set_selected(true);
                        if (selectednode.expand) 
                            selectednode.expand();
                        
        
                        selectednode = selectednode.get_parent();
                    
                
            
        
            function findNodes(node, searchString) 
                var hasFoundChildren = false;
        
                if (hasFoundChildren || node.get_text().toLowerCase().indexOf(searchString.toLowerCase()) != -1) 
                    node.set_selected(true);
                
        
                for (var i = 0; i < node.get_nodes().get_count() ; i++) 
                    hasFoundChildren = findNodes(node.get_nodes().getNode(i), searchString) || hasFoundChildren;
                
        
                if (hasFoundChildren || node.get_text().toLowerCase().indexOf(searchString.toLowerCase()) != -1) 
                    node.set_visible(true);
        
                    node.expand();
                    if (node.get_text().toLowerCase().indexOf(searchString.toLowerCase()) != -1) 
                        node.set_selected(true);
                        for (var i = 0; i < node.get_nodes().get_count() ; i++) 
                            DisplayChildren(node);
                            //node.get_nodes().getNode(i).set_visible(true);
                        
                    
                    return true;
                
                else 
                    node.set_visible(false);
                    return false;
                
            
        
            function DisplayChildren(node) 
                for (var ee = 0; ee < node.get_nodes().get_count() ; ee++) 
                    node.get_nodes().getNode(ee).set_visible(true);
                    //node.get_nodes().getNode(ee).set_expanded(true);
                    DisplayChildren(node.get_nodes().getNode(ee));
                
            
            //end Treeviewfilter

【讨论】：

有用的解决方案，谢谢。

它只在选定的节点上工作，但我必须让它搜索和过滤所有节点，并且按下 Backspace 键最新数据没有获取..请帮助我