javascript - 复选框在 gridview asp.net 中使用 Shift 键进行多项选择

Question

我正在使用 vs 2010 和 C#。我想选择在 GridView 中使用 Shift 键检查的多行

我尝试使用java脚本但不起作用

这是我的网格

<asp:GridView ID="gvDetails" runat="server" AutoGenerateColumns="false"   CssClass="normtxt"
                                     HeaderStyle-BackColor="#819FF7" ShowFooter="true" HeaderStyle-Font-Bold="true" EmptyDataText="No records found" 
                                     OnRowCancelingEdit="gvDetails_RowCancelingEdit" 
                                     OnRowDeleting="gvDetails_RowDeleting"
                                    OnRowEditing="gvDetails_RowEditing" OnRowUpdating="gvDetails_RowUpdating" OnRowCommand="gvDetails_RowCommand">
                                     <RowStyle ForeColor="#000066" BorderColor="#7BA1C3" />
                                       <HeaderStyle BackColor="#7BA1C3" Font-Bold="false" ForeColor="White" CssClass="lockHeadDivdgrid" />
                                    <Columns>
                                        <asp:TemplateField ItemStyle-Width="40px">
                                            <HeaderTemplate>
                                                <asp:CheckBox ID="chkAll" runat="server" Text="All"   AutoPostBack="true"
                                                    OnCheckedChanged="chkAll_OnCheckedChanged" />
                                            </HeaderTemplate>
                                            <ItemTemplate>
                                                <asp:CheckBox ID="chkOne" onclick='<%# string.Format("javascript:selectCheckbox(this,{0});", Container.DataItemIndex) %>' runat="server"  AutoPostBack="true" OnCheckedChanged="chkAll_OnCheckedChanged" />
                                            </ItemTemplate>

                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="ParagraphStyle" ItemStyle-Width="150" ItemStyle-HorizontalAlign="Left">
                                            <ItemTemplate>
                                                <asp:Label ID="lblParagraphStyle" runat="server" Text='<%#Eval("ParagraphStyle") %>' />
                                                <asp:TextBox ID="txtParagraphStyle" runat="server" Text='<%# Eval("ParagraphStyle") %>'
                                                    Visible="false" CssClass="txt_1"></asp:TextBox>
                                                <asp:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" ServiceMethod="AutoCompleteAjaxParaRequest"
                                                    ServicePath="Service1.asmx" MinimumPrefixLength="1" CompletionInterval="100"
                                                    EnableCaching="false" CompletionSetCount="10" TargetControlID="txtParagraphStyle"
                                                    FirstRowSelected="true" ShowOnlyCurrentWordInCompletionListItem="true">
                                                </asp:AutoCompleteExtender>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="Parent" ItemStyle-Width="150" ItemStyle-HorizontalAlign="Left">
                                            <ItemTemplate>
                                                <asp:Label ID="lblParent" runat="server" Text='<%# Eval("Parent") %>'></asp:Label>
                                                <asp:TextBox ID="txtParent" runat="server" Text='<%#Eval("Parent") %>' Visible="false" CssClass="txt_1" />
                                                <asp:AutoCompleteExtender ID="AutoCompleteExtender2" runat="server" ServiceMethod="AutoCompleteAjaxParentRequest"
                                                    ServicePath="Service1.asmx" MinimumPrefixLength="1" CompletionInterval="100"
                                                    EnableCaching="false" CompletionSetCount="10" TargetControlID="txtParent" FirstRowSelected="true"
                                                    ShowOnlyCurrentWordInCompletionListItem="true">
                                                </asp:AutoCompleteExtender>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="fnCriteria" ItemStyle-Width="150" ItemStyle-HorizontalAlign="Left">
                                            <ItemTemplate>
                                                <asp:Label ID="lblfnCriteria" runat="server" Text='<%# Eval("fnCriteria") %>'></asp:Label>
                                                <asp:TextBox ID="txtfnCriteria" runat="server" Text='<%#Eval("fnCriteria") %>' Visible="false"
                                                    CssClass="txt_1" />
                                                <asp:AutoCompleteExtender ID="AutoCompleteExtender3" runat="server" ServiceMethod="AutoCompleteAjaxfnCriteriaRequest"
                                                    ServicePath="Service1.asmx" MinimumPrefixLength="1" CompletionInterval="100"
                                                    EnableCaching="false" CompletionSetCount="10" TargetControlID="txtfnCriteria"
                                                    FirstRowSelected="true" ShowOnlyCurrentWordInCompletionListItem="true">
                                                </asp:AutoCompleteExtender>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="fnCase" ItemStyle-Width="10" ItemStyle-HorizontalAlign="Left">
                                            <ItemTemplate>
                                                <asp:Label ID="lblfnCase" runat="server" Width="50px" Text='<%# Eval("fnCase") %>'></asp:Label>
                                                <asp:TextBox ID="txtfnCase" runat="server" Text='<%#Eval("fnCase") %>' Visible="false" CssClass="txt_1" />
                                                <asp:AutoCompleteExtender ID="AutoCompleteExtender4" runat="server" ServiceMethod="AutoCompleteAjaxfnCaseRequest"
                                                    ServicePath="Service1.asmx" MinimumPrefixLength="1" CompletionInterval="100"
                                                    EnableCaching="false" CompletionSetCount="10" TargetControlID="txtfnCase" FirstRowSelected="true"
                                                    ShowOnlyCurrentWordInCompletionListItem="true">
                                                </asp:AutoCompleteExtender>

                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="fnFormat" ItemStyle-Width="150" ItemStyle-HorizontalAlign="Left">
                                            <ItemTemplate>
                                                <asp:Label ID="lblfnFormat" runat="server" Text='<%# Eval("fnFormat") %>'></asp:Label>
                                                <asp:TextBox ID="txtfnFormat" runat="server" Text='<%#Eval("fnFormat") %>' Visible="false" CssClass="txt_1" />
                                                <asp:AutoCompleteExtender ID="AutoCompleteExtender5" runat="server" ServiceMethod="AutoCompleteAjaxfnFormatRequest"
                                                    ServicePath="Service1.asmx" MinimumPrefixLength="1" CompletionInterval="100"
                                                    EnableCaching="false" CompletionSetCount="10" TargetControlID="txtfnFormat" FirstRowSelected="true"
                                                    ShowOnlyCurrentWordInCompletionListItem="true">
                                                </asp:AutoCompleteExtender>
                                            </ItemTemplate>
                                        </asp:TemplateField>

我的 JavaScript 是

 <script type="text/javascript">
     var startingIndex = 0, gridViewID = '<%= gvDetails.ClientID %>';
     function selectCheckbox(checkbox, selectedInded) {
         alert(gridViewID);
           if (event.shiftKey) {
               //shift end
               alert("");
               if (startingIndex < selectedInded)
               //forward
                   $(':checkbox', '#' + gridViewID).slice(startingIndex, selectedInded).prop("checked", true);
               else
               //backward
                   $(':checkbox', '#' + gridViewID).slice(selectedInded, startingIndex).prop("checked", true);
           }
           startingIndex = selectedInded;
       }
</script>

建议我找到解决方案。提前致谢

Answer 1

您无法像这样访问事件对象。它仅在事件处理程序的范围内定义，在本例中是 onclick 属性值内的代码。如果您想从那里调用另一个函数，您应该将 event 对象作为参数传递。

而且您还混合了客户端和服务器端事件，这似乎不是您想要的，因此我删除了服务器事件处理程序并将 AutoPostBack 设置为 false .

标记代码中的复选框变为:

<asp:CheckBox ID="chkOne" onclick='<%# string.Format("javascript:selectCheckbox(event,{0});", Container.DataItemIndex) %>' runat="server" AutoPostBack="false" />

你的脚本:

 <script type="text/javascript">
     var startingIndex = 0, gridViewID = '<%= gvDetails.ClientID %>';
     function selectCheckbox(e, selectedIndex) {
           if (e.shiftKey) { alert("shift pressed");
               if (startingIndex < selectedIndex)
               {
                   alert( $(':checkbox', '#' + gridViewID).length);
                   $(':checkbox', '#' + gridViewID).slice(startingIndex, selectedIndex).prop("checked", true);
               }
               else
                   $(':checkbox', '#' + gridViewID).slice(selectedIndex, startingIndex).prop("checked", true);
           }
           startingIndex = selectedIndex;
       }
</script>

这是我的测试，运行良好。我使用了一个简单的DataSource，但它也适用于任何其他源。只是为了给你正确的方向。

WebForm1.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
   <script type="text/javascript">
     var startingIndex = 0, gridViewID = '<%= gvDetails.ClientID %>';
     function selectCheckbox(e, selectedIndex) {
         if (e.shiftKey) {
             alert("shift pressed");
             if (startingIndex < selectedIndex) {
                 alert($(':checkbox', '#' + gridViewID).length);
                 $(':checkbox', '#' + gridViewID).slice(startingIndex, selectedIndex).prop("checked", true);
             }
             else
                 $(':checkbox', '#' + gridViewID).slice(selectedIndex, startingIndex).prop("checked", true);
         }
         startingIndex = selectedIndex;
     }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:GridView ID="gvDetails" runat="server" AutoGenerateColumns="false">
            <Columns>
                <asp:TemplateField ItemStyle-Width="40px">
                    <HeaderTemplate>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:CheckBox ID="chkOne" onclick='<%# string.Format("javascript:selectCheckbox(event,{0});", Container.DataItemIndex) %>' runat="server" AutoPostBack="false" />
                    </ItemTemplate>
                </asp:TemplateField>
                </Columns>
        </asp:GridView>

    </form>
</body>
</html>

和WebForm1.aspx.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication2
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            gvDetails.DataSource = new int[] { 0, 1, 2, 3, 4, 5, 6 };
            gvDetails.DataBind();
        }

    }
}