From 681119af569184720524f0ab6ada184fd65c0c32 Mon Sep 17 00:00:00 2001
From: "dengke.li" <2009lidengke@163.com>
Date: Tue, 30 Apr 2019 17:28:08 +0800
Subject: [PATCH] Show previously expanded rows when the table is drawn again.
---
README.md | 10 ++-
dataTables.treeGrid.js | 148 +++++++++++++++++++++++++++++------------
2 files changed, 115 insertions(+), 43 deletions(-)
diff --git a/README.md b/README.md
index 5a2601a..bd6eae6 100644
--- a/README.md
+++ b/README.md
@@ -36,7 +36,15 @@ $('#example').DataTable({
'treeGrid': {
'left': 10,
'expandIcon': '+',
- 'collapseIcon': '-'
+ 'collapseIcon': '-',
+ 'trDataIdName' : 'item-id',
+ 'trDataPidName' : 'item-pid'
+ },
+ createdRow : function(row, data) {
+ $(row).attr('item-id', data.id);
+ if (+data.pid) {
+ $(row).attr('item-pid', data.pid);
+ }
}
});
```
diff --git a/dataTables.treeGrid.js b/dataTables.treeGrid.js
index 9e568b1..4573434 100644
--- a/dataTables.treeGrid.js
+++ b/dataTables.treeGrid.js
@@ -49,7 +49,10 @@
var dtSettings = new $.fn.dataTable.Api(dt).settings()[0];
this.s = {
- dt: dtSettings
+ dt: dtSettings,
+ expandIds: {}, // store expandIds, pid|id
+ trDataIdName : init.trDataIdName || '', // tr data id name
+ trDataPidName : init.trDataPidName || '' // tr data pid name
};
if (dtSettings._oTreeGrid) {
@@ -79,6 +82,7 @@
var treeGridRows = {};
var expandIcon = $(this.s.expandIcon);
var collapseIcon = $(this.s.collapseIcon);
+ var thatTreeGrid = this;
var resetTreeGridRows = function (trId) {
var subRows = treeGridRows[trId];
@@ -106,52 +110,98 @@
});
};
+ function calPidIds(trNode) {
+ if (!trNode || !thatTreeGrid.s.trDataIdName || !thatTreeGrid.s.trDataPidName) {
+ return;
+ }
+ var $tr = $(trNode);
+ if (!$tr.length) return;
+ var idName = thatTreeGrid.s.trDataIdName;
+ var pidName = thatTreeGrid.s.trDataPidName;
+ var itemId = $tr.attr(idName);
+ var $table = $tr.closest('table');
+ var $parentTr = $table.find('tr['+idName+'="' + $tr.attr(pidName) + '"]');
+ var topItemId = itemId;
+ var pidIds = [itemId];
+
+ while ($parentTr.length) {
+ topItemId = $parentTr.attr(idName);
+ $parentTr = $table.find('tr['+idName+'="' + $parentTr.attr(pidName) + '"]');
+ pidIds.unshift(topItemId);
+ }
+ return pidIds;
+ }
+
+ function expandGrid(tdNode) {
+ // record selected indexes
+ var selectedIndexes = [];
+ select && (selectedIndexes = dataTable.rows({selected: true}).indexes().toArray());
+
+ var parentTr = getParentTr(tdNode);
+ var parentTrId = getTrId();
+ $(parentTr).attr('tg-id', parentTrId);
+ var row = dataTable.row(parentTr);
+ var index = row.index();
+ var data = row.data();
+
+ var td = $(dataTable.cell(getParentTd(tdNode)).node());
+ var paddingLeft = parseInt(td.css('padding-left'), 10);
+ var layer = parseInt(td.find('span').css('margin-left') || 0, 10) / sLeft;
+ var icon = collapseIcon.clone();
+ icon.css('marginLeft', layer * sLeft + 'px');
+ td.removeClass('treegrid-control').addClass('treegrid-control-open');
+ td.html('').append(icon);
+
+ if (data.children && data.children.length) {
+ var subRows = treeGridRows[parentTrId] = [];
+ var prevRow = row.node();
+ data.children.forEach(function (item) {
+ var newRow = dataTable.row.add(item);
+ var node = newRow.node();
+ var treegridTd = $(node).find('.treegrid-control');
+ var left = (layer + 1) * sLeft;
+ $(node).attr('parent-index', index);
+ treegridTd.find('span').css('marginLeft', left + 'px');
+ treegridTd.next().css('paddingLeft', paddingLeft + left + 'px');
+ $(node).insertAfter(prevRow);
+ prevRow = node;
+ subRows.push(node);
+ });
+
+ resetEvenOddClass(dataTable);
+ select && setTimeout(function () {
+ dataTable.rows(selectedIndexes).select();
+ }, 0);
+ }
+ }
+
+ dataTable.on("draw", function () {
+ var expandIds = thatTreeGrid.s.expandIds;
+ if (thatTreeGrid.s.trDataIdName && thatTreeGrid.s.trDataPidName) {
+ for (var pidIdStr in expandIds) {
+ if (expandIds.hasOwnProperty(pidIdStr)) {
+ var pidIdArr = pidIdStr.split('|');
+ pidIdArr.forEach(function (value) {
+ var $td = $('tr['+thatTreeGrid.s.trDataIdName+'="'+value+'"] td.treegrid-control');
+ if ($td.length) {
+ expandGrid($td[0]);
+ }
+ });
+ }
+ }
+ }
+ });
+
// Expand TreeGrid
dataTable.on('click', 'td.treegrid-control', function (e) {
if (!$(this).html()) {
return;
}
-
- // record selected indexes
- var selectedIndexes = [];
- select && (selectedIndexes = dataTable.rows({selected: true}).indexes().toArray());
-
- var parentTr = getParentTr(e.target);
- var parentTrId = getTrId();
- $(parentTr).attr('tg-id', parentTrId);
- var row = dataTable.row(parentTr);
- var index = row.index();
- var data = row.data();
-
- var td = $(dataTable.cell(getParentTd(e.target)).node());
- var paddingLeft = parseInt(td.css('padding-left'), 10);
- var layer = parseInt(td.find('span').css('margin-left') || 0, 10) / sLeft;
- var icon = collapseIcon.clone();
- icon.css('marginLeft', layer * sLeft + 'px');
- td.removeClass('treegrid-control').addClass('treegrid-control-open');
- td.html('').append(icon);
-
- if (data.children && data.children.length) {
- var subRows = treeGridRows[parentTrId] = [];
- var prevRow = row.node();
- data.children.forEach(function (item) {
- var newRow = dataTable.row.add(item);
- var node = newRow.node();
- var treegridTd = $(node).find('.treegrid-control');
- var left = (layer + 1) * sLeft;
- $(node).attr('parent-index', index);
- treegridTd.find('span').css('marginLeft', left + 'px');
- treegridTd.next().css('paddingLeft', paddingLeft + left + 'px');
- $(node).insertAfter(prevRow);
- prevRow = node;
- subRows.push(node);
- });
-
- resetEvenOddClass(dataTable);
- select && setTimeout(function () {
- dataTable.rows(selectedIndexes).select();
- }, 0);
- }
+ var pidIds = calPidIds(getParentTr(e.target));
+ if (pidIds) {
+ thatTreeGrid.s.expandIds[pidIds.join('|')] = 1;
+ }
+ expandGrid(e.target);
});
// Collapse TreeGrid
@@ -168,6 +218,20 @@
td.removeClass('treegrid-control-open').addClass('treegrid-control');
td.html('').append(icon);
+ var pidIds = calPidIds(parentTr);
+ if (pidIds) {
+ var pidIdStr = pidIds.join('|'),
+ expandIds = thatTreeGrid.s.expandIds;
+
+ for (var i in expandIds) {
+ if (expandIds.hasOwnProperty(i)) {
+ if (i.indexOf(pidIdStr) === 0) {
+ delete expandIds[i];
+ }
+ }
+ }
+ }
+
resetTreeGridRows(parentTrId);
resetEvenOddClass(dataTable);