vitalif-js
/
treegrid
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Bump version (but only sticky mode works)

master
Vitaliy Filippov 2017-07-06 01:40:45 +03:00
parent ecf43f9711
commit afedd70edd
2 changed files with 28 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
treegrid.js
View File

@ -1,8 +1,11 @@
/** /**
* Very simple and fast tree grid/table, with support for fixed header and column, compatible with dynamic loading * Very simple and fast tree grid/table, with support for:
* - fixed header and column
* - virtual scrolling
* - dynamic loading of child nodes
* *
* License: MPL 2.0+, (c) Vitaliy Filippov 2016+ * License: MPL 2.0+, (c) Vitaliy Filippov 2016+
* Version: 2017-01-24 * Version: 2017-07-06
*/ */
/** /**
@ -219,10 +222,7 @@ function TreeGridNode(node, grid, parentNode, insertIndex, skipSync)
} }
} }
if (!skipSync) if (!skipSync)
{
this.grid.syncView(); this.grid.syncView();
this.grid.syncStickyHeaders();
}
} }
(function() { (function() {
@ -293,7 +293,7 @@ TreeGrid.prototype._renderNodes = function(nodes)
} }
else else
nodes[i]._reuse = true; nodes[i]._reuse = true;
nodes[i].render(undefined, undefined, false, true); nodes[i].render(undefined, undefined, false, 2);
this.renderedNodes.push(nodes[i]); this.renderedNodes.push(nodes[i]);
} }
} }
@ -528,7 +528,7 @@ TreeGrid.prototype.syncView = function()
} }
this._setPlaceholder('top', this.tableWrapper.scrollTop-firstItemHeight); this._setPlaceholder('top', this.tableWrapper.scrollTop-firstItemHeight);
} }
else else if (this.stickyHeaders)
{ {
this.fixedColSizer.style.height = 0; this.fixedColSizer.style.height = 0;
this.tableSizer.style.height = 0; this.tableSizer.style.height = 0;
@ -538,26 +538,12 @@ TreeGrid.prototype.syncView = function()
var total = 0; var total = 0;
if (this.stickyHeaders) if (this.stickyHeaders)
{ {
if (this.fixedCol.offsetWidth) total = this.syncStickyHeaders(true);
this.setStickyColumnWidth(this.fixedCol.offsetWidth+'px'); }
var h1, h2; else
var h = []; {
for (var i = 0; i < this.tbody.rows.length; i++) for (var i = 0; i < this.tbody.rows.length; i++)
{ total += (this.tbody.rows[i].offsetHeight||0);
h1 = this.tbody.rows[i].offsetHeight||0;
h2 = this.fixedColBody.rows[i].offsetHeight||0;
h[i] = h1 < h2 ? h2 : h1;
}
for (var i = 0; i < this.tbody.rows.length; i++)
{
if (h[i] && !this.tbody.rows[i].is_placeholder)
{
total += h[i];
this.tbody.rows[i].style.height = h[i]+'px';
this.fixedColBody.rows[i].style.height = h[i]+'px';
}
}
this.syncStickyRow();
} }
if (endStart > 0 && endStart > rangeStart+rangeCount) if (endStart > 0 && endStart > rangeStart+rangeCount)
{ {
@ -607,25 +593,26 @@ TreeGrid.prototype.setStickyColumnWidth = function(w)
TreeGrid.prototype.syncStickyHeaders = function(sync_all) TreeGrid.prototype.syncStickyHeaders = function(sync_all)
{ {
if (!this.stickyHeaders || !this.wrapper.offsetParent) if (!this.stickyHeaders || !this.wrapper.offsetParent)
return; return 0;
var total = 0;
if (this.fixedCol.offsetWidth) if (this.fixedCol.offsetWidth)
this.setStickyColumnWidth(this.fixedCol.offsetWidth+'px'); this.setStickyColumnWidth(this.fixedCol.offsetWidth+'px');
var h1, h2, h = []; var h1, h2, h = [];
if (sync_all) if (sync_all)
{ {
for (var i = 0; i < this.table.rows.length-1; i++) for (var i = 0; i < this.tbody.rows.length; i++)
{ {
h1 = this.table.rows[i+1].offsetHeight; h1 = this.tbody.rows[i].offsetHeight||0;
h2 = this.fixedCol.rows[i].offsetHeight; h2 = this.fixedColBody.rows[i].offsetHeight||0;
if (h1 && h2) h[i] = h1 < h2 ? h2 : h1;
h[i] = h1 < h2 ? h2 : h1;
} }
for (var i = 0; i < this.table.rows.length-1; i++) for (var i = 0; i < this.tbody.rows.length; i++)
{ {
if (h[i]) if (h[i] && !this.tbody.rows[i].is_placeholder)
{ {
this.table.rows[i+1].style.height = h[i]+'px'; total += h[i];
this.fixedCol.rows[i].style.height = h[i]+'px'; this.tbody.rows[i].style.height = h[i]+'px';
this.fixedColBody.rows[i].style.height = h[i]+'px';
} }
} }
} }
@ -648,12 +635,13 @@ TreeGrid.prototype.syncStickyHeaders = function(sync_all)
{ {
this.toSync[i].tr[k].style.height = h[j]+'px'; this.toSync[i].tr[k].style.height = h[j]+'px';
this.toSync[i].col_tr[k].style.height = h[j]+'px'; this.toSync[i].col_tr[k].style.height = h[j]+'px';
total += h[j];
} }
} }
} }
} }
this.toSync = [];
this.syncStickyRow(); this.syncStickyRow();
return total;
} }
TreeGrid.prototype.syncStickyRow = function() TreeGrid.prototype.syncStickyRow = function()
@ -828,7 +816,7 @@ TreeGrid.prototype.stopCellEditing = function(td, _int)
var inp = td.getElementsByTagName('input')[0]; var inp = td.getElementsByTagName('input')[0];
var params = this.onStopCellEdit && var params = this.onStopCellEdit &&
this.onStopCellEdit(node, subrow, i, inp ? inp.value : null, td) || {}; this.onStopCellEdit(node, subrow, i, inp ? inp.value : null, td) || {};
node.render(i, subrow, true); node.render(i, subrow, true, 0);
if (!_int) if (!_int)
{ {
for (var i = 0; i < this.editedCells.length; i++) for (var i = 0; i < this.editedCells.length; i++)
@ -1145,7 +1133,7 @@ TreeGridNode.prototype.render = function(colidx, rowidx, force, skipSync)
modified = this._renderCell(i, j, cells[i] && cells[i][j], force) || modified; modified = this._renderCell(i, j, cells[i] && cells[i][j], force) || modified;
this._oldCells = cells; this._oldCells = cells;
} }
if (modified && this.grid.stickyHeaders) if (modified && this.grid.stickyHeaders && skipSync !== 2)
{ {
this.grid.toSync.push(this); this.grid.toSync.push(this);
if (!skipSync) if (!skipSync)

2
treegridtest.htm
View File

@ -48,7 +48,7 @@ th, td { border-width: 0 1px 1px 0 !important; }
} }
return cells; return cells;
} }); } });
document.body.appendChild(TG.wrapper); document.body.appendChild(TG.wrapper||TG.table);
TG.syncView(); TG.syncView();
/*setTimeout(function() { /*setTimeout(function() {
TG.setHeader([ '', '15 фев', '16 фев', '17 фев', '18 фев', '19 фев', '20 фев', '21 фев', '15 фев', '16 фев', '17 фев', '18 фев', '19 фев', '20 фев', '21 фев', '15 фев', '16 фев', '17 фев', '18 фев', '19 фев', '20 фев', '21 фев', '15 фев', '16 фев', '17 фев', '18 фев', '19 фев', '20 фев', '21 фев' ]); TG.setHeader([ '', '15 фев', '16 фев', '17 фев', '18 фев', '19 фев', '20 фев', '21 фев', '15 фев', '16 фев', '17 фев', '18 фев', '19 фев', '20 фев', '21 фев', '15 фев', '16 фев', '17 фев', '18 фев', '19 фев', '20 фев', '21 фев', '15 фев', '16 фев', '17 фев', '18 фев', '19 фев', '20 фев', '21 фев' ]);