嵌套 WebGrid，MVC5答案

【问题标题】：Nested WebGrid, MVC5嵌套 WebGrid，MVC5
【发布时间】：2015-04-22 05:25:05
【问题描述】：

美好的一天，我正在使用 MVC 5，试图创建一个嵌套的 WebGrid，按照教程不起作用（http://dotnetawesome.com/mvc/Nested-WebGrid-With-Expand-Collapse-in-MVC4）我设法“更新”了 jquery 代码，但是当我单击一行时，它没有展开，它消失了。按照我的代码：

控制器：只需在表格上选择并将运费退回到视图。

查看： jQuery：

$(document).ready(function () {
        var size = $("#DivGrid #result > thead > tr >th").size(); // get total column
        $("#DivGrid #result > thead > tr >th").last().remove(); // remove last column
        $("#DivGrid #result > thead > tr").prepend("<th></th>"); // add one column at first for collapsible column
        $("#DivGrid #result > 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
            $("#DivGrid").on("click", "#result tbody tr", function () {
                console.log("HOVEREFF");
                $(this).parent().closest("tr").next().slideToggle(100);
                $(this).toggleClass("expand collapse");
            });
        });

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


HTML

 <div id="WebGrid">
            @{
                WebGrid grid = new WebGrid(Model, rowsPerPage: 100, ajaxUpdateContainerId: "result");
            }
            <div id="HeadTabela">
                <table class="tHead">
                    <tr>
                        <td class="Col2P">
                            <label>COD UNIDADE</label>
                        </td>
                        <td class="Col2P">
                            <label>COD GRUPO</label>
                        </td>
                        <td class="Col6P">
                            <label>DES GRUPO</label>
                        </td>
                        <td class="Col2P">
                            <label>ATIVO</label>
                        </td>
                    </tr>
                </table>
            </div>
            <div id="DivGrid">
                @grid.GetHtml(
                        htmlAttributes: new { id = "result" },
                        tableStyle: "grid",
                        headerStyle: "head",
                        alternatingRowStyle: "alt",
                    columns: new[] {
                            grid.Column("DESCRIÇÃO GRUPO", canSort: false, format:
                            @<text>  <span>
                                         <label id="lblCodigo">@item.DES_ASSUNTO</label>
                                         <label id="lblGrupo">@item.COD_USUARIO_REMETENTE</label>
                                    <label id="lblDesGrupo">@item.COD_USUARIO_DESTINATARIO</label>
                                </span></text>, style: "Col6P"),
                            grid.Column(format:(a)=>{
                            WebGrid subGrid = new WebGrid(source: Model);
                            return subGrid.GetHtml(
                                htmlAttributes: new { id="subT" },
                                columns:subGrid.Columns(
                                        subGrid.Column("DESCRIÇÃO GRUPO", canSort: false, format:
                            @<text>  <span>
                                    <label id="lblDesGrupo">@a.DES_MENSAGEM</label>
                                </span></text>, style: "Col6P")
                                    )                    
                                );
                        })}
                    )
            </div>
        </div>

【问题讨论】：

标签： jquery asp.net-mvc-5 webgrid

【解决方案1】：

// ADD CLICK EVENT FOR MAKE COLLAPSIBLE
            $("#DivGrid").on("click", "#result tbody tr", function () {
                console.log("HOVEREFF");
                $(this).parent().closest("tr").next().slideToggle(100);

                $(this).toggleClass("expand collapse"); // Change name of style class "collapse", its being used by default css file.
            });
        });

        //by default make all subgrid in collapse mode
        $("#DivGrid #result > tbody > tr td.expand").each(function (i, el) {
            //$(this).toggleClass("expand collapse"); // Change name of style class "collapse", its being used by default css file.
            $(this).parent().closest("tr").next().slideToggle(100);
        });



Change name of style class "collapse", its being used by default css file.

Regards, Naveed.

【讨论】：

我添加了 Simular 问题，这有助于我解决它！ @Naveed，非常感谢。

【解决方案2】：

嗨，你确定 subGrid 有数据吗？您对主网格和子网格使用相同的模型。这对我来说似乎有点奇怪。请发布您所获得的渲染 HTML，看看我是否可以帮助您找到错误。

【讨论】：