Question

我正在使用jQuery 2.1.4

我找到了关于如何创建显示嵌套数据的Webgrid的示例。

http://www.dotnetawesome.com/2014/07/nested-webgrid-with-expand-collapse-in-aspnet-mvc4.html

我还发现这篇帖子与我正在使用的jQuery的一部分有同样的问题。

没有发布答案。 collaps and uncollaps is not working in my script

var size = $("#main #gridT > thead > tr >th").size(); // get total column
if (size > 0)
{
    $("#main #gridT > thead > tr >th").last().remove(); // remove last column
    $("#main #gridT > thead > tr").prepend("<th></th>"); // add one column at first for collapsible column
    $("#main #gridT > tbody > tr").each(function (i, el) {
        $(this).prepend(
                $("<td></td>")
                  .addClass("expand")
                  .addClass("hoverEff")
                .attr('title', "click for show/hide")
            );

        //Now get sub table from last column and add this to the next new added row
        var table = $("table", this).parent().html();
        //add new row with this subtable
        $(this).after("<tr><td></td><td style='padding:5px; margin:0px;' colspan='" + (size - 1) + "'>" + table + "</td></tr>");
        $("table", this).parent().remove();
        // ADD CLICK EVENT FOR MAKE COLLAPSIBLE

        $(".hoverEff", this).on("click", function () {
            $(this).parent().closest("tr").next().slideToggle(1000);
            $(this).toggleClass("expand collapse");
        });
    });

    **//by default make all subgrid in collapse mode
    $("#main #gridT > tbody > tr td.expand").each(function (i, el) {
        $(this).toggleClass("expand collapse");
        $(this).parent().closest("tr").next().slideToggle(1000);
    });**
}

执行此部分脚本后。正在删除嵌套数据。

    **//by default make all subgrid in collapse mode
    $("#main #gridT > tbody > tr td.expand").each(function (i, el) {
        $(this).toggleClass("expand collapse");
        $(this).parent().closest("tr").next().slideToggle(1000);
    });**

Example of the display - image click here

查看：

@model  IEnumerable<SqlApp.ViewModels.OrderDetailVM>


@{
    ViewBag.Title = "Order Detail List";

    WebGrid grid = new WebGrid(source: Model, canSort: false);

}

<style>
    /*Here I will write some css for looks good*/

    th, td {
        padding: 5px;
    }

    th {
        background-color: rgb(248, 248, 248);
    }

    #gridT, #gridT tr {
        border: 1px solid #0D857B;
    }

    #subT, #subT tr {
        border: 1px solid #f3f3f3;
    }

    #subT {
        margin: 0px 0px 0px 10px;
        padding: 5px;
        width: 95%;
    }

        #subT th {
            font-size: 12px;
        }

    .hoverEff {
        cursor: pointer;
    }

        .hoverEff:hover {
            background-color: rgb(248, 242, 242);
        }

    .expand {
        background-image: url(/Images/pm.png);
        background-position-x: -22px;
        background-repeat: no-repeat;
    }

    .collapse {
        background-image: url(/Images/pm.png);
        background-position-x: -2px;
        background-repeat: no-repeat;
    }
</style>

<div id="main" style="padding:25px; background-color:white;">
    @grid.GetHtml(
    htmlAttributes: new { id = "gridT", width = "700px" },
    columns: grid.Columns(
            grid.Column("Order_Detail_Line_ID", "Line ID"),
            //grid.Column(header: "Order Date", format: (item) => string.Format("{0:dd-MM-yyyy}", item.order.OrderDate)),
            grid.Column("Item_Code", "Item Code"),
            grid.Column("Facility_Code", "Facility Code"),
           grid.Column("List_Price_Amt", "List Price"),

            grid.Column(format: (item) =>
            {
                WebGrid subGrid = new WebGrid(source: item.orderDetailDeliveries);
                return subGrid.GetHtml(
                    htmlAttributes: new { id = "subT" },
                    columns: subGrid.Columns(
                            subGrid.Column("Item_Code", "Item Code"),
                            subGrid.Column("Requested_Delivery_Date", "Delivery Date"),
                            subGrid.Column("Delivery_Qty", "Quantity"),
                            subGrid.Column("Delivery_Ext_Price_Amt", "List Price")
                        )
                    );
            })
        )
    )
</div>

Answer 1

通过更改样式解决了问题。

.collapse {
    background-image: url(/Images/pm.png);
    background-position-x: -2px;
    background-repeat: no-repeat;
    display: table-cell;
}

崩溃和uncollapse不工作Post 2.原帖1没有发表答案

1 个答案: