如何在asp.net中使用Javascript从gridview中搜索仅包含一列

How to include only one column for searching from gridview using Javascript in asp.net?

本文关键字：gridview 搜索包含一 Javascript asp net 更新时间：2023-09-26

我得到了一个功能，从谷歌的客户端搜索从网格使用textbox

，函数为:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        function filter2(phrase, _id) {
            var words = phrase.value.toLowerCase().split(" ");
            var table = document.getElementById(_id);
            var ele;
            for (var r = 1; r < table.rows.length; r++) {
                ele = table.rows[r].innerHTML.replace(/<[^>]+>/g, "");
                var displayStyle = 'none';
                for (var i = 0; i < words.length; i++) {
                    if (ele.toLowerCase().indexOf(words[i]) >= 0)
                        displayStyle = '';
                    else {
                        displayStyle = 'none';
                        break;
                    }
                }
                table.rows[r].style.display = displayStyle;
            }
        }
    </script>

，从textbox调用是:

<asp:TextBox ID="txtSearch" TabIndex="2"  onkeyup="filter2(this, '<%=GridView1.ClientID %>');" runat="server"  AutoPostBack="True"/>

，我用来搜索的Gridview是:

 <asp:GridView ID="GridView1"  runat="server"  AutoGenerateColumns="False"    >
                                            <Columns>
<asp:BoundField DataField="ClassName" HeaderText="Class Name" />
<asp:BoundField DataField="PerWeekClass" HeaderText="Week Classes" />
<asp:BoundField DataField="SubID" visible="false" />
                                            </Columns>
                                           </asp:GridView>

我得到的问题是这个函数从网格的所有列中搜索字符串，但是，

我只需要第一列应该功能搜索字符串从。

我在java脚本薄弱，所以我需要你的帮助来解决这个问题。

下面是你可以尝试的代码

是

    <asp:TextBox ID="txt" runat="server" onkeyup="filter(this);"></asp:TextBox>
    <br />
    <asp:GridView ID="gv" runat="server" Width="100%" AutoGenerateColumns="false">
        <Columns>
            <asp:BoundField DataField="Filter" />
            <asp:BoundField DataField="Name" />
        </Columns>
    </asp:GridView>

Javascript

function filter(txt) {
        var grid = document.getElementById("<%=gv.ClientID %>");
        var row = grid.rows.length;
        var filterValue = txt.value.toLowerCase();
        var splitter = filterValue.split(' ');
        var display = '';
        var currentRowValue = '';
        for (var i = 1; i < row; i++) {
            display = 'none';
            currentRowValue = grid.rows[i].cells[0].innerText;
            for (var j = 0; j < splitter.length; j++) {
                if (currentRowValue.toLowerCase().startsWith(splitter[j]))
                    display = '';
                else {
                    display = 'none';
                    break;
                }
            }
            grid.rows[i].style.display = display;
        }
    }

背后的代码

protected void Page_Load(object sender, EventArgs e)
{
    // Check
    if (!IsPostBack)
    {
        // Varaible
        DataTable dt = new DataTable();
        dt.Columns.Add("Filter");
        dt.Columns.Add("Name");
        // Add
        dt.Rows.Add("Do", "Doraemon");
        dt.Rows.Add("No", "Nobita");
        dt.Rows.Add("Si", "Sizuka");
        dt.Rows.Add("Sin", "Sinyu");
        // Bind
        gv.DataSource = dt;
        gv.DataBind();
    }
}

变化

ele = table.rows[r].innerHTML.replace(/<[^>]+>/g, "");

ele = table.rows[r].cells[0].innerHTML.replace(/<[^>]+>/g, "");