如何在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文件中的命令字段的gridview：

<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>
...

注意如何更改gridview索引时，它调用函数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];

现在您在命令域中有箭头图像属性！