javascript - 使用 shift 和鼠标左键选择 gridview 多行

Question

我需要使用鼠标按钮支持 shift 键。我的要求是通过选择第一行来选择多行，然后使用 shift 键单击网格的最后一行，它会选择第一行和最后一行之间的所有行。

如何在 ASP.NET Gridview 中实现它

Answer 1

您应该在客户端执行此操作。在那里，您必须将 JavaScript 或 JQuery 与 CSS 一起使用。而且，您应该知道 GridView 最终会在客户端转换为 HTML 表格。这里有一个提示供您尝试。请按照以下步骤操作。

假设 - GridView 中的每一行都有一个行号和一个隐藏字段以指示它是否被选中(您可以在加载数据时轻松执行此操作)。

1. 创建两个名为 SelectedRow 和 DefaultRow 的 CSS 类(您可以为这些类使用任何您喜欢的名称)。

2. 当您第一次加载表格时，所有行都应将 CSS 类 DefaultRow 和隐藏字段值设置为 0(或您喜欢的任何值，以指示未选择行).

3. 编写 JavaScript 或 JQuery 来处理第一行 (TR) 单击(在此阶段您不会按下 Shift)并将该行 (TR) 的 CSS 类更改为 SelectedRow 和将隐藏字段值设置为 1。并且，将此第一行编号保存在单独的隐藏字段中，以便轻松识别所选的第一行。

注意:在同一个函数中，您应该将其余行的 CSS 类设置为 DefaultRow。这只是为了清除所有选择，如果用户只是在没有 Shift 键的情况下单击。

1. 现在。编写 JavaScript 或 JQuery 来处理 HTML 行上的 Shift + Click 并更改该行 (TR) 和所有其他行的 CSS 类(+ 或 - 基于第一行编号)从第一行选择 (您刚刚保存在隐藏字段中的行号)到 SelectedRow。在此阶段，您应该将所选行的所有隐藏字段值设置为 1。

这是一个在 JQuery 中处理 Shift + Click 事件的例子

$(document).click(function(e) {
    if (e.shiftKey) {
        alert("shift+click")
    } 
});

1. 现在您可以从后面的代码中读取隐藏的字段值，并对选定的行进行任何您喜欢的处理。

希望您理解这里的逻辑。 :)