DataGrid 中的可点击行

引言

啊，每个人最喜欢的工具，DataGrid。虽然这是一个很棒的工具，但正如你们所知，它也可能很难使用。在我的几个页面制作中，DataGrid 是显示数据的首选武器，但它给我的网站用户界面留下了需求。被限制为点击按钮或链接来编辑数据或展开行，虽然仍然可以使用，但对于初次和经常使用的用户来说，这会引起相当多的困惑。所以，我手拿毛巾，开始寻找如何设置 DataGrid 的行以使其可点击。

背景

在我的探索中，我搜索了几个网站，这些网站提供了关于如何正确设置 DataGrid 以处理点击事件的一些或不完整的信息。经过几个小时的头疼和最终使其工作后，我发誓要记录这一切并分享代码，以尝试防止其他可怜的灵魂不得不经历我所经历的。

使用代码

使这项工作成功的想法是为该行创建一个 OnClick 事件，该事件模拟点击 ASP.NET WebForm 按钮；在我的例子中，它是一个选择按钮。如果你不熟悉 ASP.NET 的 web 表单控件的工作方式，当你点击它们时，它们会触发一个名为 __doPostBack(eventTarget, eventArgument) 的 JavaScript 函数。点击的控件将其 ID 传递给 JavaScript 函数，该函数开始回发过程。现在它变得很困难，因为这些 ID 是在查看页面时动态生成的，但至少是以一种可预测的方式。虽然设置并不难，但你需要做几件小事才能让一切都配合起来。

//The select button's code as viewed in the running page's source
<a href="javascript:__doPostBack('_ctl0$dgRequests$_ctl4$_ctl0','')">Select</a>
//The Datagrid row with our added attributes as viewed 
//in the running page's source. Notice how the onclick command 
//matches the select button above
<tr onmouseover="this.style.backgroundColor='beige';this.style.cursor='hand'" 
        onmouseout="this.style.backgroundColor='#D9E2FF';" 
        onclick="javascript:__doPostBack('_ctl0$dgRequests$_ctl4$_ctl0','')">

在我的例子中，我模拟一个选择按钮。所以，为此，我必须向我的 DataGrid 添加一个选择按钮列。但是，它不需要可见，因此此列可以隐藏。如果未添加此列，则点击事件将无法正确检测，并且事件侦听器将不知道如何触发正确的侦听器。接下来，OnClick 事件可以添加到 DataGrid 行。DataGrid 的 ItemCreated 事件用于将必要的 JavaScript 添加到每一行。唯一必要的行是 OnClick 属性；第一行将光标更改为手形光标并更改行背景的颜色，而第二行删除鼠标移出时的颜色更改。我将交替项目和项目分开，因为我将我的 DataGrid 设置为交替颜色以提高可见性。如果你没有使用颜色，你可以像在第二段代码中看到的那样，组合 if 语句。

private void dgRequests_ItemCreated(object sender, 
         System.Web.UI.WebControls.DataGridItemEventArgs e)
//For Datagrig's with alternating colors
{
    if(e.Item.ItemType == ListItemType.AlternatingItem)
    {
        e.Item.Attributes.Add("onmouseover", 
               "this.style.backgroundColor='beige';this.style.cursor='hand'");
        e.Item.Attributes.Add("onmouseout", "this.style.backgroundColor='#99B3FF';");
        e.Item.Attributes.Add("onclick", "javascript:__doPostBack" + 
               "('_ctl0$DataGrid1$_ctl" + 
               ((Convert.ToInt32(e.Item.ItemIndex.ToString()))+2) + 
               "$_ctl0','')");
    }
    if(e.Item.ItemType == ListItemType.Item)
    {
        e.Item.Attributes.Add("onmouseover", 
               "this.style.backgroundColor='beige';this.style.cursor='pointer'");
        e.Item.Attributes.Add("onmouseout", "this.style.backgroundColor='#D9E2FF';");
        e.Item.Attributes.Add("onclick", "javascript:__doPostBack" + 
               "('_ctl0$DataGrid1$_ctl" + 
               ((Convert.ToInt32(e.Item.ItemIndex.ToString()))+2) + 
               "$_ctl0','')");
    }
}

private void dgRequests_ItemCreated(object sender, 
                  System.Web.UI.WebControls.DataGridItemEventArgs e)
//For a single color Datagrid
{
    if(e.Item.ItemType == ListItemType.AlternatingItem || 
       e.Item.ItemType == ListItemType.Item)
    {
        e.Item.Attributes.Add("onmouseover", 
               "this.style.backgroundColor='beige';this.style.cursor='pointer'");
        e.Item.Attributes.Add("onmouseout", 
               "this.style.backgroundColor='#99B3FF';");
        e.Item.Attributes.Add("onclick", "javascript:__doPostBack" + 
               "('_ctl0$DataGrid1$_ctl" + 
               ((Convert.ToInt32(e.Item.ItemIndex.ToString()))+2) + 
               "$_ctl0','')");
    }
}

如果回发功能出现问题，你可以取消隐藏“选择”列，并查看运行时源代码，看看行回发功能是否与“选择”按钮匹配。

其余的代码以与选择按钮事件相同的方式处理；设置 SelecteIndexChanged 函数并创建事件侦听器。整个事情设置起来相当简单，并且可以为你想要的任何按钮列完成，从而避免了用户导航问题的风险！

如果你选择在 VB 中使用它，你需要进行的一个小更改是将 __doPostBack 函数更改为

e.Item.Attributes.Add("onclick", _
   "javascript:__doPostBack('dgRequests$_ctl" & _
   ((Convert.ToInt32(e.Item.ItemIndex)) + 2) & "$_ctl0','')")

结论

当我开始研究这个问题时，我不熟悉 ASP.NET 使用的 __doPostBack 函数，所以对我来说这是一个有趣的项目。这是一个改善你的 UI 的简单方法，而且，一个快乐的用户 = 安静！*拿出毛巾并伸出大拇指* 下次再见！

历史

• 05-11-26 - 初稿。
• 05-11-28 - 更改了 OnMouseOver 事件以更好地处理 Firefox 并为 VB.NET 添加了 OnClick 事件。