2009-07-09 46 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