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.

Answer 2

尝试

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

Answer 3

在这里使用Asp.net控件，我创建了可以帮助您的示例

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>

使用Javascript过滤GridView

3 个答案: