У меня было подобное требование, но я использовал Ajax для Иерархическая информация показывает. Это помогает мне двумя способами. Одна дочерняя информация загружается по запросу. поэтому мне не нужно загружать всю информацию за один раз, а также помогать в иерархии уровней.
я использовал Jquery DataTable вместе с mvccontrib сеткой для поиска постраничного и для иерархических данных расширения Распада связь была введена
Обновлены: В моей exmple я создал первый столбец с некоторой Concat информации о первой колонке, которая потребовал, чтобы я определил строку, которую я нажал. class .expand должен указывать при щелчке, он должен быть расширен. Вызывается вызов $ .ajax, и полученная информация будет добавлена к нажатой строке. expand/collapse - метод js. вы увидите ниже этот код.
<%Html.Grid(Model)
.Columns(column =>
{%>
<% <td><a id="<%= c.Desc %>_<%= c.No %>" href="#" class="expand"></a></td>
<% }).Attributes(c => new Dictionary<string, object> { { "padding-left", " 5px" } });
column.For(c => c.Date).Format("{0:dd/MM/yyyy}").Named("Date");
column.For(c => c.Desc).Named("Description");
}).Attributes(id => "example")
.Empty("----------- No Ledger Details for current month/Search ----------- ").Render();%>
Я использовал JQuery DataTable для пагинацией и поиск в населенной rows.and также используется tabletool плагин для JQuery DataTable, которые помогают в экспорте результата в CSV/XLS/PDF. и скопируйте мой контент.
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('#example').dataTable({
"sDom": 'T<"clear">lfrtip',
"bProcessing": true,
"bPaginate": true,
"sPaginationType": "full_numbers",
"bFilter": true,
"iDisplayLength": 10,
"bSort": false,
"oTableTools": {
"sRowSelect": "multi",
"sSwfPath": "../../../../Content/media/swf/copy_cvs_xls_pdf.swf",
"aButtons": ["select_all", "select_none", "copy", "print", {
"sExtends": "collection",
"sButtonText": "Save",
"aButtons": ["csv", "xls", "pdf"]
}]
}
});
});
</script>
Для Сворачивание/разворачивание
$("#example a.collapse").live('click', function (event) {
event.preventDefault();
$(this).closest('tr').next().slideUp().remove();
$(this).removeClass("expand");
$(this).addClass("collapse");
});
$("#example a.expand").live('click', function (event) {
event.preventDefault();
var parent = $(this).closest('tr');
var linkid = $(this).attr('id');
var parts = linkid.split("_");
var billNo = parts[1];
loadBillDetails(parent, billNo);
$(this).removeClass("collapse");
$(this).addClass("expand");
});
function loadBillDetails(parent, billNo) {
var defaultParameters = "{BillNo:" + billNo + "}";
$.ajax({
type: "POST",
url: '<%=Url.Action("GetBillDetails", "Order") %>',
data: defaultParameters,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: (function (data) {
var str = "<tr style='padding:5px;'><td colspan=7><div style='width: 850px; max-height: 300px; overflow: auto; background-color: #F4F4F4;'>";
str += "<table width='100%' id='billDetails'><tr align='left'><th>BillNo</th><th>ProductName</th><th>OrderNo</th><th>RollNo</th><th>Qty</th><th>Rate</th><th></th><th></th><th></th><th></th></tr>";
if (data.BillDetails.length > 0) {
for (var y = 0; y < data.BillDetails.length; y++) {
str += "<tr><td>" + data.BillDetails[y].FinalBillNo + "</td><td>" + data.BillDetails[y].ProductName + "</td><td>" + data.BillDetails[y].OrderNo + "</td><td>" + data.BillDetails[y].RollsNo + "</td><td>" + data.BillDetails[y].Qty + "</td><td>" + data.BillDetails[y].Rate + "</td><td></td><td></td><td></td></tr>";
}
str += "</table></div></td></tr>";
}
else {
str = "<tr style='padding:7px;'><td colspan=6>No order found.</td></tr>";
}
var newRow = $(str);
parent.after(newRow).slideDown();
}),
error: (function() {
parent.after("<tr style='padding:5px;'><td colspan=5>An Error has occurred.</td></tr>");
})
});
}
});
У вас есть пример или документы я мог смотреть снова? –
Хорошо, я сделаю то, что я сделал –
@KaiCriticallyAcclaimedCooper. У меня есть мой ответ с моим примером. –