2009-07-09 69 views
1

.NET是否有某種類型的內置函數允許在GridView上進行過濾?我總是通過使用由帶動參數的動態存儲過程生成的數據源來編程我的過濾器。但爲了保持過濾器行始終存在,我必須放置代碼來創建用於在允許分頁的情況下在三個不同位置進行過濾的控件(Page_load,Gridview_Databound,Page_SaveStateComplete)它似乎必須有更好的方法。如果是這樣,怎麼樣?Gridview過濾內置函數?

回答

5

只有你做這項工作。退房

http://blog.evonet.com.au/post/Creating-a-Stylish-looking-Gridview-with-Filtering.aspx


正如在評論中指出,該網站無法訪問了。

步驟1:直接從鮑爾泰克Marnane的博客文章,你可以找到web.archive.com採取以下創建GridView和數據源

創建一個簡單的GridView和Datasouce。在這個例子中,我使用的是SQL數據源,但我建議在生產環境中使用ObjectDataSource。將ConnectionString設置爲web.config文件中的值以及每個字段的ItemStyle-Width,具體取決於數據類型和空間大小。

<asp:GridView ID="Gridview1" runat="server" AutoGenerateColumns="False" AllowPaging="True" 
 
AllowSorting="true" DataSourceID="dsGridview" Width="650px" PageSize="20" 
 
CssClass="Gridview"> 
 
<Columns> 
 
    <asp:BoundField DataField="id" HeaderText="id" SortExpression="id" 
 
     ItemStyle-Width="50px" ItemStyle-HorizontalAlign="Center" /> 
 
    <asp:BoundField DataField="FirstName" HeaderText="Sort" SortExpression="FirstName" 
 
     ItemStyle-Width="150px" /> 
 
    <asp:BoundField DataField="LastName" HeaderText="Sort" SortExpression="LastName" 
 
     ItemStyle-Width="150px" /> 
 
    <asp:BoundField DataField="Department" HeaderText="Sort" SortExpression="Department" 
 
     ItemStyle-Width="150px" /> 
 
    <asp:BoundField DataField="Location" HeaderText="Sort" SortExpression="Location" 
 
     ItemStyle-Width="150px" /> 
 
</Columns> 
 
</asp:GridView> 
 
<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
 
ConnectionString="<%$ ConnectionStrings:EvonetConnectionString %>" 
 
SelectCommand="SELECT * FROM [T_Employees]" />

第2步:創建用於GridView的頭

現在我們創建一個簡單的表來保存標題和過濾器下拉框的表。

<table style="width: 650px" border="0" cellpadding="0" cellspacing="1" 
 
class="GridviewTable"> 
 
<tr> 
 
    <td style="width: 50px;"> 
 
     ID 
 
    </td> 
 
    <td style="width: 150px;"> 
 
     First Name 
 
    </td> 
 
    <td style="width: 150px;"> 
 
     Last Name 
 
    </td> 
 
    <td style="width: 150px;"> 
 
     Department 
 
    </td> 
 
    <td style="width: 150px;"> 
 
     Location 
 
    </td> 
 
</tr> 
 
<tr> 
 
    <td style="width: 50px;"> 
 
    </td> 
 
    <td style="width: 150px;"> 
 
    </td> 
 
    <td style="width: 150px;"> 
 
    </td> 
 
    <td style="width: 150px;"> 
 
     <asp:DropDownList ID="ddldepartment" DataSourceID="dsPopulateDepartment" 
 
      AutoPostBack="true" DataValueField="department" runat="server" Width="130px" 
 
      Font-Size="11px" AppendDataBoundItems="true"> 
 
      <asp:ListItem Text="All" Value="%"></asp:ListItem> 
 
     </asp:DropDownList> 
 
    </td> 
 
    <td style="width: 150px;"> 
 
     <asp:DropDownList ID="ddlLocation" DataSourceID="dsPopulateLocation" 
 
      AutoPostBack="true" DataValueField="location" runat="server" Width="130px" 
 
      Font-Size="11px" AppendDataBoundItems="true"> 
 
      <asp:ListItem Text="All" Value="%"></asp:ListItem> 
 
     </asp:DropDownList> 
 
    </td> 
 
</tr> 
 
<tr> 
 
    <td colspan="5"> 
 
     <asp:GridView ID="Gridview1" runat="server" AutoGenerateColumns="False" 
 
      AllowPaging="True" AllowSorting="true" DataSourceID="dsGridview" 
 
      Width="650px" PageSize="10" CssClass="Gridview"> 
 
      <Columns> 
 
       <asp:BoundField DataField="id" HeaderText="Sort" SortExpression="id" 
 
        ItemStyle-Width="50px" ItemStyle-HorizontalAlign="Center" /> 
 
       <asp:BoundField DataField="FirstName" HeaderText="Sort" 
 
        SortExpression="FirstName" ItemStyle-Width="150px" /> 
 
       <asp:BoundField DataField="LastName" HeaderText="Sort" 
 
        SortExpression="LastName" ItemStyle-Width="150px" /> 
 
       <asp:BoundField DataField="Department" HeaderText="Sort" 
 
        SortExpression="Department" ItemStyle-Width="150px" /> 
 
       <asp:BoundField DataField="Location" HeaderText="Sort" 
 
        SortExpression="Location" ItemStyle-Width="150px" /> 
 
      </Columns> 
 
     </asp:GridView> 
 
    </td> 
 
</tr> 
 
</table>

對於最後一個單元格,在TD列跨度值設置爲你的GridView的字段數。將你的Gridview移動到最後一個單元格。

3步:創建樣式表

樣式表,我使用有以下三個項目:

.GridviewDiv {font-size: 62.5%; font-family: 'Lucida Grande', 
 
    'Lucida Sans Unicode', Verdana, Arial, Helevetica, sans-serif; color: #303933;} 
 
Table.Gridview{border:solid 1px #df5015;} 
 
.GridviewTable{border:none} 
 
.GridviewTable td{margin-top:0;padding: 0; vertical-align:middle } 
 
.GridviewTable tr{color: White; background-color: #df5015; height: 30px; text-align:center} 
 
.Gridview th{color:#FFFFFF;border-right-color:#abb079;border-bottom-color:#abb079; 
 
    padding:0.5em 0.5em 0.5em 0.5em;text-align:center} 
 
.Gridview td{border-bottom-color:#f0f2da;border-right-color:#f0f2da; 
 
    padding:0.5em 0.5em 0.5em 0.5em;} 
 
.Gridview tr{color: Black; background-color: White; text-align:left} 
 
:link,:visited { color: #DF4F13; text-decoration:none }

你應該能夠只是把它複製到你沒有它的css文件會影響你的退出樣式表,但是如果你已經在你的網站上設置了link::visited,那麼要小心。

步驟4:添加過濾下拉框和數據源

在步驟2中創建的表,包含要過濾的場的第二行中添加一個下拉列表到每個電池的。確保eac下拉列表小於它要進入的單元格,否則您的表格邊框將不會對齊。設置一個數據源,獲取表中該字段的每個可能值。我這樣做,通過運行DISTINCT爲表中的我過濾所有值:

<asp:DropDownList ID="ddldepartment" DataSourceID="dsPopulateDepartment" 
 
AutoPostBack="true" DataValueField="department" runat="server" Width="130px" Font-Size="11px" 
 
AppendDataBoundItems="true"> 
 
    <asp:ListItem Text="All" Value="%"></asp:ListItem> 
 
</asp:DropDownList> 
 
<asp:SqlDataSource ID="dsPopulateDepartment" runat="server" 
 
ConnectionString="<%$ ConnectionStrings:EvonetConnectionString %>" SelectCommand="SELECT 
 
DISTINCT Department from [T_Employees]"></asp:SqlDataSource>

爲您希望通過過濾字段創建儘可能多的dropdownlists。

有幾件事情需要注意:

設置AppendDataBoundItems = true屬性爲您的下拉列表,因爲它會在運行時被填充。 設置AutoPostBack = True屬性,以便在選擇更改時刷新Gridview。 確保您的ListItem中的'All'具有'%'作爲值。您的過濾器表達式將是SELECT * FROM [TABLE NAME]其中[FieldName]類似於「{0}%」,其中{0}是您的下拉列表中的值。如果您的下拉列表設置爲all,那麼查詢字符串將是SELECT * FROM [TABLE NAME]其中[FieldName]類似於'%%',其中SQL返回所有值。

步驟5:添加濾波以您的GridView的數據源

添加FilterExpress所以你的GridView的數據源如

[字段1]等 '{0}%' 和[字段2]等「{1 }'和'[Field3] like'{2}%'and [Field4] like'{3}%'and ... etc

然後,您的字段需要按照與您的過濾器相同的順序添加到FilterParameters部分表達。 FilterParameters部分引用您的下拉列表的SelectedValue。

<asp:SqlDataSource ID="dsGridview" runat="server" 
 
    ConnectionString="<%$ ConnectionStrings:EvonetConnectionString %>" 
 
    SelectCommand="SELECT * FROM [T_Employees]" FilterExpression="Department like '{0}%' 
 
    and Location like '{1}%'"> 
 
    <FilterParameters> 
 
     <asp:ControlParameter Name="Department" ControlID="ddldepartment" 
 
      PropertyName="SelectedValue" /> 
 
     <asp:ControlParameter Name="Location" ControlID="ddllocation" 
 
      PropertyName="SelectedValue" /> 
 
    </FilterParameters> 
 
</asp:SqlDataSource>

這就是它!

+0

很酷。我喜歡這個網站。謝謝! +1 – Eric 2009-07-09 17:49:06