asp.net - Gridview过滤内置功能？

Question

.NET 是否有某种类型的内置函数允许在 Gridviews 上进行过滤？我一直使用由带有参数的动态存储过程生成的数据源来编写我的过滤器。但是为了保持过滤器行始终存在，我必须放置代码来创建用于在允许分页时在三个不同位置进行过滤的控件（Page_load，Gridview_Databound，Page_SaveStateComplete）似乎必须有更好的方法. 如果是这样，如何？

score 6 · Accepted Answer

只有当你做这项工作。查看

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

如评论中所述，此站点不再可用。以下内容直接取自 Bartek Marnane 的博客条目，您可以在web.archive.com上找到：

第 1 步：创建 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 colspan 值设置为 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>

创建与您要过滤的字段一样多的下拉列表。

需要注意的几点：

为您的下拉列表设置 AppendDataBoundItems=True 属性，因为它将在运行时填充。设置 AutoPostBack=True 属性，以便在选择更改时刷新 Gridview。确保“All”的 ListItem 具有“%”作为值。您的过滤器表达式将为 SELECT * FROM [TABLE NAME] 其中 [FieldName] like '{0}%' 其中 {0} 是下拉列表中的值。如果您的下拉列表设置为全部，则查询字符串将为 SELECT * FROM [TABLE NAME] Where [FieldName] like '%%' 在 SQL 中返回所有值。

第 5 步：向 Gridview 的数据源添加过滤

添加一个 FilterExpress，以便您的 Gridview 的数据源，例如

[Field1] 喜欢 '{0}%' 和 [Field2] 喜欢 '{1}%' 和 [Field3] 喜欢 '{2}%' 和 [Field4] 喜欢 '{3}%' 等等

然后，您的字段需要以与过滤器表达式相同的顺序添加到 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>

而已！

asp.net - Gridview过滤内置功能？

1 回答 1

Related

Reference