崩壊とuncollapseは私がネストされたデータを表示するのWebGridを作成する方法についてこの例を見つけ</p> <p>jQueryの2.1.4を使用しています答え

Question

を投稿しませんでした。

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