1

我在 Javascript 中有一个函数可以在我的 GridView 中生成过滤器。但是，此函数按列进行过滤，即我需要在 GridView 中的每列“输入”来过滤所有 GridView。如何将此功能调整为所有 GridView 列的一个“输入”？我已经适应了这个功能。最初，它在“表”中而不是在 GrdiView 中获取值，但现在对于这种情况，我看不到任何解决方案。我很清楚？

我的功能：

$(function () {
$("#tabela input").keyup(function () {
    var index = $(this).parent().index();
    var nth = "#GridView1 td:nth-child(" + (index + 1).toString() + ")";
    var valor = $(this).val().toUpperCase();
    $("#GridView1 tbody tr").show();
    $(nth).each(function () {
        if ($(this).text().toUpperCase().indexOf(valor) < 0) {
            $(this).parent().hide();
        }
    });
});

$("#tabela input").blur(function () {
    $(this).val("");
});

});

我的网格视图：

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" GridLines="None"
            CssClass="table table-bordered table-striped">
            <Columns>
                <asp:BoundField DataField="idTickets" HeaderText="ID" />
                <asp:BoundField DataField="UserName" HeaderText="User" />
                <asp:BoundField DataField="AccessGroup" HeaderText="Access Group" />
                <asp:BoundField DataField="FolderAccess" HeaderText="Folder Access" />
                <asp:BoundField DataField="RequestDate" HeaderText="Request Date" DataFormatString="{0:d}" />
                <asp:BoundField DataField="SituationDesc" HeaderText="Situation" />
                <asp:BoundField DataField="Approver" HeaderText="Approver" />
                <asp:BoundField DataField="ApprovalDate" HeaderText="Approval Date" DataFormatString="{0:d}" />
                <asp:BoundField DataField="BusinessJustification" HeaderText="Business Justification" />
                <asp:BoundField DataField="Server" HeaderText="Server Name" />
                <asp:BoundField DataField="UserRequestor" HeaderText="User Request" />
                <asp:TemplateField Visible="false">
                    <ItemTemplate>
                        <asp:HiddenField ID="Access" runat="server" Value='<%# Bind("Access") %>' />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

要过滤 3 个第一列，我需要 3 个输入：

<table id="tabela">
            <thead>
                <tr>
                    <th>
                        ID
                    </th>
                    <th>
                        USER
                    </th>
                    <th>
                        Access Group
                    </th>
                </tr>
                <tr>
                    <th>
                        <input type="text" id="txtColuna1" />
                    </th>
                    <th>
                        <input type="text" id="txtColuna2" />
                    </th>
                    <th>
                        <input type="text" id="txtColuna3" />
                    </th>
                </tr>
            </thead>
        </table>
4

3 回答 3

3

如果我正确理解你的问题，你正在寻找这样的东西：

 $(function(){
    $('#tabela input').keyup(function(){
        var val = $(this).val().toUpperCase();
        $('#GridView1> tbody > tr').each(function(index , element){
            if($(this).text().toUpperCase().indexOf(val)<0)
                $(this).hide();
            else 
                $(this).show();
        });
    });
});

本质上，它遍历网格中的行以查找匹配项，相应地隐藏/显示行。

在 中提供的标记中tabela，您可以简单地输入一个文本而不是 3 个。

这是一个快速演示。

于 2013-07-25T18:51:53.147 回答
1

尝试

    <p>Search: <input type="text" id="searchTerm" onkeyup="doSearch()" /></p>

<table id="dataTable">

<script>
function doSearch() {
            var input, filter, found, table, tr, td, i, j;
            input = document.getElementById("searchTerm");
            filter = input.value.toUpperCase();
            table = document.getElementById("dataTable");
            tr = table.getElementsByTagName("tr");
            for (i = 0; i < tr.length; i++) {
                td = tr[i].getElementsByTagName("td");
                for (j = 0; j < td.length; j++) {
                    if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
                        found = true;
                    }
                }
                if (found) {
                    tr[i].style.display = "";
                    found = false;
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
    </script>
于 2018-08-21T14:35:08.103 回答
0

Using Asp.net Controls here I have created sample that will help you out

function Search_Gridview(strKey) {
            var strData = strKey.value.toLowerCase().split(" ");
            var tblData = document.getElementById("<%=gvTest.ClientID %>");
            var rowData;
            for (var i = 1; i < tblData.rows.length; i++) {
                rowData = tblData.rows[i].innerHTML;
                var styleDisplay = 'none';
                for (var j = 0; j < strData.length; j++) {
                    if (rowData.toLowerCase().indexOf(strData[j]) >= 0)
                        styleDisplay = '';
                    else {
                        styleDisplay = 'none';
                        break;
                    }
                }
                tblData.rows[i].style.display = styleDisplay;
            }
        }  

 <asp:TextBox ID="txtSearch" runat="server" onkeyup="Search_Gridview(this)"></asp:TextBox>
于 2020-10-24T16:37:06.360 回答