JavaScript实现Shift+鼠标左键多选

来源：互联网发布：乐语软件好用吗编辑：程序博客网时间：2024/06/06 08:55

.aspx代码:

================================================================================

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test_Test_Test" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>测试页</title>
    <script type="text/javascript">
    // 用于记录第一次选中的行号
    var selectedIndex = 0;

    // CheckBox 的 onClick 事件, 监听是否按下"Shift"键, 如果按下"Shift"键, 则实现多选
    function checkboxClick(obj)
    {
        // 获取主GridView
        var tableMain = obj.parentElement.parentElement.parentElement.parentElement;

        // 获取当前选中的行号
        var currIndex = 0;
        var count = tableMain.firstChild.childNodes.length;
        for(i = 0; i < count; i++)
        {
            if(tableMain.firstChild.childNodes[i].firstChild.firstChild.id == obj.id)
            {
                currIndex = i;
                break;
            }
        }

        // 判断是否按下了Shift键
        if(event.shiftKey)
        {
            // 将两次选中的记录之间的所有的记录都设为选中状态
            if(currIndex > 0 && selectedIndex > 0)
            {
                if(currIndex < selectedIndex)
                {
                    for(i = currIndex; i < selectedIndex; i++)
                    {
                        tableMain.firstChild.childNodes[i].firstChild.firstChild.checked = true;
                    }
                }
                else
                {
                    for(i = selectedIndex; i < currIndex; i++)
                    {
                        tableMain.firstChild.childNodes[i].firstChild.firstChild.checked = true;
                    }
                }
            }
        }

        // 判断CheckBox是否为选中, 如果为选中状态, 则记录当前的行号, 否则记录为"0"
        if(obj.checked)
        {
            selectedIndex = currIndex;
        }
        else
        {
            selectedIndex = 0;
        }
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <br />
        <asp:GridView ID="gvwMain" runat="server" AutoGenerateColumns="False" BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" GridLines="Horizontal" OnRowDataBound="gvwMain_RowDataBound">
            <HeaderStyle BackColor="#EBEBEB" />
            <Columns>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:CheckBox ID="chkSelected" runat="server" />
                    </ItemTemplate>
                    <HeaderStyle Width="60px" />
                    <ItemStyle HorizontalAlign="Center" />
                </asp:TemplateField>
                <asp:BoundField DataField="ID" HeaderText="编号">
                    <HeaderStyle HorizontalAlign="Center" Width="100px" />
                    <ItemStyle HorizontalAlign="Center" />
                </asp:BoundField>
                <asp:BoundField DataField="Name" HeaderText="姓名">
                    <HeaderStyle HorizontalAlign="Center" Width="200px" />
                    <ItemStyle HorizontalAlign="Center" />
                </asp:BoundField>
            </Columns>
        </asp:GridView>
    </div>
    </form>
</body>
</html>

================================================================================

.cs代码

================================================================================

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class Test_Test_Test : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            this.GridViewBind();
        }
    }

    private void GridViewBind()
    {
        // --- 手动生成8行数据 ------------------------------
        DataTable dtSource = new DataTable();
        dtSource.Columns.Add("ID", Type.GetType("System.Int32"));
        dtSource.Columns.Add("Name", Type.GetType("System.String"));
        DataRow row = dtSource.NewRow();
        row["ID"] = 1;
        row["Name"] = "Jack";
        dtSource.Rows.Add(row);
        row = dtSource.NewRow();
        row["ID"] = 2;
        row["Name"] = "Mack";
        dtSource.Rows.Add(row);
        row = dtSource.NewRow();
        row["ID"] = 3;
        row["Name"] = "Dorothy";
        dtSource.Rows.Add(row);
        row = dtSource.NewRow();
        row["ID"] = 4;
        row["Name"] = "Tony";
        dtSource.Rows.Add(row);
        row = dtSource.NewRow();
        row["ID"] = 5;
        row["Name"] = "Betty";
        dtSource.Rows.Add(row);
        row = dtSource.NewRow();
        row["ID"] = 6;
        row["Name"] = "Nan";
        dtSource.Rows.Add(row);
        row = dtSource.NewRow();
        row["ID"] = 7;
        row["Name"] = "Rick";
        dtSource.Rows.Add(row);
        row = dtSource.NewRow();
        row["ID"] = 8;
        row["Name"] = "Tina";
        dtSource.Rows.Add(row);
        // --------------------------------------------------

        // GridView 绑定数据源
        this.gvwMain.DataSource = dtSource;
        this.gvwMain.DataBind();

    }

    // GridView 的 RowDataBound 事件
    protected void gvwMain_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        // 为 CheckBox 添加 Client 的 onClick 事件, 实现按"Shift" + 鼠标左键实现多选
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            ((CheckBox)e.Row.FindControl("chkSelected")).Attributes.Add("onclick", "checkboxClick(this);");
        }
    }
}