c# - 使用 Javascript 过滤 GridView

Question

我有一个 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("");
});

});

我的GridView:

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

Answer 1

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

 $(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 个。

Here's a quick demo.