GridView实现鼠标移动是，动态显示‘编辑、删除、查看’等命令按钮

GridView实现鼠标移动是，动态显示‘编辑、删除、查看’等命令按钮

 

也就是说：当鼠标在GridView中每行移动时，会对应显示每一行的操作命令按钮，如：编辑、查看、删除等

 

具体看代码吧，不让传图片了，呵呵。

 

css：

 <style type="text/css">
    .row-actions {
 visibility: hidden;
 padding: 2px 5px 0 5px;
 margin-left:10px;
 BACKGROUND: #eee;
 display:inline-block;
 font-size:12px;
}
.row-actions a,.row-actions a:link,.row-actions a:visited
{
 text-decoration:underline!important;
}

tr:hover .row-actions{
 visibility: visible;
}
    </style>

 

aspx中在GridView中添加模板列：

 

<asp:TemplateField>
                    <HeaderTemplate>
                        名称</HeaderTemplate>
                    <ItemTemplate>
                        <a href="default.aspx?BrandName=<%# Server.UrlEncode( Eval("Name").ToString())%>"
                            title="<%# Eval("Name")%>" target="_self">
                            <%# Eval("BrandName")%></a>
                            <%# GetActionsLink(Eval("Name").ToString(), Eval("Name").ToString(), Eval("Name").ToString())%>
                    </ItemTemplate>
                </asp:TemplateField>

 

cs文件有个方法来生成连接GetActionsLink

 

public string GetActionsLink(string ID, string state, string linkUrl)
    {
        string actions = "<span class=/"row-actions/"><u> <span class=/"edit/"><a href=/"{0}/" title=/"编辑这篇文章/">编辑</a> | </span><span class=/"view/"><a href=/"{1}/" title=/"查看前台效果/" >查看</a> | </span>";
        actions += "<span class=/"delete/"><a href=/"javascript:deleteOneArticle('{2}');/" title=/"删除本条信息/" >删除</a></span> </u></span>";
        return string.Format(actions, "ddd", linkUrl, ID);
    }