展开折叠整行

Question

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

代码如下:

<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;
}

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

Answer 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");
});