Question

我在gridview中有gridview。当前，当我单击一个面板时，它会打开它，而当我单击另一个面板时，它会打开另一个面板，但不会关闭先前打开的面板。我希望一次只打开一个面板。

 <%--INSTITUTION PANEL START--%>
 <div class="panel panel-danger">
                    <div class="panel-heading">
                        <h4>
                            <i class="fa fa-plus-circle" aria-hidden="true"></i>&nbsp;<asp:LinkButton ID="lnkCreateInstitution" runat="server" OnClick="lnkCreateInstitution_Click">Create New Institution</asp:LinkButton>
                        </h4>
                    </div>
                    <div class="panel-body">
                        <asp:GridView ID="dgInstitute" runat="server" AutoGenerateColumns="False" CellPadding="0"
                            CellSpacing="0" ShowHeaderWhenEmpty="True" PageSize="100" Width="100%" CssClass="table table-responsive table-bordered"
                            Visible="true" UseAccessibleHeader="true" OnRowCreated="dgInstitute_RowCreated"
                            OnDataBound="dgInstitute_DataBound" OnRowDataBound="dgInstitute_RowDataBound">
                            <Columns>
                                <asp:BoundField HeaderText="Id" DataField="refGroupId" HeaderStyle-HorizontalAlign="Left" HeaderStyle-CssClass="gridHeader panel-default"></asp:BoundField>
                                <asp:TemplateField HeaderStyle-CssClass="gridHeader panel-default">
                                    <ItemTemplate>
                                        <div class="panel panel-primary">
                                            <div class="panel-heading">
                                                <div class="row">
                                                    <div class="col-lg-12">
                                                        <asp:Button ID="btnInstituteName" Text='<%#Eval("refValues") %>' CssClass="btn btn-Institute"
                                                            runat="server" OnClick="btnInstituteName_Click" CommandArgument='<%#Eval("refGroupId") %>' />
                                                    </div>
                                                </div>

                                            </div>
                                            <%--PROGRAM PANEL START--%>
                                              <asp:Panel ID="programPanel" runat="server" class="hidden">
                                                <div id="pnlProgramBody" runat="server" class="panel-body">
                                                    <h5>
                                                        <i class="fa fa-plus-circle" aria-hidden="true"></i>&nbsp;<asp:LinkButton ID="lnkCreateProgram" runat="server" OnClick="lnkCreateProgram_Click">Create New Program</asp:LinkButton></h5>
                                                    <asp:GridView ID="dgProgram" runat="server" AutoGenerateColumns="False" CellPadding="0"
                                                        CellSpacing="0" ShowHeaderWhenEmpty="True" PageSize="100" Width="100%"
                                                        OnRowDataBound="dgProgram_RowDataBound" OnRowCreated="dgProgram_RowCreated" CssClass="table table-responsive table-bordered zero-margin-table"
                                                        Visible="true" UseAccessibleHeader="true">
                                                        <Columns>
                                                            <asp:BoundField HeaderText="Id" DataField="refGroupId" HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="80%" HeaderStyle-CssClass="gridHeader panel-default"></asp:BoundField>
                                                            <asp:TemplateField HeaderStyle-CssClass="gridHeader panel-default" ShowHeader="false" HeaderStyle-Width='20%'>
                                                                <ItemTemplate>

                                                                    <asp:Button ID="btnProgram" AutoPostBack="true" Width="100%" CssClass="btn btn-primary btn-embossed" runat="server"
                                                                        Text='<%#Eval("refValues") %>'
                                                                        OnClick="btnProgram_Click" CommandArgument='<%#Eval("refGroupId") %>' />
                                                             </ItemTemplate>
                                                            </asp:TemplateField>

                                                        </Columns>
                                                        <HeaderStyle CssClass="panel-default"></HeaderStyle>
                                                        <RowStyle CssClass=""></RowStyle>
                                                    </asp:GridView>
                                                </div>
                                            </asp:Panel>
                                            <%--PROGRAM PANEL END--%>
                                        </div>
                                    </ItemTemplate>
                                </asp:TemplateField>
                            </Columns>
                            <HeaderStyle CssClass="panel-default"></HeaderStyle>
                            <RowStyle CssClass=""></RowStyle>
                        </asp:GridView>
                        <%--INSTITUTION PANEL END--%>

此处研究所是第一个面板，其中包含研究所名称作为按钮。它来自数据库，并绑定到gridview dgInstitute上。这个gridView包含第二个面板，该面板具有程序列表，它也来自数据库。每个学院都包含几个程序。

   protected void dgInstitute_RowCreated(object sender, GridViewRowEventArgs e)
    {
        #region VISIBLE FALSE

        e.Row.Cells[0].Visible = false;

        #endregion           
    }

    protected void dgInstitute_DataBound(object sender, EventArgs e)
    {
        #region VISBLE FALSE

        dgInstitute.HeaderRow.Cells[1].Visible = false;

        #endregion
    }

    protected void dgInstitute_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        #region BIND PROGRAM VALUES

        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            GridView nestedGridView = e.Row.FindControl("dgProgram") as GridView;
            dsResult = new System.Data.DataSet();
            parentId = e.Row.Cells[0].Text;
            dsResult = getProgram(parentId);

            nestedGridView.DataSource = dsResult;
            nestedGridView.DataBind();

            nestedGridView.HeaderRow.Cells[1].Visible = false;
            nestedGridView.Columns[0].Visible = false;
        }

        #endregion
    }

   protected void btnInstituteName_Click(object sender, EventArgs e)
    {
        #region SHOW/HIDE PRORAMS

        Button instituteButton = (Button)sender;
        GridViewRow programGrid = (GridViewRow)instituteButton.NamingContainer;

        Panel programPanel = programGrid.FindControl("programPanel") as Panel;

        if (programPanel.Attributes["class"] == "hidden")
        {
            programPanel.Attributes["class"] = "visible";
        }

        else
        {
            programPanel.Attributes["class"] = "hidden";
        }

        #endregion

    }

       protected void dgProgram_RowCreated(object sender, GridViewRowEventArgs e)
    {
        #region VISIBLE FALSE

        e.Row.Cells[0].Visible = false;

        #endregion           
    }

现在，当我单击研究所时，它会打开面板以显示带有包含程序列表的网格的程序面板，而当我再次单击同一面板时，它将关闭它。这样就可以完美工作。但是，当为特定机构打开一个程序面板时，当我单击另一个机构按钮时，它将关闭其他打开的程序面板。

任何建议。我正在使用asp .net面板和gridview组合，因为我必须执行许多任务。

Answer 1

客户端使用jQuery和JavaScript展开折叠功能

对于子GridView的展开和折叠，我已经使用jQuery

function* addAmount(action) {


    try {
        const response = yield call(axios.get, RECHARGE_IP + 'api/createpaymentorder?username=' + action.username + '&amount=' + action.amount,{}, {
            headers: {
                'authorization': action.token,
            }
        })

        yield put({ type: ADD_MONEY_INITIATE_SUCCESS, data: response });

    }
    catch (e) {

        yield put({ type: ADD_MONEY_INITIATE_FAILURE, error: e });
    }
}

当我打开其中一个网格视图时，请关闭其他网格视图面板

1 个答案: