asp：转发器折叠表行 - 更新

Question

我想知道是否有人对我的问题有创造性的解决方案。 我有一个从我的数据库填充的转发器，它如下：

<asp:Repeater ID="ResultsTableRepeater" runat="server" OnPreRender="ResultsTableRepeater_PreRender">

        <HeaderTemplate>
            <table class="td-table-bordered" style="font-size: small; width: 90%">
                <tr>
                    <th>Change #</th>
                    <th>Change Title</th>
                    <th>Change Description</th>
                    <th>Clarity Id</th>
                    <th>Package Description</th>
                    <th>Package Name</th>
                    <th>Package Status</th>
                    <th>Assigned To</th>
                    <th>New Package</th>
                </tr>
        </HeaderTemplate>
        <ItemTemplate>
            <asp:Literal runat="server" Text='<%# Eval("ChangeId") %>' ID="IdTag" Visible="false"></asp:Label>
            <tr id="tableRow" class="" data-changeId='<%# Eval("ChangeId") %>' runat="server" style='<%#(Eval("AssignedTo").ToString() == "7" || Eval("AssignedTo").ToString() == "8")? "": "font-weight:bold; background-color:cornsilk" %>'>
                <td><%# Eval("ChangeId") %></td>
                <td><%# Eval("ChangeTitle") %></td>
                <td><%# Eval("ChangeDescription") %></td>
                <td><%# Eval("ClarityId") %></td>
                <td><%# (Eval("PackageId").ToString() == string.Empty) ?  "" 
                    : "<a href=http://dev.rlaninfrastructure.tdbank.ca/RCIViewForm?ChangeId=" + Eval("ChangeId") + "&PackageId=" + Eval("PackageId") + " runat='server' id='RCILink'>" %>
                    <asp:Label ID="ExistingPackageLabel" runat="server" Text='<%# (Eval("PackageId").ToString() == string.Empty) ? "No packages" : Eval("PackageDescription").ToString() %>'>
                    </asp:Label><%# (Eval("PackageId").ToString() == string.Empty) ? "" : "</a>" %>
                </td>
                <td><%# Eval("PackageName") %></td>
                <td>
                    <asp:Label ID="LabRequestedLabel" runat="server" Text='<%# (Eval("PackageStatus").ToString() == "1") ? "Requested" 
                                                                             : (Eval("PackageStatus").ToString() == "2") ? "Built" 
                                                                             : (Eval("PackageStatus").ToString() == "3") ? "NFT"
                                                                             : (Eval("PackageStatus").ToString() == "4") ? "Pilot"
                                                                             : (Eval("PackageStatus").ToString() == "5") ? "Production" 
                                                                             : (Eval("PackageStatus").ToString() == "6") ? "Completed" 
                                                                             : (Eval("PackageStatus").ToString() == "7") ? "Cancelled"
                                                                             : (Eval("PackageStatus").ToString() == "8") ? "Pending" 
                                                                             : "" %>'></asp:Label>
                </td>
                <td><%# (Eval("EmployeeName").ToString() == string.Empty) ? "" : Eval("EmployeeName")%></td>
                <td><%# "<a href=http://dev.rlaninfrastructure.tdbank.ca/RCIViewForm?ChangeId=" + Eval("ChangeId") + " runat='server' id='RCILink'>"%>
                    <asp:Label ID="NewPackageLabel" runat="server" Text="Create New">
                    </asp:Label><%#"</a>" %></td>
            </tr>
        </ItemTemplate>
        <FooterTemplate>
            </table>
        </FooterTemplate>
    </asp:Repeater>

它会生成一个看起来像这样的表

我圈出的是具有重复更改ID的行，我希望默认折叠，但可以单击以进行展开（以及再次单击以再次折叠）。

我已经开始在下面实施Jon P的解决方案了，我差不多完成了！ 只是Jquery onclick事件。

下面是我的代码隐藏PreRender方法。

protected void ResultsTableRepeater_PreRender(object sender, EventArgs e) {
        int previousId = 0;
        int currentId = 0;
        int nextId = 0;

        for (int item = 0; item < ResultsTableRepeater.Items.Count; item++) {
            Literal idTag = (Literal)ResultsTableRepeater.Items[item].FindControl("IdTag");
            Literal classTag = (Literal)ResultsTableRepeater.Items[item].FindControl("ClassTag");
            HtmlTableRow tableRow = (HtmlTableRow)ResultsTableRepeater.Items[item].FindControl("tableRow");
            if (item != ResultsTableRepeater.Items.Count - 1)
                int.TryParse(((Literal)ResultsTableRepeater.Items[item + 1].FindControl("IdTag")).Text.ToString(), out nextId);

            if (int.TryParse(idTag.Text, out currentId)) {
                if (currentId == previousId) {
                    tableRow.Attributes["class"] = "hidden";             
                }
                else if (currentId != previousId && currentId == nextId) {
                    tableRow.Attributes["class"] = "toggler";
                }
            }
            else
                nextId = 0;

            int.TryParse(idTag.Text, out previousId);
        }
    }

再次更新：我唯一需要修复的是jquery，它会扩展和折叠toggler行上隐藏/打开的行。 根据Jon P的帮助，下面是jquery和css。

$(".toggler").click(function(){
  var idClicked = $(this).data("changeid");

  //Toggle hidden on the sibling rows with the same data id
  $(this).nextAll("[data-changeId='" + idClicked +"']").toggleClass("hidden");

  //Toggle opened status on clicked row
  $(this).toggleClass("opened");
});


.hidden{display:none;}
.toggler td:first-child::after{content:" +";}
.toggler.opened td:first-child::after{content:" -";}

在最后一段时间有人可以帮助我吗？ 我觉得我很亲密。

Answer 1

没有时间可以得到一个完整的答案，因为服务器方面有一点涉及，所以我会试着给你一个大致的图片。

您需要查看在表行中添加一个类，或者将asp:literal添加到您的tr以保存该类。 同时为你的id添加一个asp:literal ，这将为你提供一个可以从中获取值的控件。 也许将该文字用于表行的数据属性。

然后在Repeater上使用OnPreRender事件。 这里迭代转发器的项目。 将您在上面提到的文字中存储的ID与上一个和下一个项目中的ID进行比较。 如果id与前一个相同，请添加一个可用于隐藏它的css类。 如果id与前一个id不同但与下一个相同，则添加一个css类以指示该行用于隐藏和折叠。

添加一些CSS以使用上面添加的类隐藏行。

您希望最终得到类似于以下内容的HTML。 我还用jquery添加了展开和折叠

 $(document).ready(function() { $(".toggler").click(function() { var idClicked = $(this).data("changeid"); //Toggle hidden on the sibling rows with the same data id $(this).nextAll("[data-changeId='" + idClicked + "']").toggleClass("hidden"); //Toggle opened status on clicked row $(this).toggleClass("opened"); }); }); 

 .hidden { display: none; } .toggler td:first-child::after { content: " +"; } .toggler.opened td:first-child::after { content: " -"; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table class="td-table-bordered" style="font-size: small; width:90%"> <tr> <th>Change #</th> <th>Change Title</th> <th>Change Description</th> <th>Clarity Id</th> <th>Package Description</th> <th>Package Name</th> <th>Package Status</th> <th>Assigned To</th> <th>New Package</th> </tr> <tr data-changeId="1"> <td>1</td> <td>Change Title</td> <td>Change Description</td> <td>Clarity Id</td> <td>Package Description</td> <td>Package Name</td> <td>Package Status</td> <td>Assigned To</td> <td>New Package</td> </tr> <tr class="toggler" data-changeId="2"> <td>2</td> <td>Change Title</td> <td>Change Description</td> <td>Clarity Id</td> <td>Package Description</td> <td>Package Name</td> <td>Package Status</td> <td>Assigned To</td> <td>New Package</td> </tr> <tr class="hidden" data-changeId="2"> <td>2</td> <td>Change Title</td> <td>Change Description</td> <td>Clarity Id</td> <td>Package Description</td> <td>Package Name</td> <td>Package Status</td> <td>Assigned To</td> <td>New Package</td> </tr> <tr class="hidden" data-changeId="2"> <td>2</td> <td>Change Title</td> <td>Change Description</td> <td>Clarity Id</td> <td>Package Description</td> <td>Package Name</td> <td>Package Status</td> <td>Assigned To</td> <td>New Package</td> </tr> <tr data-changeId="3"> <td>3</td> <td>Change Title</td> <td>Change Description</td> <td>Clarity Id</td> <td>Package Description</td> <td>Package Name</td> <td>Package Status</td> <td>Assigned To</td> <td>New Package</td> </tr> <tr class="toggler" data-changeId="4"> <td>4</td> <td>Change Title</td> <td>Change Description</td> <td>Clarity Id</td> <td>Package Description</td> <td>Package Name</td> <td>Package Status</td> <td>Assigned To</td> <td>New Package</td> </tr> <tr class="hidden" data-changeId="4"> <td>4</td> <td>Change Title</td> <td>Change Description</td> <td>Clarity Id</td> <td>Package Description</td> <td>Package Name</td> <td>Package Status</td> <td>Assigned To</td> <td>New Package</td> </tr> </table> 

注意这可以全部在客户端完成，但是当表格完全展开时你会有一个短暂的时刻，而javascript会找出隐藏的内容。 这对您的用户来说可能是一种刺耳的体验。

Answer 2

Select Distinct from yourtableName

在您的查询中使用distinct可能正在发生，因为您的查询可能是或者您正在使用左连接与某些表如果您正在使用连接然后使内连接转发器将重复任何源将提供所以在您的问题中查询（数据源）