展开折叠整行答案

【问题标题】：expand collapse whole row展开折叠整行
【发布时间】：2021-12-10 15:41:21
【问题描述】：

目前我正在使用 +/- 图标展开/折叠。我在中继器中使用中继器来获得所需的输出。如何展开/折叠整行而不是仅单击图标。

下面是代码：

<asp:Repeater ID="repDietStandards" runat="server">
    <HeaderTemplate>
        <table  id="userTable" class="table">
    </HeaderTemplate>
    <ItemTemplate>
        <tr class="trtest"> <%-- onclick="test()">--%>
            <td class="bkclr"> 
            <img id="imgpn" alt="" class="dietassmnt_imgpn_hs testp" src="../images/N_Images/plus.png" /> 
                <asp:Panel ID="pnlNutDtl" runat="server" class="pnldisplay">
                <asp:Repeater ID="repDietStandardsDtl" runat="server" DataSource='<%#GetCalorieChildData(Convert.ToInt32(Eval("SNo"))) %>' OnItemDataBound="repDietStandardsDtl_ItemDataBound">
                    <HeaderTemplate>
                    <table class="ChildGrid accordion_body table-bordered">
                    <tbody>
                       <th class="dietact_tbltd2_hs">Description</th>
                       <th class="dietact_tbltd2_hs">Qty</th>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <tr>
                            <td><asp:Label ID="lblCalorieLP" Text='<%#Eval("CompareOn") %>' runat="server" /></td>
                            <td class="alncenter"><asp:Label ID="lblConsumption" Text='<%#(Convert.ToString(Eval("FirstItem"))=="0") ? "nil" : Eval("FirstItem") %>' runat="server" /></td>
                        </tr>
                    </ItemTemplate>
                    <FooterTemplate>
                    </tbody>
                    </table>                                       
                    </FooterTemplate>
                </asp:Repeater>

JS：

<script type="text/javascript">
        $("body").on("click", "[src*=plus]", function () { //Hierarical Repeater to display Recommended Diet functionality
            $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")
            $(this).attr("src", "../images/N_Images/minus.png");
        });
        $("body").on("click", "[src*=minus]", function () {  //Hierarical Repeater to display Recommended Diet functionality
            $(this).attr("src", "../images/N_Images/plus.png");
            $(this).closest("tr").next().remove();
        });
</script>

在 .cs 中：

private void BndDefaultRecommendedDiet(int selDiet=1)
        {
  repDietStandards.DataSource = lstRecommendedDietTH;
             repDietStandards.DataBind();
}

  public List<CompareCalorie> GetCalorieChildData(int serialNo)  //Populate Child Repeater repDietStandardsDtl
        {
            List<CompareCalorie> lstRequiredNutrients = null;
            if (lstReqNutrient != null)
                lstRequiredNutrients = lstReqNutrient.Where(x => x.SNo == serialNo).ToList();

            return lstRequiredNutrients;
        }

我正在尝试展开/折叠整行，而不是仅在单击加号/减号图标时。

【问题讨论】：

欢迎来到 Stack Overflow。一些提示 - 如果您的问题格式不正确，人们将无法阅读它 - 这涉及正确标记代码块和缩进代码，以便大部分代码可见。您还需要标记所有相关语言，以便人们看到它。由于您只标记了 'collapse' 和 'expand' 而没有标记，例如 JavaScript，因此您严重限制了您的观众（作为参考，'collapse' 有 6 个观察者，'expand' 有 9 个，'JavaScript' 有 2,000,000。阅读How to Ask 是个好主意。

标签： collapse expand

【解决方案1】：

解决了这个问题。以下是更新后的代码。

<asp:Repeater ID="repDietStandards" runat="server">

    <HeaderTemplate>
        <table id="userTable" class="table">
    </HeaderTemplate>
    <ItemTemplate>
        <tr class="trtest"> 
            <td class="bkclr"> 
            <img id="imgpn" alt="" class="dietassmnt_imgpn_hs testp" src="../images/N_Images/plus.png" /> 
                <asp:Label ID="lblHead" runat="server" Font-Bold="true" Text='<%#Eval("Heading") %>' />
                <asp:Panel ID="pnlNutDtl" runat="server" class="chld pnldisplay">
                <asp:Repeater ID="repDietStandardsDtl" runat="server" DataSource='<%#GetCalorieChildData(Convert.ToInt32(Eval("SNo"))) %>' OnItemDataBound="repDietStandardsDtl_ItemDataBound">
                    <HeaderTemplate>
                    <table class="ChildGrid accordion_body table-bordered">
                    <tbody>
                       <th class="dietact_tbltd2_hs">Description</th>
                       <th class="dietact_tbltd2_hs">Qty</th>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <tr>
                            <td><asp:Label ID="lblCalorieLP" Text='<%#Eval("CompareOn") %>' runat="server" /></td>
                            <td class="alncenter"><asp:Label ID="lblConsumption" Text='<%#(Convert.ToString(Eval("FirstItem"))=="0") ? "nil" : Eval("FirstItem") %>' runat="server" /></td>
                        </tr>
                    </ItemTemplate>
                    <FooterTemplate>
                    </tbody>
                    </table>                                       
                    </FooterTemplate>
                </asp:Repeater>
            </asp:Panel>
            </td>
           <%-- <td class="accordion_head"><asp:Label ID="lblHead" runat="server" Font-Bold="true" Text='<%#Eval("Heading") %>' /></td>--%>
        </tr>
    </ItemTemplate>
    <FooterTemplate>
        </tbody>
        </table>                                       
    </FooterTemplate>
</asp:Repeater>

JS 变化：

<script type="text/javascript">
    $("body").on("click", ".bkclr", function () {
        // get the current row
        var currentRow = $(this).closest("tr");
        currentRow.find('.chld').toggleClass('pnldisplay');
        if (currentRow.find('.testp').attr("src").trim() == "../images/N_Images/plus.png")
            currentRow.find('.testp').attr("src", "../images/N_Images/minus.png");
        else
            currentRow.find('.testp').attr("src", "../images/N_Images/plus.png");
    });

【讨论】：

除了上述 cmets - 在回答中，如果您解释您的代码为何/如何解决问题，会更有帮助，以帮助人们清楚地理解您的解决方案。