如何在CommandField中旋转图像

Question

所以我有这些行，

​

​

在我的.aspx页面中，每行都有一个命令字段。

<asp:CommandField ControlStyle-BackColor="White" ItemStyle-BackColor="White"     SelectImageUrl="~/Styles/img/arrow_state_blue_right.png"
                                            ShowSelectButton="true" ButtonType="Image" ItemStyle-Width="3px"></asp:CommandField>

如您所见，命令字段使用的按钮类型是图像。图像是图片中每个命令字段中看到的蓝色小箭头。

当用户单击命令字段时，我希望箭头通过动画旋转。因此我编写了一个小小的javascript函数：

function rotateArrow() {
  document.getElementById("#arrow").style.WebkitTransitionDuration = "1s";
  document.getElementById("#arrow").style.webkitTransform = 'rotate(40deg)';
}

当箭头是图像字段时，此函数工作得很好。也就是说，如果我把箭头改为：

<asp:Image ImageURL=".....

但我不希望箭头是asp.NET图像字段，我希望它们成为我的命令字段中的按钮。

有办法这样做吗？如何告诉JavaScript旋转命令字段的箭头图像属性？我找不到这方面的任何信息，所以我开始认为这是不受支持的。我能想到的唯一解决办法并不意味着我失去了命令字段的功能，我可以简单地在后面的代码中更新selectImageURL属性，但是这样我就没有动画了。

Answer 1

如果其他人很难访问命令域中的属性或类似的东西，这里有一个解决方案。隐藏字段中的图像是ImageButton。下面是我的.aspx文件中命令字段的网格视图：

<asp:GridView ID="gvColumnsViewSettings" runat="server" Width="90%"  OnRowDataBound="gvColumnsViewSettings_RowDataBound" AutoGenerateColumns="false" GridLines="None" ShowHeader="false" ShowFooter="false" OnSelectedIndexChanged="gvColumnsViewSettings_SelectedIndexChanged" DataKeyNames="ColumnOrder">
    <Columns>
    <asp:CommandField ControlStyle-BackColor="White" ItemStyle-BackColor="White" SelectImageUrl="~/Styles/img/arrow_state_blue_right.png" ShowSelectButton="true" ButtonType="Image" ItemStyle-Width="3px"></asp:CommandField>
...

请注意，当网格视图索引发生更改时，它如何调用函数gvColumnsViewSettings_SelectedIndexChanged。

现在，在我后面代码中的SelectedIndexChanged函数中：

ImageButton arrow = null;
if(selectedRow.Cells != null && selectedRow.Cells.Count > 0 && selectedRow.Cells[0].Controls != null && selectedRow.Cells[0].Controls.Count > 0)
    arrow = (ImageButton)selectedRow.Cells[0].Controls[0];

现在，命令字段中有了箭头图像属性！