Javascript 嵌套网格视图从父网格中选择嵌套网格中的所有复选框

我有两个网格。父网格有2个复选框字段，嵌套网格有多个列，具有类似的2个复选框字段。复选框字段名称，当用户选择父行复选框时，我想选择嵌套网格中所有相应的复选框。例如，如果用户选择了“引用”复选框，请选中相应嵌套网格中的所有引用复选框。此外，在选中/取消选中这些框时，我将触发一个javscript方法来将值保存到数据库中

这是设计器代码

<asp:GridView ID="agVendorExcl" runat="server" 
<Columns>
    <asp:TemplateField>
        <ItemTemplate>
            <asp:Image ID="imgDocPlus" ImageUrl="../../../images/grid/plus_crop.png" runat="server"/>
            <asp:Panel ID="pnlVendorAssociates" runat="server" CssClass="ExclAssoContainer" style="display: none">
                <asp:GridView runat="server" ID="agVendorExclAssociates" 
                    <Columns>
                        <asp:TemplateField HeaderText="Referred">
                            <ItemTemplate>
                                <div style="text-align: center">
                                    <asp:CheckBox ID="chkAssoPreferred" runat="server" Checked='<%# ((bool)Eval("PreferredInd")) == true %>' />
                                </div>
                            </ItemTemplate>
                            <ItemStyle Width="50px" />
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Excluded">
                            <ItemTemplate>
                                <div style="text-align: center">
                                    <asp:CheckBox ID="chkAssoExcluded" runat="server" Checked='<%# ((bool)Eval("ExcludedInd")) == true %>' />
                                </div>
                            </ItemTemplate>
                            <ItemStyle Width="50px" />
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>
            </asp:Panel>
        </ItemTemplate>
        <ItemStyle Width="23px" />
    </asp:TemplateField>
    <asp:TemplateField HeaderText="Referred" SortExpression="PreferredInd">
        <ItemTemplate>
            <div style="text-align: center">
                <asp:CheckBox ID="chkPreferred" runat="server" Checked='<%# ((bool)Eval("PreferredInd")) == true %>'  />
            </div>
        </ItemTemplate>
        <ItemStyle Width="50px" />
    </asp:TemplateField>
    <asp:TemplateField HeaderText="Excluded" SortExpression="ExcludedInd">
        <ItemTemplate>
            <div style="text-align: center">
                <asp:CheckBox ID="chkExcluded" runat="server" Checked='<%# ((bool)Eval("ExcludedInd")) == true %>' OnCheckedChanged="chkExcluded_OnCheckedChanged" AutoPostBack="True"/>
            </div>
        </ItemTemplate>
        <ItemStyle Width="50px" />
    </asp:TemplateField>
</Columns>

我面临的问题,

回发导致嵌套网格切换。事件被触发，复选框被选中，但它们不会显示为选中

在将数据绑定到行时，我向这些复选框添加了onclick属性。在此事件中，我将数据保存到数据库。但现在不会触发此事件，因为我正在从代码隐藏更新复选框

完整要求：显示网格。显示子网格。选中父行复选框后，将父行的值保存到数据库。选中父行复选框后，选中子网格中所有相应的复选框。选中子网格中的任何复选框后，将行的值保存到数据库。允许父行折叠/展开以显示子网格

我尝试了很多东西。检查了我能搜索到的所有解决方案。尝试了javascript/jQuery/Code隐藏。也许我错过了什么

任何人都可以帮助实现此功能。

这可能会对您有所帮助

.aspx

<asp:GridView ID="agVendorExcl" runat="server" AutoGenerateColumns="false" OnRowDataBound="agVendorExcl_RowDataBound">
<Columns>
    <asp:TemplateField>
        <ItemTemplate>
            <asp:Image ID="imgDocPlus" ImageUrl="../../../images/grid/plus_crop.png" runat="server"/>
            <asp:Panel ID="pnlVendorAssociates" runat="server" CssClass="ExclAssoContainer" style="display: none">
                <asp:GridView runat="server" ID="agVendorExclAssociates" AutoGenerateColumns="false">
                    <Columns>
                        <asp:TemplateField HeaderText="Referred">
                            <ItemTemplate>
                                <div style="text-align: center">
                                    <asp:CheckBox ID="chkAssoPreferred" runat="server" Checked='<%# ((bool)Eval("PreferredInd")) == true %>' />
                                </div>
                            </ItemTemplate>
                            <ItemStyle Width="50px" />
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Excluded">
                            <ItemTemplate>
                                <div style="text-align: center">
                                    <asp:CheckBox ID="chkAssoExcluded" runat="server" Checked='<%# ((bool)Eval("ExcludedInd")) == true %>' />
                                </div>
                            </ItemTemplate>
                            <ItemStyle Width="50px" />
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>
            </asp:Panel>
        </ItemTemplate>
        <ItemStyle Width="23px" />
    </asp:TemplateField>
    <asp:TemplateField HeaderText="Referred" SortExpression="PreferredInd">
        <ItemTemplate>
            <div style="text-align: center">
                <asp:CheckBox ID="chkPreferred" runat="server" Checked='<%# ((bool)Eval("PreferredInd")) == true %>'  />
            </div>
        </ItemTemplate>
        <ItemStyle Width="50px" />
    </asp:TemplateField>
    <asp:TemplateField HeaderText="Excluded" SortExpression="ExcludedInd">
        <ItemTemplate>
            <div style="text-align: center">
                <asp:CheckBox ID="chkExcluded" runat="server" Checked='<%# ((bool)Eval("ExcludedInd")) == true %>' OnCheckedChanged="chkExcluded_CheckedChanged" AutoPostBack="true"/>
            </div>
        </ItemTemplate>
        <ItemStyle Width="50px" />
    </asp:TemplateField>
</Columns>
</asp:GridView>

<script type="text/javascript">

    // Bear in mind JavaScript will revert once you do post back
    function collapseExpand(imgID, pnlID) {
        var controlImage = document.getElementById(imgID);
        var controlPanel = document.getElementById(pnlID);

        // Check
        if (controlPanel != undefined && controlImage != undefined) {
            var currentDisplay = controlPanel.style.display;

            // Check
            if (currentDisplay == 'none') {
                controlPanel.style.display = ''; // or block

                // controlImage.src = 'CollapseImage';
            }
            else {
                controlPanel.style.display = 'none';
                // controlImage.src = 'ExpandImage';
            }
        }
    }

</script>

//请记住，一旦您发回，JavaScript将恢复
函数collapseExpand（imgID、pnlID）{
var controlImage=document.getElementById（imgID）；
var controlPanel=document.getElementById（pnlID）；
//检查
if（controlPanel！=未定义&&controlImage！=未定义）{
var currentDisplay=controlPanel.style.display；
//检查
如果（currentDisplay==“无”）{
controlPanel.style.display=''；//或块
//controlImage.src='CollapseImage'；
}
否则{
controlPanel.style.display='none'；
//controlImage.src='ExpandImage'；
}
}
}

.cs

受保护的无效页面加载（对象发送方，事件参数e）
{
//检查
如果（！IsPostBack）
{
//变数
DataTable dtParent=新DataTable（）；
DataTable dtChild=新DataTable（）；
字符串[]列={“PreferredInd”，“ExcludedInd”}；
//循环并创建列
for（int i=0；i

wow..thanx用于扩展代码。我现在明白了。我所做的是使用javascript/jquery切换嵌套网格面板。现在，当我尝试在复选框上使用回发时，它会重新运行此cli

<asp:GridView ID="agVendorExcl" runat="server" AutoGenerateColumns="false" OnRowDataBound="agVendorExcl_RowDataBound">
<Columns>
    <asp:TemplateField>
        <ItemTemplate>
            <asp:Image ID="imgDocPlus" ImageUrl="../../../images/grid/plus_crop.png" runat="server"/>
            <asp:Panel ID="pnlVendorAssociates" runat="server" CssClass="ExclAssoContainer" style="display: none">
                <asp:GridView runat="server" ID="agVendorExclAssociates" AutoGenerateColumns="false">
                    <Columns>
                        <asp:TemplateField HeaderText="Referred">
                            <ItemTemplate>
                                <div style="text-align: center">
                                    <asp:CheckBox ID="chkAssoPreferred" runat="server" Checked='<%# ((bool)Eval("PreferredInd")) == true %>' />
                                </div>
                            </ItemTemplate>
                            <ItemStyle Width="50px" />
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Excluded">
                            <ItemTemplate>
                                <div style="text-align: center">
                                    <asp:CheckBox ID="chkAssoExcluded" runat="server" Checked='<%# ((bool)Eval("ExcludedInd")) == true %>' />
                                </div>
                            </ItemTemplate>
                            <ItemStyle Width="50px" />
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>
            </asp:Panel>
        </ItemTemplate>
        <ItemStyle Width="23px" />
    </asp:TemplateField>
    <asp:TemplateField HeaderText="Referred" SortExpression="PreferredInd">
        <ItemTemplate>
            <div style="text-align: center">
                <asp:CheckBox ID="chkPreferred" runat="server" Checked='<%# ((bool)Eval("PreferredInd")) == true %>'  />
            </div>
        </ItemTemplate>
        <ItemStyle Width="50px" />
    </asp:TemplateField>
    <asp:TemplateField HeaderText="Excluded" SortExpression="ExcludedInd">
        <ItemTemplate>
            <div style="text-align: center">
                <asp:CheckBox ID="chkExcluded" runat="server" Checked='<%# ((bool)Eval("ExcludedInd")) == true %>' OnCheckedChanged="chkExcluded_CheckedChanged" AutoPostBack="true"/>
            </div>
        </ItemTemplate>
        <ItemStyle Width="50px" />
    </asp:TemplateField>
</Columns>
</asp:GridView>

<script type="text/javascript">

    // Bear in mind JavaScript will revert once you do post back
    function collapseExpand(imgID, pnlID) {
        var controlImage = document.getElementById(imgID);
        var controlPanel = document.getElementById(pnlID);

        // Check
        if (controlPanel != undefined && controlImage != undefined) {
            var currentDisplay = controlPanel.style.display;

            // Check
            if (currentDisplay == 'none') {
                controlPanel.style.display = ''; // or block

                // controlImage.src = 'CollapseImage';
            }
            else {
                controlPanel.style.display = 'none';
                // controlImage.src = 'ExpandImage';
            }
        }
    }

</script>

protected void Page_Load(object sender, EventArgs e)
{
    // Check
    if (!IsPostBack)
    {
        // Variable
        DataTable dtParent = new DataTable();
        DataTable dtChild = new DataTable();
        string[] column = { "PreferredInd", "ExcludedInd" };

        // Loop & Create Column
        for (int i = 0; i < column.Length; i++)
        {
            dtParent.Columns.Add(column[i], typeof(bool));
            dtChild.Columns.Add(column[i], typeof(bool));
        }

        // Create Rows
        for(int i = 0; i< 1; i++)
        {
            dtParent.Rows.Add(false, false);
            dtChild.Rows.Add(false, false);
        }

        // ViewState Child DataTable
        ViewState["DataChild"] = dtChild;

        // Bind
        agVendorExcl.DataSource = dtParent;
        agVendorExcl.DataBind();
    }
}

protected void agVendorExcl_RowDataBound(object sender, GridViewRowEventArgs e)
{
    // Check
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        // Find Control
        Image imgDocPlus = e.Row.FindControl("imgDocPlus") as Image;
        Panel pnlVendorAssociates = e.Row.FindControl("pnlVendorAssociates") as Panel;
        GridView agVendorExclAssociates = e.Row.FindControl("agVendorExclAssociates") as GridView;

        // Check
        if (agVendorExclAssociates != null)
        {
            // Bind Sub GridView
            agVendorExclAssociates.DataSource = ViewState["DataChild"] as DataTable;
            agVendorExclAssociates.DataBind();
        }

        imgDocPlus.Attributes.Add("onclick", "collapseExpand('" + imgDocPlus.ClientID + "', '" + pnlVendorAssociates.ClientID + "')");
    }
}

protected void chkExcluded_CheckedChanged(object sender, EventArgs e)
{
    CheckBox chkAll = (sender as CheckBox);

    if (chkAll != null)
    {
        GridViewRow row = chkAll.NamingContainer as GridViewRow;


        if (row != null)
        {
            GridView agVendorExclAssociates = (GridView)row.FindControl("agVendorExclAssociates");
            Panel pnlVendorAssociates = row.FindControl("pnlVendorAssociates") as Panel;

            // Show After Your Value is Checked else Hide
            pnlVendorAssociates.Style.Add(HtmlTextWriterStyle.Display, chkAll.Checked ? "" : "none");

            foreach (GridViewRow gvRow in agVendorExclAssociates.Rows)
            {
                // Find Control
                CheckBox chkBox = (CheckBox)gvRow.FindControl("chkAssoExcluded");

                // Check
                if (chkAll.Checked) chkBox.Checked = true;
                else chkBox.Checked = false;
            }
        }
    }
}