TableActionProvider – 行可点击的 HTML 表格

• 下载源代码文件 - 23.1 Kb

引言

我需要使 DataGrid 行可点击。 代码必须是可重用的，这样它就可以应用于 ASP.NET 2.0 GridView 或 HTML Table 控件。 这意味着代码将使用 JavaScript，并为 HTML table 元素添加功能。

可以在此处查看在线演示。

背景

我们这些已经研究并实现了此问题解决方案的人可能已经实现了类似 Dave Hurt 在DataGrid 中的可点击行中的方案。 此实现对我不起作用，因为它仅限于 DataGrid。 当然，我可以为 GridView 编写相同的代码；但这对于可重用性来说不是最佳途径。 除此之外，我们的开发团队过去遇到了字符串连接内存泄漏，并制定了尽可能避免字符串连接的规则。

使用代码

要使用该脚本，您需要在您的 html 中包含两个文件：EventManager.js 和 TableActionProvider.js。

您将使用最常见的代码是

// TableActionProvider.add(gridID, backgroundColor,
//    foreColor, rowToStartHoverEffect, null, true);
TableActionProvider.add("grid1", "blue", "white", 1, null, true);

上面的代码是为了给 ID 为“grid1”的 HTML table 元素添加单击功能。鼠标悬停/高亮的颜色是背景为“蓝色”，前景为“白色”。 我们也从第一行开始悬停效果，因为 DataGrid 将其标题放在第零行。 以下是供参考的 Add 方法标头

/*
----o0o============================================================o0o----
Desc:    Main function for adding action to a html table
Inputs:
    ctrl            - table control reference or id string
    backgroundColor - background color when mouse over
    color           - fore color when mouse over
    startRow        - table row to start effect 
    actionFunction  - pointer to function when click or dblclick
    useSingleClick  - true to fire action on single click

----o0o============================================================o0o----
*/
add: function (ctrl, backgroundColor, color, 
       startRow, actionFunction, useSingleClick) {

为什么我将 actionFunction 设置为 null，它有什么作用？ 网格的一般做法是将操作链接或按钮放在第一列或最后一列。 TableActionProvider 实现的规则是操作链接或按钮应始终位于第一列。 将 actionFunction 设置为 null 会告诉 TableActionProvider 点击第一列中的第一个可点击项目。

但是，当用户单击网格行上的任何位置时，您可以通过提供自己的 actionFunction 来告诉 TableActionProvider 不要执行您自己的操作。 例如，假设您希望在单击行时提醒用户第三列的内容

function alertColumnThree(row) {
    if (row != null && row.cells.length > 3)
        alert(row.cells[2].innerText);
}

TableActionProvider.add("grid1", "blue", "white", 1, 
                            alertColumnThree, true);

正如您所看到的，action 函数接受一个表格行作为其参数，因为 TableActionProvider 在调用该函数时会传递此数据。

默认情况下，TableActionProvider 响应双击，除非您将 useSingleClick 设置为 true。 在某些情况下，用户希望能够从网格复制数据，以便他们可以将其粘贴到诸如报告或电子邮件之类的地方。 这时我会将 useSingleClick 设置为 false，或者干脆忽略它。

另一个需要注意的是，TableActionProvider.add 必须在您的网格加载后使用。 该脚本应该添加到 window 或 body OnLoad 事件中的某个位置。 您也可以使用 ASP.NET Page.RegisterStartupScript 来注册 Add 方法。

结论

TableActionProvider 通过提供一种简单且可重用的方法来在任何 HTML 表格上提供行点击功能，从而满足了我的需求。 当然，还有更多可能的增强功能

• 使用右键单击进行操作，左键单击进行选择。
• 为处理选定的项目提供着色。
• 使用 CSS 类代替原始着色。