ASP.NET - 基于文本框按键的客户端 Gridview 数据过滤

Question

我想在 gridview 上进行 CLIENT-SIDE 数据搜索，以加快加载速度和提高性能（GV 上的数据正在由存储过程加载）

我已将此视为来源并尝试遵循代码但它不起作用。有什么问题？ Filter records in gridview http://www.vonloesch.de/comment/reply/23

这就是我得到的

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

---

     <!-- A text box for entering search phrase and GridView1.ClientID returns the client id of gridview -->
 <input name="txtTerm" onkeyup="filter2(this, '<%=grdLocation %>')" type="text">

---

             <div class="ModalBodyGridview">

      <asp:GridView ID="grdLocation"  runat="server" AutoGenerateColumns="false" BackColor="White" BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px" CellPadding="4" DataSourceID="SqlDataSource2" ForeColor="Black" GridLines="Vertical" Width="420px" OnSelectedIndexChanged="grdLocation_SelectedIndexChanged" ShowHeaderWhenEmpty="True" EmptyDataText="No records Found" >
   <AlternatingRowStyle BackColor="White" />
  <Columns>
      <asp:CommandField ShowSelectButton="True" />
     <asp:BoundField DataField="Location Num" HeaderText="Location Num" SortExpression="Location Num" />
      <asp:BoundField DataField="Location Name" HeaderText="Location Name" SortExpression="Location Name" />
   </Columns>
        <FooterStyle BackColor="#CCCC99" />
        <HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
        <PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
         <RowStyle BackColor="#F7F7DE" />
        <SelectedRowStyle BackColor="green" Font-Bold="True" ForeColor="White" />
        <SortedAscendingCellStyle BackColor="#FBFBF2" />
        <SortedAscendingHeaderStyle BackColor="#848384" />
        <SortedDescendingCellStyle BackColor="#EAEAD3" />
        <SortedDescendingHeaderStyle BackColor="#575357" />
      </asp:GridView>


     <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:RPSMSConnectionString %>" SelectCommand="spSearchLoc" SelectCommandType="StoredProcedure"></asp:SqlDataSource>
    </div>

如果有人可以提出其他解决方案，我们将不胜感激。

Answer 1

如果您想使用 JavaScript 将焦点放在文本输入上，请执行以下操作

在 JavaScript 中

假设您的标记如下所示

<input id="txtTerm" name="txtTerm" onkeyup="filter2(this, '<%=grdLocation.ClientID %>')" type="text">

在 JavaScript 中执行以下操作以将焦点放在该元素上

document.getElementById("txtTerm").focus();

在代码中

您可能必须在标记中使用runat="server"，如下所示。

<input id="txtTerm" name="txtTerm" onkeyup="filter2(this, '<%=grdLocation.ClientID %>')" type="text" runat="server">

然后，只需调用Focus() 函数

txtTerm.Focus();

更新 1

如果您使用JavaScript 方法，请不要使用runat="server"。

<input id="txtTerm" name="txtTerm" onkeyup="filter2(this, '<%=grdLocation.ClientID %>')" type="text">

如果您使用的是 ModalPopupExtender，请使用以下 JavaScript

<script type="text/javascript">
        Sys.Application.add_load(modalSetup);

        function modalSetup() {
            // Use the correct ModalPopupExtender id here
            var modalPopup = document.getElementById(<%= ModalPopupExtender1.BehaviorID %>);
            modalPopup.add_shown(SetFocusOnControl);
        }

        function SetFocusOnControl() {
            var textBox1 = document.getElementsByName("txtTerm")[0];
            textBox1.focus();
        }
</script>

希望这有帮助！

Answer 2

您应该将ClientID 传递给您拥有的JavaScript 函数。因为您的GridView 的 ID 在客户端渲染后会有所不同。

试试这个

<input name="txtTerm" onkeyup="filter2(this, '<%=grdLocation.ClientID %>')" type="text">