Question

当GridViewRow被选中时，我很难点击我的复选框。我正在使用.sortable和.selectable jQuery方法。下面的所有内容都符合我的要求，但我还希望在我cbBulkSort的第一列内的GridView复选框中打勾。在我的代码的C＃中，我需要更新数据库，Checkbox cbBulkSort有助于确定我想要更新的记录。对于一个示例，我想选择GridView的底部2行并向数据库发送更新。但是，我需要检查复选框控件，以便知道要更新的记录。

的jQuery

    $(function () {
        $('[id*=gvSchedule]').selectable({
            cancel: '.sort-handle'
        }).sortable({
            items: 'tr:not(tr:first-child)',
            cursor: 'pointer',
            handle: '.sort-handle',
            helper: function (e, item) {
                if (!item.hasClass('ui-selected')) {
                    item.parent().children('.ui-selected').removeClass('ui-selected');
                    item.addClass('ui-selected');
                }

                var selected = item.parent().children('.ui-selected').clone();
                item.data('multidrag', selected).siblings('.ui-selected').remove();
                return $('<li/>').append(selected);
            },
            stop: function (e, ui) {
                var selected = ui.item.data('multidrag');
                ui.item.after(selected);
                ui.item.remove();
            }
        });
    });

CSS

    #gvSchedule {
        list-style: none;
        padding-left: 0;
    }

    #gvSchedule .sort-handle {
        display: none;
    }

    #gvSchedule .ui-selected .sort-handle
     {
        display: inline;
        padding: 0 0.5em;
        cursor: pointer;
    }

    tr.ui-selected {
        background-color: #D71826;
        color: black;
        font-weight: bold;
        background-image: none;
    }
    tr.ui-selecting {
        background-color: #D71826;
        color: white;
        font-weight: bold;
        background-image: none;
    }

Asp.Net

    <asp:GridView ID="gvSchedule" runat="server" AutoGenerateColumns="false" DataKeyNames="RowNum,TOG_aspirationId" OnRowEditing="OnRowEditing" RowStyle-Wrap="false">
            <Columns>
                <asp:TemplateField HeaderStyle-CssClass="gvInventoryPadding" ItemStyle-CssClass="gvInventoryPadding">
                    <ItemTemplate>
                        <span class="sort-handle">&#9778;</span>
                        <asp:CheckBox ID="cbBulkSort" runat="server" />
                        <input type="hidden" name="AspirationId" value='<%# Eval("TOG_aspirationId") %>' />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField DataField="TOG_asp_time" HeaderText="Asp Time" SortExpression="tog_asp_time" HeaderStyle-CssClass="gvInventoryPadding" ItemStyle-CssClass="gvInventoryPadding" ItemStyle-Width="50" />
                <asp:BoundField DataField="tog_donoridname" HeaderText="Donor" SortExpression="tog_donoridname" ReadOnly="true" HeaderStyle-CssClass="gvInventoryPadding" ItemStyle-CssClass="gvInventoryPadding" />
                <asp:BoundField DataField="tog_sireidname" HeaderText="Sire" SortExpression="tog_sireidname" ReadOnly="true" HeaderStyle-CssClass="gvInventoryPadding" ItemStyle-CssClass="gvInventoryPadding" />
                <asp:BoundField DataField="tog_sementypename" HeaderText="Semen Type" SortExpression="tog_sementypename" ReadOnly="true" HeaderStyle-CssClass="gvInventoryPadding" ItemStyle-CssClass="gvInventoryPadding" />
                <asp:BoundField DataField="tog_parityname" HeaderText="Parity" SortExpression="tog_parityname" ReadOnly="true" HeaderStyle-CssClass="gvInventoryPadding" ItemStyle-CssClass="gvInventoryPadding" />
                <asp:BoundField DataField="tog_breedname" HeaderText="Breed" SortExpression="tog_breedname" ReadOnly="true" HeaderStyle-CssClass="gvInventoryPadding" ItemStyle-CssClass="gvInventoryPadding" />
                <asp:BoundField DataField="tog_poolname" HeaderText="Pooled" SortExpression="tog_poolname" ReadOnly="true" HeaderStyle-CssClass="gvInventoryPadding" ItemStyle-CssClass="gvInventoryPadding" />
                <asp:BoundField DataField="tog_accountidname" HeaderText="Account" SortExpression="tog_accountidname" ReadOnly="true" HeaderStyle-CssClass="gvInventoryPadding" ItemStyle-CssClass="gvInventoryPadding" />
                <asp:TemplateField HeaderStyle-CssClass="gvInventoryPadding" ItemStyle-CssClass="gvInventoryPadding" >
                <ItemTemplate>
                    <asp:LinkButton Text="Edit" runat="server" CommandName="Edit" />
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:LinkButton Text="Update" runat="server" OnClick="OnUpdate" />
                    <asp:LinkButton Text="Cancel" runat="server" OnClick="OnCancel" />
                </EditItemTemplate>
            </asp:TemplateField>
            </Columns>
            <AlternatingRowStyle BackColor="#e9e9e9" />
            <HeaderStyle BackColor="#e9e9e9" ForeColor="#D71826" />
            <EmptyDataTemplate>
                Empty
            </EmptyDataTemplate>
        </asp:GridView>

Answer 1

我只需将复选框放在<span>标记中就像这样

            <asp:TemplateField HeaderStyle-CssClass="gvInventoryPadding" ItemStyle-CssClass="gvInventoryPadding">
                <ItemTemplate>
                    <span class="sort-handle">&#9778;<asp:CheckBox ID="cbBulkSort" runat="server" /></span>
                    <input type="hidden" name="AspirationId" value='<%# Eval("TOG_aspirationId") %>' />
                </ItemTemplate>
            </asp:TemplateField>

jQuery使用复选框拖放多个Gridview行

1 个答案: