Я пытаюсь показать заказ с определенным диапазоном дат, поэтому я создаю веб-сетку для отображения заказов, и когда пользователь нажимает кнопку расширения, появляется подсетка для подробного заказа, но она всегда отображается так:
Последний столбец не удален, поэтому мои элементы детализации всегда отображаются, а изображение разворачивания и свертывания не отображается в первом столбце (поэтому его нельзя развернуть или свернуть)
Мои ссылки:
http://www.dotnetawesome.com/2014/07/nested-webgrid-with-expand-collapse-in-aspnet-mvc4.html
Это мой код: Вид:
@model Master.Models.Orders
@{
ViewBag.Title = "Orders";
}
@{
<style type="text/css">
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/plus.png);
background-position-x: -22px;
background-repeat: no-repeat;
}
.collapse1 {
background-image: url(/Images/plus.png);
background-position-x: -2px;
background-repeat: no-repeat;
}
</style>
}
@section Scripts {
<script type="text/javascript">
$(document).ready(function () {
$('input[type=datetime]').datepicker({
dateFormat: "dd/M/yy",
changeMonth: true,
changeYear: true,
yearRange: "-5:+5"
});
});
$(document).ready(function () {
var size = $("#main #gridT > thead > tr >th").size(); // get total column
$("#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(100);
$(this).toggleClass("expand collapse1");
});
});
//by default make all subgrid in collapse mode
$("#main #gridT > tbody > tr td.expand").each(function (i, el) {
$(this).toggleClass("expand collapse1");
$(this).parent().closest("tr").next().slideToggle(100);
});
});
</script>
}
<div class="col-md-12 col-sm-12" style="background-color:whitesmoke; margin-top:10px; margin-bottom:10px;">
<div class="col-md-1 col-sm-1"><h5>Period</h5></div>
<div class="row">
@using (Html.BeginForm("CustomersOrders", "Master"))
{
<div class="form-group row">
<div class="col-md-3">
@Html.EditorFor(m => m.FirstDate, new { htmlAttributes = new { @class = "form-control", @readonly = "true" } })
</div>
<div class="col-md-3">
@Html.EditorFor(m => m.LastDate, new { htmlAttributes = new { @class = "form-control", @readonly = "true" } })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-3">
<input type="submit" value="Show" class="btn btn-success" />
</div>
</div>
}
</div>
</div>
<div id="main" @*class="col-md-12 col-sm-12 tabel row"*@ style="padding:25px; background-color:white;">
@{
WebGrid grid = new WebGrid(Model.listData);
@grid.GetHtml(
htmlAttributes: new { id = "gridT" },
tableStyle: "table table-bordered table-responsive",
//fillEmptyRows: false,
//headerStyle: "gvHeading",
//alternatingRowStyle: "gvAlternateRow",
//rowStyle: "gvRow",
//footerStyle: "gvFooter",
//mode: WebGridPagerModes.All,
//firstText: "<< First",
//previousText: "< Prev",
//nextText: "Next >",
//lastText: "Last >>",
columns: grid.Columns (
grid.Column("list.Code", header:"Code"),
grid.Column("list.TotalValue", header:"Total"),
grid.Column("list.Customers", header:"Customer"),
grid.Column(format:(item)=>{
WebGrid subGrid = new WebGrid(source: item.ListDetail);
return subGrid.GetHtml(
htmlAttributes: new { id="subT" },
columns:subGrid.Columns(
subGrid.Column("Detail", header:"Detail"),
subGrid.Column("Item", header:"Item"),
subGrid.Column("Qty", header:"Qty"),
subGrid.Column("Value", header:"Value")
)
);
})
)
)
}
</div>
Мой макет:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - Produksi</title>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/modernizr-2.8.3.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Transaction", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="~/master/CustomersOrders">Orders</a></li></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li style="margin-top:2px; margin-right:2px; text-align:right;">
<p><b>@Session["UserCode"]</b></p>
<a href="@Url.Action("Index", "Home")" class="btn btn-link" style="margin-top:-25px;">Logout</a>
</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
</footer>
</div>
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<link href="../../Content/themes/base/datepicker.css" rel="stylesheet"
type="text/css" />
<link href="../../Content/themes/base/jquery-ui.css" rel="stylesheet"
type="text/css" />
@RenderSection("scripts", required: false)
</body>
</html>