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

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

试试这个

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

Answer 2

如果您想使用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

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

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

希望这有帮助！

ASP.NET - 基于文本框上的Keypress在客户端进行Gridview数据过滤

2 个答案: