Skip to content

Commit

Permalink
#4234 Added multi child level for DataTables
Browse files Browse the repository at this point in the history
  • Loading branch information
DmitriyKulagin committed Jan 31, 2020
1 parent 6a5bd3a commit 600278e
Show file tree
Hide file tree
Showing 5 changed files with 57 additions and 32 deletions.
Expand Up @@ -67,7 +67,7 @@
},
ChildTable = new DataTablesModel
{
Name = "shipments-grid",
Name = "forumdetails-grid",
UrlRead = new DataUrl("ForumList", "Forum", null),
IsChildTable = true,
Length = Model.PageSize,
Expand Down
Expand Up @@ -241,7 +241,7 @@
},
ChildTable = new DataTablesModel
{
Name = "shipments-grid",
Name = "products-grid",
UrlRead = new DataUrl("ShipmentsItemsByShipmentId", "Order", null),
IsChildTable = true,
Paging = false,
Expand Down
62 changes: 53 additions & 9 deletions src/Presentation/Nop.Web/Areas/Admin/Views/Shared/Table.cshtml
Expand Up @@ -10,6 +10,11 @@
? $"{(dataUrl.Url.StartsWith("~/", StringComparison.Ordinal) ? Url.Content(dataUrl.Url) : dataUrl.Url).TrimEnd('/')}" + (!dataUrl.TrimEnd ? "/" : "")
: string.Empty;
}

string ReplaceName(string str)
{
return str.Replace("-", "_");
}
}
<table class="table table-bordered table-hover table-striped dataTable" width="100%" id="@Model.Name">
@if (Model.FooterColumns > 0)
Expand All @@ -31,10 +36,30 @@
//check using MasterCheckBox
var isMasterCheckBoxUsed = Model.ColumnCollection.Any(x => x.IsMasterCheckBox);
//Model name for js function names
var model_name = Model.Name.Replace("-", "_");
var model_name = ReplaceName(Model.Name);
}

<script>
var entityMap = {
'&': '&amp;',
'<': '&lt;',
'>': '&gt;',
'"': '&quot;',
"'": '&#39;',
'/': '&#x2F;',
'`': '&#x60;',
'=': '&#x3D;'
};
function escapeHtml (string) {
if (string == null) {
return '';
}
return String(string).replace(/[&<>"'`=\/]/g, function (s) {
return entityMap[s];
});
}
@if (isMasterCheckBoxUsed)
{
//selectedIds - This variable will be used on views. It can not be renamed
Expand Down Expand Up @@ -153,7 +178,7 @@
var editIndexTable_@(model_name) = -1;
var editRowData_@(model_name) = [];
var columnData_@(model_name) = [];
@foreach(var column in Model.ColumnCollection.Where(x => x.Editable))
@foreach (var column in Model.ColumnCollection.Where(x => x.Editable))
{
<text>
var obj = { 'Data': '@column.Data', 'Editable': @column.Editable.ToString().ToLower(), 'Type': '@column.EditType.ToString().ToLower()' }
Expand Down Expand Up @@ -224,6 +249,7 @@
var strValue = editRowData_@(model_name)[cellName];
$($(curRow).children("[data-columnname='" + cellName + "']")[0]).html('<input value="' + escapeQuotHtml(strValue) + '" class="userinput" style="width: 99% " />');
}
$('#@Model.Name').DataTable().columns.adjust();
}
}
Expand Down Expand Up @@ -325,17 +351,33 @@

@if (Model.ChildTable != null)
{
@functions{
void GetAllModels(DataTablesModel model, List<DataTablesModel> models)
{
models.Add(model);
if (model.ChildTable.ChildTable != null)
{
GetAllModels(model.ChildTable, models);
}
}
}

var listofTables = new List<DataTablesModel>();
GetAllModels(Model,listofTables);
foreach (var curModel in listofTables)
{
var modelName = ReplaceName(curModel.Name);
<text>
<script>
function getchild_@(model_name)(d) {
return '<table id="child' + d.@(Model.PrimaryKeyColumn) + '" class="table table-bordered table-hover dataTable" width="100%" style="padding-left:2%;"></table>';
function getchild_@(modelName)(d) {
return '<table id="child' + d.@(curModel.PrimaryKeyColumn) + '" class="table table-bordered table-hover dataTable" width="100%" style="padding-left:2%;"></table>';
}
$(document).ready(function () {
// Add event listener for opening and closing childs
$('#@Model.Name tbody').on('click', 'td.child-control', function () {
$('#@curModel.Name tbody').on('click', 'td.child-control', function () {
var tr = $(this).closest('tr');
var tdi = tr.find('i.fa');
var row = $('#@Model.Name').DataTable().row(tr);
var row = $('#@curModel.Name').DataTable().row(tr);
if (row.child.isShown()) {
// This row is already open - close it
Expand All @@ -346,17 +388,19 @@
}
else {
// Open this row
row.child(getchild_@(model_name)(row.data())).show();
var classid = '#child' + row.data().@(Model.PrimaryKeyColumn);
row.child(getchild_@(modelName)(row.data())).show();
var classid = '#child' + row.data().@(curModel.PrimaryKeyColumn);
$(classid).DataTable({
@await Html.PartialAsync("_Table.Definition", Model.ChildTable)
@await Html.PartialAsync("_Table.Definition", curModel.ChildTable)
}).draw;
tr.addClass('shown');
tdi.first().removeClass('fa-caret-right');
tdi.first().addClass(' fa-caret-down');
}
$('#@curModel.Name').DataTable().columns.adjust();
});
});
</script>
</text>
}
}
Expand Up @@ -229,26 +229,7 @@ columns: [
@if (column.Encode && column.Render == null)
{
<text>
render: function (data, type, row, meta) {
var entityMap = {
'&': '&amp;',
'<': '&lt;',
'>': '&gt;',
'"': '&quot;',
"'": '&#39;',
'/': '&#x2F;',
'`': '&#x60;',
'=': '&#x3D;'
};

function escapeHtml (string) {
if (string == null) {
return '';
}
return String(string).replace(/[&<>"'`=\/]/g, function (s) {
return entityMap[s];
});
}
render: function (data, type, row, meta) {
return escapeHtml(data)
},
</text>
Expand Down
Expand Up @@ -174,7 +174,7 @@
},
ChildTable = new DataTablesModel
{
Name = "carts-grid",
Name = "products-grid",
UrlRead = new DataUrl("GetCartDetails", "ShoppingCart", null),
UrlDelete = new DataUrl("DeleteItem", "ShoppingCart", null),
IsChildTable = true,
Expand Down

0 comments on commit 600278e

Please sign in to comment.