更改 gridview 中的排序图像按钮
<asp:ImageButton ID="lnkEmpIdUp" runat="server" ImageUrl="~/Images/upArrow.png" CommandName="EMP_ID_NO" OnClick="lnkSorting_Click" />
<asp:ImageButton ID="lnkEmpIdDown" runat="server" ImageUrl="~/Images/downArrow.png" CommandName="EMP_ID_NO" OnClick="lnkSorting_Click" />
如上面的代码所示，有 2 个图像按钮（保留在 Gridview 标题模板中），单击后将执行排序。仔细观察会发现两个控件具有相同的命令名称和相同的 onClick 事件。
OnClick 事件通过命令名称处理要排序的列，并通过隐藏字段处理排序方向。请参阅下面的代码
protected void lnkSorting_Click(object sender, EventArgs e)
{
// Initialize variables
//Get Dataset values here for the grid.
var imgSort = sender as ImageButton;
string colName = imgSort.CommandName;
if (imgSort.ImageUrl.Trim().ToUpper().Contains(("up").ToUpper())) // If Up(Ascending)arrow is clicked.
{
if (hdnSortDir.Value.Equals(string.Empty) || hdnSortDir.Value.ToString().Equals("desc"))
{
hdnSortDir.Value = "asc";
//imgSort.ImageUrl = "~/Images/ascending.gif";
}
}
else if (imgSort.ImageUrl.Trim().ToUpper().Contains(("down").ToUpper()))
{
hdnSortDir.Value = "desc";
}
.....Sorting Logic...
}
我的疑问：当在 gridview 中执行排序时，如何在运行时更改图像？假设对“员工姓名”列进行升序排序后，该列的升序图像应更改为其他图像，以便用户可以识别哪一列正在排序以及朝哪个方向排序。
请帮忙！！！
谢谢！
<asp:ImageButton ID="lnkEmpIdUp" runat="server" ImageUrl="~/Images/upArrow.png" CommandName="EMP_ID_NO" OnClick="lnkSorting_Click" />
<asp:ImageButton ID="lnkEmpIdDown" runat="server" ImageUrl="~/Images/downArrow.png" CommandName="EMP_ID_NO" OnClick="lnkSorting_Click" />
As the above code says, there are 2 images button (Kept in Gridview header template) which clicked, would perform sorting. Close look would result that both the controls have same command name and same onClick Event.
The OnClick Event handles the column to be sorted through command name and the sorting direction is handled through hidden field. See below code
protected void lnkSorting_Click(object sender, EventArgs e)
{
// Initialize variables
//Get Dataset values here for the grid.
var imgSort = sender as ImageButton;
string colName = imgSort.CommandName;
if (imgSort.ImageUrl.Trim().ToUpper().Contains(("up").ToUpper())) // If Up(Ascending)arrow is clicked.
{
if (hdnSortDir.Value.Equals(string.Empty) || hdnSortDir.Value.ToString().Equals("desc"))
{
hdnSortDir.Value = "asc";
//imgSort.ImageUrl = "~/Images/ascending.gif";
}
}
else if (imgSort.ImageUrl.Trim().ToUpper().Contains(("down").ToUpper()))
{
hdnSortDir.Value = "desc";
}
.....Sorting Logic...
}
My Doubt: How can i change the image at run time when the sorting is performed in gridview? Say after sorting the column "Employee Name" ascending, the ascending image for that column should change to some other image so that user could identify as to which column is sort and in which direction.
Please help!!!
Thanks!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
通常对于排序，当您设置
AllowSorting="true"时，您可以单击列标题进行排序。重复单击将切换排序方向。对于排序指示，在 ASP.NET 4 之前，您必须编写自定义代码以在列标题中插入图像以指示排序方向。但是，对于 ASP.NET 4，您可以使用 SortedAscendingHeaderStyle & SortedDescendingHeaderStyle 属性来关联某些style 或 css 类到标题（您还具有用于样式排序单元格的属性 - 请参阅 SortedAscendingCellStyle & SortedDescendingCellStyle) - 通常，您可以使用 css 设置背景图像以在列标题中显示排序方向。请参阅这些文章以更好地理解该方法：
编辑：如上所述，对于 ASP.NET 2.0-3.5，您需要编写自定义代码以将这些排序图标推送到列标题中。例如，请参阅本文< /a> 其中扩展的网格视图可以执行相同的操作或参见 this 其中
RowDataBound事件用于将 css 类应用到列标题（类将设置背景排序图像）或参见 this 使用RowCreated事件实际将图像控件添加到标题中细胞。有相当多的替代但类似的变体可能 - 就我个人而言，我更喜欢应用 CSS 类的第二种方法。Typically for sorting, when you set
AllowSorting="true", you can click on column header to sort. Repeated clicking will toggle the sort direction. For sorting indication, before ASP.NET 4, you have to write custom code to insert an image in column header to indicate sorted direction. However, with ASP.NET 4, you can use SortedAscendingHeaderStyle & SortedDescendingHeaderStyle properties to associate some style or css class to headers (you also have properties for styling sorted cells - see SortedAscendingCellStyle & SortedDescendingCellStyle) - so typically, you can have css that sets the background image to show sort direction in column header.Look at these articles to understand the approach better:
EDIT: As said above, for ASP.NET 2.0-3.5, you need to write custom code to push those sort icons into column headers. For example, see this article where a grid-view in extended to do the same OR see this where
RowDataBoundevent is used to apply the css class to column header (classes will set back-ground sort image) OR see this that usesRowCreatedevent to actually add image control into header cell. There are quite a few alternate but similar variations possible - personally, I prefer 2nd approach of applying CSS classes.通过在隐藏字段中设置排序表达式和排序方向值，可以在 rowdatabound 中完成相同的操作。
The same can be done in rowdatabound by setting the sort expression and sort direction values in hidden field.