将位于 Gridview 外部的复选框与 Gridview 内的复选框(一列)对齐

Align checkbox sat outside of Gridview to checkboxes (one column) within Gridview

我在尝试将位于网格外部的独立复选框与其中包含复选框的列对齐时不知所措,网格会根据返回的内容调整每个视图的宽度。

我的想法是尝试获取列的定位,然后以编程方式应用于独立复选框,但没有返回任何内容。

有没有一种简单的方法来引用相关列的定位,然后将左侧和高度应用于独立复选框?我想坐在下面,还是我应该以完全不同的方式解决这个问题?

我能想到的有两种方法。

首先,考虑将复选框放在页脚中。

所以,假设我们将此添加到标记中:

            <asp:BoundField DataField="Description" HeaderText="Description" ItemStyle-Width="270" />
            <asp:TemplateField HeaderText="Active" 
                ItemStyle-HorizontalAlign="Center"
                FooterStyle-HorizontalAlign="Center"
                >
                <ItemTemplate>
                    <asp:CheckBox ID="chkActive" runat="server" 
                        Checked='<%# Eval("Active") %>'/>
                </ItemTemplate>
                <FooterTemplate>
                    <asp:CheckBox ID="CheckBox1" runat="server" />
                </FooterTemplate>
            </asp:TemplateField>

所以我将复选框放在页脚中。

我们得到这个:

然而,对于第二种可能?在上面注意我如何在上面的网格外有一个复选框 - (左侧)。该标记是这样的:

       </Columns>
        
    </asp:GridView>
    <br />
        <asp:CheckBox ID="CheckBox2" runat="server" ClientIDMode="Static" OnCheckedChanged="CheckBox2_CheckedChanged"/>
        <br />

那么,换一种方式?我们可以从 GridView 中抓取一行,然后说使用 jQuery.

因此,第一行和第一个复选框将是

GridView1_chkActive_0

因此,将此脚本转储到 运行(无功能 - 只是代码)

        <script>
                gCheckg = $('#GridView1_chkActive_0')
                gCheck = $('#CheckBox2')
                gCheck.offset({ top: gCheck.offset().top, left: gCheckg.offset().left })

        </script>

所以,这将移动复选框,我们得到:

因此,从 GridView 中提取复选框的值,然后将其用于网格外部的复选框(或控件)。