2016-05-02 3 views
-2

nur wandern, wird das möglich sein für mich die Datensätze in C# .net Client-Seite zu filtern?Wie kann ich die Datensätze in C# .net Client-Seite filtern?

Beispiel: Ich habe die folgende Seite wrotein C# .net enter image description here

mit folgenden Codes:

<table> 
    <tr> 
     <td colspan="2"> 
      <table> 
       <tr> 
        <td><asp:CheckBox runat="server" ID="chkRework" />Rework Required</td> 
        <td style="padding-left:50px;"><asp:CheckBox runat="server" ID="chkPending" />Pending</td> 
        <td style="padding-left:50px;"><asp:CheckBox runat="server" ID="chkInvoiced" />Invoiced</td> 
        <td style="padding-left:50px;"><asp:CheckBox runat="server" ID="chkCancelled" />Cancelled</td> 
       </tr> 

      </table> 
     </td> 
    </tr> 
    </table> 

    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" Width="810px" 
    DataSourceID="dsContractor" DataKeyNames="rep_id" 
    CellPadding="4" ForeColor="#333333" GridLines="None" AllowPaging="True" PageSize="23" AllowSorting="True"> 
    <Columns> 
     <asp:TemplateField HeaderText="Name" SortExpression="first_name" HeaderStyle-HorizontalAlign="Left"> 
     <ItemTemplate> 
      <a id="A1" runat="server" href='<%# string.Format("Controls/pgContractorDetails.aspx?ixPerson={0}", Eval("person_id")) %>'> 
      <%# Eval("first_name") + " " + Eval("last_name")%></a> 
     </ItemTemplate> 
     </asp:TemplateField> 
     <asp:BoundField DataField="rep_id" HeaderText="Rep ID" SortExpression="rep_id" HeaderStyle-HorizontalAlign="Left"/> 
     <asp:TemplateField HeaderText="Team Name" SortExpression="team_name" HeaderStyle-HorizontalAlign="Left"> 
     <ItemTemplate> 
      <a id="A1" runat="server" href='<%# string.Format("Controls/pgTeamDetails.aspx?ixTeam={0}", Eval("team_id")) %>'> 
      <%# Eval("team_name")%></a> 
     </ItemTemplate> 
     </asp:TemplateField> 

     <asp:BoundField DataField="campaign_name" HeaderText="Campaign" HeaderStyle-HorizontalAlign="Left" SortExpression="campaign_name" /> 
     <asp:BoundField DataField="state" HeaderText="State" HeaderStyle-HorizontalAlign="Left" SortExpression="state" /> 
     <asp:BoundField DataField="status_desc" HeaderText="Status" HeaderStyle-HorizontalAlign="Left" SortExpression="status_desc" /> 
    </Columns> 
    <PagerStyle BackColor="#003399" ForeColor="White" HorizontalAlign="Center" /> 
    <HeaderStyle CssClass="ui-widget-header" ForeColor="black" HorizontalAlign="Right" /> 
    <RowStyle BackColor="#F7F6F3" ForeColor="#333333" /> 
    <AlternatingRowStyle BackColor="White" ForeColor="#284775" /> 
    <EmptyDataTemplate> 
     Nothing found. 
    </EmptyDataTemplate> 
    </asp:GridView> 
    <asp:SqlDataSource ID="dsContractor" runat="server" ConnectionString="<%$ ConnectionStrings:DbConnectionString %>" 
    SelectCommand="app_contractor_list_search" SelectCommandType="StoredProcedure" CancelSelectOnNullParameter="true"> 
    <SelectParameters> 
     <asp:ControlParameter Name="searchterm" Type="String" ControlID="sQuery" PropertyName="Text" DefaultValue="*" /> 
    </SelectParameters> 
    </asp:SqlDataSource> 

Jede Art und Weise, dass, wenn ich auf der Pending Checkbox geklickt haben, und es wird herausfiltern alle Datensätze diesen Status nicht ausstehend?

+0

würde ich durch Entfernen 'runat =„server“' auf das Kontrollkästchen starten, wenn sie Client-Seite sein sollte;). Dann ist es nur eine Frage des Schreibens von Javascript, das die Zeilen filtert. – Rob

+0

Es ist möglich, können Sie eine dieser versuchen oder Ihren eigenen machen es sie nicht ausreichend sind, http://stackoverflow.com/questions/4031781/jquery-to-sort-gridview-columns-at-client-side – Adil

+0

Siehe http://dotnetprof.blogspot.in/2012/08/html-table-search-using-javascript.html. Sie können die JS-Suchfunktion einfach so ändern, dass sie Spalte und Text akzeptiert, um darin zu suchen. – niksofteng

Antwort

1

Sie können die Zeilen mit Hilfe von Javascript verstecken. Hier ist ein Code aus einem einfachen Beispiel.

<script type="text/javascript"> 
function Search_Gridview(strKey, strGV) { 
    var strData = strKey.value.toLowerCase().split(" "); 
    var tblData = document.getElementById(strGV); 
    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; 
    } 
}  

-Code ist auf dieser Seite. http://www.codescratcher.com/javascript/search-gridview-using-javascript/

Verwandte Themen