javascript를 사용하여 gridview에서 항목을 필터링하는 방법

아래의 gridview에서 데이터를 필터링하고 싶습니다. 텍스트 상자가 있습니다. 포스트 코드없이 텍스트 상자의 값으로 제품 코드 필드를 필터링하고 싶습니다. 누구든지 자바 스크립트 기능이 될 것입니다 말해 줄래?javascript를 사용하여 gridview에서 항목을 필터링하는 방법

<td> 


    <asp:TextBox ID="TextBox1" runat="server" Width="362px"></asp:TextBox> 


</td> 

<td align="left" width="100%"> 
    <asp:datagrid id="Datagrid1" runat="server" Height="128px" Width="946px" 
     CellPadding="0" AutoGenerateColumns="False" BackColor="Transparent" BorderWidth="1px" 
     BorderColor="#E0E0E0" OnItemDataBound = " grdItemList_ItemDataBound"> 
     <AlternatingItemStyle CssClass="GridAlternateRowStyle"></AlternatingItemStyle> 
     <ItemStyle CssClass="GridRowStyle"></ItemStyle> 
     <HeaderStyle Font-Bold="True" CssClass="GridColumnHeaderStyle"></HeaderStyle> 
     <FooterStyle HorizontalAlign="Right" VerticalAlign="Middle"></FooterStyle> 
     <Columns> 
      <asp:TemplateColumn> 
       <HeaderStyle Width="25px"></HeaderStyle> 
       <HeaderTemplate> 
        <asp:CheckBox ID="CheckAll" language="javascript" onclick="return CheckAll_onclick(this.checked)" 
         Runat="server" /> 
       </HeaderTemplate> 
       <ItemTemplate> 
        <asp:CheckBox ID="DeleteThis" language="javascript" onclick="return DeleteThis_onclick(this.checked)" 
         runat="server" /> 
       </ItemTemplate> 
      </asp:TemplateColumn> 
      <asp:TemplateColumn> 
       <HeaderStyle Width="100px"></HeaderStyle> 
       <HeaderTemplate> 
        Product Code 
       </HeaderTemplate> 
       <ItemTemplate> 
        <asp:LinkButton ID="Code" Text='<%# DataBinder.Eval (Container.DataItem, "PRODUCTCODE") %>' runat="server" OnClick = "EditItem"/> 
       </ItemTemplate> 
      </asp:TemplateColumn> 
      <asp:BoundColumn HeaderText="Product ID" DataField="PRODUCTID" Visible = 'False'></asp:BoundColumn> 
      <asp:BoundColumn HeaderText="Product Name" DataField="PRODUCTNAME"></asp:BoundColumn> 
      <asp:BoundColumn HeaderText="Price" DataField="PRICE"></asp:BoundColumn> 
      <asp:BoundColumn HeaderText="Date" DataField="PURDATE"></asp:BoundColumn> 
     </Columns> 
     <PagerStyle NextPageText="" PrevPageText="" Mode="NumericPages"></PagerStyle> 
    </asp:datagrid> 
</td>

출처

2014-01-08 rafat

당신은 당신이 아약스 업데이트 패널을 넣어 절단 한 다음 텍스트 상자에 붙여 넣을 수 있습니다, Ajax를 구현해야 그리드보기를 선택한 다음 패널 내부의 단추 또는 텍스트 상자의 텍스트 변경 이벤트를 사용하여 프로그램 방식으로 그리드를 필터링하십시오. –

이런 종류의 클라이언트 측 필터링을 구현하는 좋은 방법이있는 knockout.js 사용을 고려하십시오. – sh1rts

나는 아약스에 대해 전혀 모른다. ajax 브라우저는 독립적입니까? 만약 내가 아약스 구현하려면 다음 전제 조건은 무엇입니까? @Usman Waheed – rafat

이 자바 스크립트 기능이 추가되어 제대로 작동합니다. 당신이 그물 점 을 사용하고 있기 때문에 다음의 gridview 같이 편집 된

<script type="text/javascript" charset="utf-8"> 

     function filter(term, _id, cellNr) { 
      var suche = term.value.toLowerCase(); 
      var table = document.getElementById(_id); 
      var ele; 
      for (var r = 1; r < table.rows.length; r++) { 
       ele = table.rows[r].cells[cellNr].innerHTML.replace(/<[^>]+>/g, ""); 
       if (ele.toLowerCase().indexOf(suche) >= 0) 
        table.rows[r].style.display = ''; 
       else table.rows[r].style.display = 'none'; 
      } 
     } 
</script> 


    Filter:<input type="text" id="FilterTextBox" name="FilterTextBox" onkeyup="filter(this, 'Datagrid1', 0)"/>

---

<td align="left" width="100%"> 
      <asp:datagrid id="Datagrid1" runat="server" Height="128px" Width="946px" 
       CellPadding="0" AutoGenerateColumns="False" BackColor="Transparent" BorderWidth="1px" 
       BorderColor="#E0E0E0" OnItemDataBound = " grdItemList_ItemDataBound" AllowSorting="true">

출처

2014-01-08 06:30:08 rafat

+1 자신 만의 문제를 풀어보세요. :) –

javascript를 사용하여 gridview에서 항목을 필터링하는 방법

답변

관련 문제