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可能正在发生，因为您的查询可能是或者您正在使用左连接与某些表，如果您正在使用连接然后进行内连接无论提供什么来源，转发器都将重复所以你的查询中存在一些问题（数据源）

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

2 个答案: