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

Question

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

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

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

Run Code Online (Sandbox Code Playgroud)

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

我圈出的是具有重复更改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);
        }
    }

Run Code Online (Sandbox Code Playgroud)

再次更新:我唯一需要修复的是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:" -";}

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

Jon*_*n P 2

没有时间给出完整的答案，因为涉及到服务器端的相当多的内容，所以我会尝试给您一个大致的了解。

您需要考虑将一个类添加到您的表行中，也许添加asp:literal到您的表tr行中以保存该类。还要为您的 id 添加一个asp:literal，这将为您提供一个可以从中获取值的控件。也许可以将该文字用于表行上的数据属性。

OnPreRender然后在中继器上使用一个事件。这里迭代中继器的项目。将我上面提到的文字中存储的 id 与上一项和下一项中的 id 进行比较。如果 id 与之前的相同，请添加一个可用于隐藏它的 css 类。如果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");
  });
});

Run Code Online (Sandbox Code Playgroud)

.hidden {
  display: none;
}

.toggler td:first-child::after {
  content: " +";
}

.toggler.opened td:first-child::after {
  content: " -";
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

注意，这一切都可以在客户端完成，但是当表格完全展开时，您将有一个短暂的时刻，而 JavaScript 会计算出要隐藏的内容。这对于您的用户来说可能是一种不和谐的体验。

归档时间：	8 年，5 月前
查看次数：	704 次
最近记录：	8 年，5 月前