我几乎＆＃34;将此代码复制并粘贴到stackoverflow和here中，以显示带有asp.net listview控件的master-detail。
这是我的代码。
<css>
.collapse
{
background-position: left -172px;
height: 14px;
width: 13px;
background-repeat: no-repeat;
background-image: url('images/DXR.png');
cursor: pointer;
}
.expand
{
background-position: -14px -187px;
height: 14px;
width: 13px;
background-repeat: no-repeat;
background-image: url('images/DXR.png');
cursor: pointer;
}
table
{
}
table td
{
}
table th
{
}
.SUBDIV table
{
border: 0px;
}
</css>
<script type="text/javascript">
$(document).ready(function () {
// THIS IS FOR HIDE ALL DETAILS ROW
$(".SUBDIV table tr:not(:first-child)").not("tr tr").hide();
$(".SUBDIV .btncolexp").click(function () {
$(this).closest('tr').next('tr').toggle();
//this is for change img of btncolexp button
if ($(this).attr('class').toString() == "btncolexp collapse") {
$(this).addClass('expand');
$(this).removeClass('collapse');
}
else {
$(this).removeClass('expand');
$(this).addClass('collapse');
}
});
});
</script>
<asp:ListView ID="lvDmr" runat="server" DataSourceID="dsDmr" DataKeyNames="id">
<ItemTemplate>
<div id="Div1" class="SUBDIV" runat="server">
<table style="width: 100%;" cellspacing="0" cellpadding="8">
<tr style="width: 100%;">
<td class="colonna-griglia" style="width: 3%;">
<div class="btncolexp collapse">
</div>
</td>
<td class="colonna-griglia" style="width: 3%;">
<%# IconaRispostaRichiesta(Eval("risposta_richiesta"))%>
</td>
<td class="colonna-griglia" style="width: 5%;">
<%# Convert.ToDateTime(Eval("data_rilevazione")).ToString("d") %>
</td>
<td class="colonna-griglia">
<a href='dmr.aspx?testataconcorrente=<%# Eval("rivista")%>'>
<%# Eval("rivista")%></a>
</td>
<td class="colonna-griglia">
<a href='dmr.aspx?cliente=<%# Eval("cliente")%>'>
<asp:Label runat="server" ID="lblCliente" Text='<%# Eval("cliente")%>'></asp:Label></a>
</td>
<td class="colonna-griglia">
<asp:HyperLink runat="server" ID="lnkFiltroAgente" Text='<%# Eval("agente") %>' Visible='<%# MostraLabelAgente(Eval("agente")) %>'
NavigateUrl='<%# Eval("agente","dmr.aspx?agente={0}") %>'></asp:HyperLink>
<asp:DropDownList runat="server" ID="cmbAgente" DataSourceID="dsAgenti" DataTextField="agenteclienteportafoglio"
DataValueField="agenteclienteportafoglio" Width="150px" AutoPostBack="true" OnSelectedIndexChanged="cmbAgente_SelectedIndexChanged"
SelectedValue='<%# Eval("agente") %>' AppendDataBoundItems="true" Visible='<%# MostraComboAgente(Eval("agente")) %>'>
<asp:ListItem Text="" Value=""></asp:ListItem>
</asp:DropDownList>
</td>
<td class="colonna-griglia">
<%# Eval("categoria")%>
</td>
<td class="colonna-griglia">
<%# Eval("sottocategoria")%>
</td>
<td class="colonna-griglia">
<%# Eval("prodotto")%>
</td>
<td class="colonna-griglia">
<%# Eval("formato")%>
</td>
<td class="colonna-griglia">
<%# Eval("posizionamento")%>
</td>
<td class="colonna-griglia">
<%# Eval("spazio")%>
</td>
<td class="colonna-griglia">
<asp:Label runat="server" ID="lblID" Text='<%# Eval("id")%>'></asp:Label>
</td>
</tr>
<tr>
<td colspan="6">
</td>
<td colspan="6">
<div id="divDetail" class="toggle1" style="padding: 5px 5px 5px 5px; background-color: #DEDEDE;">
<asp:UpdatePanel runat="server" ID="upPanel">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnInviaCommento" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:SqlDataSource ID="dsCommenti" runat="server" ProviderName="MySql.Data.MySqlClient"
InsertCommand="INSERT INTO dmr_commenti SET id_dmr=@id_dmr, data_ora=NOW(), commento_di=@commento_di, commento=@commento">
<InsertParameters>
<asp:Parameter Name="id_dmr" />
<asp:Parameter Name="commento_di" />
<asp:Parameter Name="commento" />
</InsertParameters>
</asp:SqlDataSource>
<asp:Repeater runat="server" DataSourceID="dsCommenti" ID="repeaterCommenti">
<HeaderTemplate>
</HeaderTemplate>
<ItemTemplate>
<table style="width: 80%;" cellpadding="4" cellspacing="4">
<tr>
<td style="width: 7%; vertical-align: top;">
<img alt="" src='images/<%# RitornaFotoUtente(Eval("commento_di")) %>' height="48px" />
</td>
<td style="width: 93%; vertical-align: top;">
<span style="font-size: 8pt;"><b>
<%# Eval("commento_di")%></b> il <b>
<%# Eval("data_ora")%></b> </span>
<br />
<br />
<%# Eval("commento")%>
<br />
</td>
</tr>
</table>
</ItemTemplate>
<FooterTemplate>
<asp:Label runat="server" ID="lblFooter" Text=""></asp:Label>
</FooterTemplate>
</asp:Repeater>
<asp:TextBox runat="server" ID="txtCommento" Width="90%" Height="100px" TextMode="MultiLine"></asp:TextBox>
<br />
<asp:Button runat="server" ID="btnInviaCommento" Text="Invia" CommandName="ScriviCommento"
CommandArgument='<%# Eval("id") %>' />
<asp:CheckBox runat="server" ID="chkRichiediRisposta" Text="Richiedi risposta" Visible='<%# MostraCheckRichiediRisposta() %>' />
<br />
<br />
<asp:Label runat="server" ID="lblMessaggioCommento" Text=""></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</td>
<td style="width: 20%;">
</td>
</tr>
</table>
</div>
</ItemTemplate>
<EmptyDataTemplate>
<table id="Table1" runat="server" style="">
<tr>
<td>
<br />
<br />
<asp:Label ID="lblNoPost" runat="server" Font-Size="Large" Font-Bold="true" Text="Non ci sono record !"> </asp:Label>
<br />
<br />
</td>
</tr>
</table>
</EmptyDataTemplate>
<LayoutTemplate>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<th class="colonna-griglia-header" style="width: 3%;">
</th>
<th class="colonna-griglia-header" style="width: 3%;">
</th>
<th class="colonna-griglia-header" style="width: 5%;">
Data
</th>
<th class="colonna-griglia-header">
Rivista
</th>
<th class="colonna-griglia-header">
Cliente
</th>
<th class="colonna-griglia-header">
Agente
</th>
<th class="colonna-griglia-header">
Categoria
</th>
<th class="colonna-griglia-header">
Sottocategoria
</th>
<th class="colonna-griglia-header">
Prodotto
</th>
<th class="colonna-griglia-header">
Formato
</th>
<th class="colonna-griglia-header">
Posizionamento
</th>
<th class="colonna-griglia-header">
Spazio
</th>
<th class="colonna-griglia-header">
Record
</th>
</tr>
<tr runat="server" id="itemPlaceholder">
</tr>
</table>
<br /><br />
<center>
<asp:DataPager ID="DataPager1" runat="server" PageSize="15" QueryStringField="page">
<Fields>
<asp:NumericPagerField ButtonType="Link" NumericButtonCssClass="PageNumber" NextPreviousButtonCssClass="PageNumber"
NextPageText="Next" PreviousPageText="Prev" CurrentPageLabelCssClass="PageNumberCurrent" />
</Fields>
</asp:DataPager>
</center>
<br /><br />
</LayoutTemplate>
</asp:ListView>
问题是第一行显示了......我想要我的网格＆＃39;从所有子项折叠开始，而不是第一行展开。
我想这行代码是“负责任的”＃39;但我不知道如何修改以解决我的问题。
编辑：我已更新CSS源代码
由于
答案 0 :(得分：1)
我能够复制问题的行为并确定以下几点
根本原因： itemPlaceHolder的展示位置作为标题表中的第二行。
修复：删除tr[id=itemPlaceHolder]并在标头表旁边添加div[id=itemPlaceHolder]。有关详细信息，请参阅推荐更改＆gt;中的重要评论。 HTML更改
TestCase与原始源博客片段：
我尝试使用问题中提到的link中的代码段来复制方案，
并理解由于某些css类（如collapse）与其他css文件/片段冲突（在我的情况下bootstrap.css文件中有.collapse{display:none;}）。
因此，我们无法在div下方background-image看到click并且无法执行<div class="btncolexp collapse"> </div>
行动。
.collapse解决方案是将.expand和.grid-list-collapse的css类名称更改为.grid-list-expand和jQuery等唯一的类名，或者您可以使用其他一些唯一名称。
并使用父容器将所有类扩展到某个区域。
确保您在脚本块之前在布局或页面中包含<style>
.grid-list-container .grid-list-collapse,
.grid-list-container .grid-list-expand {
background-position: left -172px;
height: 14px;
width: 13px;
background-repeat: no-repeat;
background-image: url('/Content/Images/DXR.png');
cursor: pointer;
}
.grid-list-container .grid-list-expand {
background-position: -14px -187px;
}
.grid-list-container table {
border: solid 1px black;
}
.grid-list-container table td {
border-right: solid 1px black;
border-bottom: solid 1px black;
}
.grid-list-container table th {
border-bottom: solid 1px black;
}
.grid-list-container .SUBDIV table {
border: 0;
border-left: 1px solid black;
}
</style>
脚本Api资源。
同时检查浏览器控制台是否存在脚本错误，任何脚本错误都可能导致停止执行
推荐更改：
Css更改
divHTML更改
class="grid-list-container" ListView > ItemTemplate > table > div
div子网格展开/折叠<div class="btncolexp grid-list-collapse"> </div> css类更改为<div class="grid-list-container">
<asp:ListView ID="lvDmr" runat="server" DataSourceID="dsDmr" DataKeyNames="id">
<ItemTemplate>
<div class="SUBDIV" runat="server">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="15px">
<!-- Important: The below div class must be unique -->
<div class="btncolexp grid-list-collapse">
</div>
</td>
<!-- Other Columns-->
</tr>
<!-- No changes in Details Row-->
</table>
</div>
</ItemTemplate>
<EmptyDataTemplate><!-- No changes--></EmptyDataTemplate>
<LayoutTemplate>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<th width="15px"></th>
<!--All Header Column th(s) here -->
</tr>
</table>
<!-- Important: The below div#itemPlaceHolder must be here next to header table -->
<div runat="server" id="itemPlaceHolder"></div>
<!-- Other Tags like Pager can be here -->
</LayoutTemplate>
</asp:ListView>
</div>
它将如下所示：
<script>
$(function () {
// THIS IS FOR HIDE ALL DETAILS ROW
$(".SUBDIV table tr:not(:first-child)").not("tr tr").hide();
$(".SUBDIV .btncolexp").click(function () {
$(this).closest('tr').next('tr').toggle();
//this is for change img of btncolexp button
if ($(this).hasClass("btncolexp grid-list-collapse")) {
$(this).addClass('grid-list-expand')
.removeClass('grid-list-collapse');
}
else {
$(this).removeClass('grid-list-expand')
.addClass('grid-list-collapse');
}
});
});
</script>
脚本更改
{{1}}