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

Treegrid updates, remove duplicate code in stickyheaders

rel-1.0
Vitaliy Filippov 2016-12-06 15:40:12 +03:00
parent 9cc2a9c60c
commit eef62d3656
3 changed files with 249 additions and 173 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

165
stickyheaders.js
View File

@ -1,11 +1,13 @@
// Simple Sticky Header and Column implementation for HTML tables
// (c) Vitaliy Filippov 2016
// License: MPL 2.0+
// Version: 2016-08-18
// Version: 2016-12-06
// USAGE:
// makeStickyHeaders(table): add sticky header and footer to table
// table.parentNode is assumed to be the scroll container
// checkStickyHeaders(table): call this after making table visible
// (if you've hidden it before)
// initStickyRows(table, trs): initialise table rows (trs = array[TableRow]) if not yet
// fixStickyRows(table, trs): fix table row (trs = array[TableRow]) after modifications
// fixStickyHeader(table): fix table header after modifications
@ -34,13 +36,12 @@ var _scri = 0;
function getOffsetRect(e)
{
var b = e.getBoundingClientRect();
var r = {
left: Math.round(b.left),
top: Math.round(b.top),
return {
left: Math.round(b.left*100)/100,
top: Math.round(b.top*100)/100,
width: Math.round((b.right-b.left)*100)/100,
height: Math.round((b.bottom-b.top)*100)/100
};
r.width = Math.round(b.right)-r.left;
r.height = Math.round(b.bottom)-r.top;
return r;
}
window.makeStickyHeaders = function(table)
@ -51,93 +52,51 @@ window.makeStickyHeaders = function(table)
(document.head||document.getElementsByTagName('head')[0]).appendChild(table._scrstyle);
table._scri = _scri++;
}
var rs = table.rows;
if (!rs.length || !rs[0].children.length)
if (!table.rows.length || !table.rows[0].children.length)
return;
var w = [], l = [], h = rs[0].offsetHeight;
var sr = rs[0].cloneNode(true);
sr.insertBefore(document.createElement('td'), sr.firstChild);
sr.style.visibility = 'hidden';
var w = [], l = [], h = table.rows[0].offsetHeight;
var sr = table.rows[0].cloneNode();
sr.appendChild(document.createElement('td'));
sr.children[0].style.width = '0';
sr.children[0].style.display = 'block';
sr.children[0].style.position = 'absolute';
sr.children[0].style.padding = '0';
var pb = getOffsetRect(rs[0]);
for (var i = 0; i < rs[0].children.length; i++)
{
var e = rs[0].children[i];
var b = getOffsetRect(e);
w[i] = b.width;
l[i] = b.left-pb.left;
}
table._widths = w;
sr.style.visibility = 'hidden';
table._widths = [];
table._sizerow = sr;
rs[0].style.height = '0';
rs[0].style.display = 'block';
rs[0].style.position = 'absolute';
rs[0].parentNode.insertBefore(sr, rs[0].nextSibling);
for (var i = 0; i < rs[0].children.length; i++)
{
var e = rs[0].children[i];
e._oldWidth = e.style.width;
e._sticky = true;
e.style.position = 'absolute';
e.style.width = w[i]+'px';
e.style.height = h+'px';
e.style.left = l[i]+'px';
e.style.display = 'block';
e.style.zIndex = '1';
}
// Try to minimise reflows: (1) make some changes
for (var i = rs.length-1; i >= 0; i--)
{
if (rs[i] == sr)
continue;
if (!rs[i].children.length)
continue;
var e = rs[i].children[0];
var d = e.cloneNode(true);
d.style.visibility = 'hidden';
rs[i].insertBefore(d, e.nextSibling);
if (i != 0)
{
e.style.position = 'absolute';
e.style.display = 'block';
e.style.zIndex = '1';
}
else
{
e.style.left = '';
e.style.zIndex = '2';
}
e.className += ' _scri'+table._scri;
}
// 2) <REFLOW> (offsetHeight causes reflow)
// 3) remember all heights
var hs = [];
for (var i = rs.length-1; i >= 1; i--)
hs[i] = getOffsetRect(rs[i]).height;
// 4) make other changes
for (var i = rs.length-1; i >= 1; i--)
{
if (rs[i] == sr)
continue;
if (!rs[i].children.length)
continue;
var e = rs[i].children[0];
e._oldWidth = e.style.width;
e.style.height = hs[i]+'px';
e.style.width = w[0]+'px';
}
var row0top = getOffsetRect(rs[0]).top-getOffsetRect(rs[0].offsetParent).top;
table.rows[0].style.height = '0';
table.rows[0].style.display = 'block';
table.rows[0].style.position = 'absolute';
table.rows[0].parentNode.insertBefore(sr, table.rows[0].nextSibling);
fixStickyHeader(table, true);
table._fixPending = true;
checkStickyHeaders(table);
var row0top = getOffsetRect(table.rows[0]).top-getOffsetRect(table.rows[0].offsetParent).top;
addListener(table.parentNode, 'scroll', function(e)
{
var l = this.scrollLeft, t = this.scrollTop;
table.rows[0].style.top = (t+row0top)+'px';
table._scrstyle.innerHTML = '._scri'+table._scri+' { left: '+l+'px; }';
if (!table._scrlastleft || table._scrlastleft != l)
{
table._scrstyle.innerHTML = l > 0 ? '._scri'+table._scri+' { left: '+l+'px; }' : '';
table._scrlastleft = l;
}
});
}
// should be called after showing table to recalculate fixed cell sizes
window.checkStickyHeaders = function(table)
{
if (table._fixPending)
{
delete table._fixPending;
var rows = [];
for (var i = 2; i < table.rows.length; i++)
rows.push(table.rows[i]);
fixStickyRows(table, rows);
}
}
// check if row(s) are not yet initialised and fix them
window.initStickyRows = function(table, trs, nocols)
{
@ -177,28 +136,40 @@ window.fixStickyRows = function(table, trs, nocols)
d = e.cloneNode(true);
d.style.visibility = 'hidden';
e.style.position = 'absolute';
if (e.rowSpan > 1)
e.rowSpan = 1;
if (e.style.display == 'none')
e.style.visibility = 'hidden';
e.style.display = 'block';
e.style.zIndex = '1';
trs[i].insertBefore(d, e.nextSibling);
e.className += ' _scri'+table._scri;
}
}
// (2) <REFLOW> caused by offsetWidth/offsetHeight
// (3) remember sizes
var w = [], h = [], b;
for (var i = 0; i < trs.length; i++)
if (table.offsetParent)
{
e = trs[i].children[1];
b = getOffsetRect(e);
w[i] = b.width;
h[i] = b.height;
// (2) <REFLOW> caused by offsetWidth/offsetHeight
// (3) remember sizes
var w = [], h = [], b;
for (var i = 0; i < trs.length; i++)
{
e = trs[i].children[1];
b = getOffsetRect(e);
w[i] = b.width;
h[i] = b.height;
}
// (4) apply sizes
for (var i = 0; i < trs.length; i++)
{
e = trs[i].children[0];
e.style.width = w[i]+'px';
e.style.height = h[i]+'px';
}
}
// (4) apply sizes
for (var i = 0; i < trs.length; i++)
else
{
e = trs[i].children[0];
e.style.width = w[i]+'px';
e.style.height = h[i]+'px';
// table is invisible
table._fixPending = true;
}
if (!nocols)
fixStickyColumnSizes(table);
@ -206,6 +177,12 @@ window.fixStickyRows = function(table, trs, nocols)
window.fixStickyColumnSizes = function(table, force)
{
if (!table.offsetParent)
{
// table is invisible
table._fixPending = true;
return;
}
// check&fix column sizes
var changed = false, resizeFixed = false;
for (var i = 1; i < table._sizerow.children.length; i++)

253
treegrid.js
View File

@ -1,7 +1,7 @@
/**
* Very simple and fast tree grid/table, compatible with dynamic loading and stickyheaders.js
* License: MPL 2.0+, (c) Vitaliy Filippov 2016+
* Version: 2016-10-24
* Version: 2016-12-06
*/
/**
@ -48,8 +48,8 @@
* TG.initCellEditing();
*
* // use simple mouse cell selection
* // HTMLElement restrictToNode: the element to listen for mousedown events
* TG.initCellSelection(restrictToNode);
* // boolean useMultiple: whether to initialise multi-cell selection (true) or single-cell (false)
* TG.initCellSelection(useMultiple);
*
* Callbacks:
*
@ -87,6 +87,67 @@ function TreeGrid(options)
new TreeGridNode({ children: options.items }, this);
}
function TreeGridNode(node, grid, level, insertBefore, startHidden)
{
this.grid = grid;
this.level = level;
this.key = node.key;
this.data = node.data;
if (this.level === undefined)
this.level = -1;
if (!grid.root)
grid.root = this;
else
{
this.leaf = node.leaf;
this.collapsed = node.collapsed || !node.leaf && (!node.children || !node.children.length);
this.tr = [];
for (var i = 0; i < (node.rows || 1); i++)
{
var tr = document.createElement('tr');
if (startHidden)
tr.style.display = 'none';
tr._node = this;
this.tr.push(tr);
}
this._oldCells = [];
this.render(undefined, undefined, false, true);
for (var i = 0; i < this.tr.length; i++)
{
insertBefore ? grid.tbody.insertBefore(this.tr[i], insertBefore) : grid.tbody.appendChild(this.tr[i]);
}
}
this.children = [];
this.childrenByKey = {};
if (node.children)
{
var trs = [];
for (var i = 0; i < node.children.length; i++)
{
var child = new TreeGridNode(node.children[i], grid, this.level+1, insertBefore, this.collapsed);
child._index = i;
this.children.push(child);
if (child.key !== undefined)
this.childrenByKey[child.key] = child;
if (grid.stickyInit && !this.collapsed)
trs.push.apply(trs, child.tr);
}
if (trs.length)
fixStickyRows(grid.table, trs);
}
}
(function() {
function htmlspecialchars(text)
{
return (''+text).replace(/&/g, '&amp;')
.replace(/'/g, '&apos;') // '
.replace(/"/g, '&quot;') // "
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;');
}
TreeGrid.prototype.initStickyHeaders = function(options)
{
this.sticky = true;
@ -95,12 +156,18 @@ TreeGrid.prototype.initStickyHeaders = function(options)
this._makeStickyHeaders();
}
TreeGrid.prototype.checkStickyHeaders = function()
{
if (this.stickyInit)
checkStickyHeaders(this.table);
}
TreeGrid.prototype._makeStickyHeaders = function()
{
var self = this;
this.table.className += ' stickyheaders';
makeStickyHeaders(this.table);
this.stickyInit = true;
this.table.className += ' stickyheaders';
if (!this.noStickyResize)
{
addListener(window, 'resize', function()
@ -144,13 +211,29 @@ TreeGrid.prototype.onExpand = function(node)
TreeGrid.prototype._setProps = function(el, props)
{
if (props === undefined || props === null)
{
for (var j in this.bindProps)
el[j] = '';
{
if (j == 'innerHTML' || j == 'className')
el[j] = '';
else
el.setAttribute(j, '');
}
}
else if (typeof props == 'string')
{
el.innerHTML = props;
}
else
{
for (var j in this.bindProps)
el[j] = props[j] !== undefined ? props[j] : '';
{
if (j == 'innerHTML' || j == 'className')
el[j] = (props[j] !== undefined ? props[j] : '');
else
el.setAttribute(j, (props[j] !== undefined ? props[j] : ''));
}
}
}
// Simple cell editing
@ -186,23 +269,33 @@ TreeGrid.prototype.initCellEditing = function()
var td = evt.target||evt.srcElement;
while (td.nodeName != 'TABLE' && td.nodeName != 'TD')
td = td.parentNode;
if (td.nodeName == 'TD' && td.parentNode._node && td.previousSibling && td.className != 'celleditor')
if (td.nodeName == 'TD' && td.parentNode._node && td.previousSibling && td.className.indexOf('celleditor') < 0)
{
var params = self.onStartCellEdit &&
self.onStartCellEdit(td.parentNode._node, self._getSubrow(td), self._getCellIndex(td, true), td) || {};
if (params.abort)
return;
self.editedCells.push(td);
td.className += ' celleditor';
if (params.value === undefined)
params.value = td.innerHTML;
td.innerHTML = '<input type="text" value="'+htmlspecialchars(params.value)+'" />';
addListener(td.firstChild, 'keydown', function(evt)
td._origWidth = td.style.width;
td.style.width = td.offsetWidth+'px';
td.className += ' celleditor';
if ('ActiveXObject' in window)
{
td.innerHTML = '<div><input type="text" value="'+htmlspecialchars(params.value)+'" /></div>';
td.style.height = 'inherit';
td.parentNode.style.height = '1px';
}
else
td.innerHTML = '<input type="text" value="'+htmlspecialchars(params.value)+'" />';
var inp = td.getElementsByTagName('input')[0];
addListener(inp, 'keydown', function(evt)
{
if (evt.keyCode == 13 || evt.keyCode == 10)
self.stopCellEditing(td);
});
td.firstChild.focus();
inp.focus();
}
});
addListener(document.body, 'click', function(evt)
@ -226,8 +319,10 @@ TreeGrid.prototype.stopCellEditing = function(td, _int)
var subrow = this._getSubrow(td);
var node = td.parentNode._node;
node._oldCells[i] = undefined;
td.style.width = td._origWidth;
var inp = td.getElementsByTagName('input')[0];
var params = this.onStopCellEdit &&
this.onStopCellEdit(node, subrow, i, td.firstChild ? td.firstChild.value : null, td) || {};
this.onStopCellEdit(node, subrow, i, inp ? inp.value : null, td) || {};
node.render(i, subrow, true);
if (!_int)
{
@ -244,12 +339,9 @@ TreeGrid.prototype.stopCellEditing = function(td, _int)
// Simple cell selection
TreeGrid.prototype.initCellSelection = function(restrictToNode)
TreeGrid.prototype.initCellSelection = function(useMultiple)
{
var startDrag, dragDiv;
var self = this;
self.table.className += ' disable-text-select';
self.selectCell = function(cell)
{
@ -271,7 +363,34 @@ TreeGrid.prototype.initCellSelection = function(restrictToNode)
els[i].className = els[i].className.replace(' selected', '');
};
addListener(restrictToNode || document.body, 'mousedown', function(evt)
if (useMultiple)
initMultiCellSelection(self);
else
initSingleCellSelection(self);
}
function initSingleCellSelection(self)
{
addListener(self.table, 'mousedown', function(evt)
{
self.deselectAll();
if (evt.which != 1)
return;
var td = evt.target||evt.srcElement;
while (td && (td.nodeName != 'TD' && td.nodeName != 'TH'))
td = td.parentNode;
if (td)
self.selectCell(td);
});
}
function initMultiCellSelection(self)
{
var startDrag, dragDiv;
self.table.className += ' disable-text-select';
addListener(self.table, 'mousedown', function(evt)
{
evt = getEventCoord(evt);
if (!evt.shiftKey)
@ -346,7 +465,7 @@ TreeGrid.prototype.initCellSelection = function(restrictToNode)
startDrag = null;
if (x2 > x1+10 && y2 > y1+10)
{
var bodyPos = getOffset(self.tbody);
var bodyPos = self.tbody.getBoundingClientRect();
if (x1 < bodyPos.left+self.tbody.offsetWidth &&
y1 < bodyPos.top+self.tbody.offsetHeight &&
x2 > bodyPos.left && y2 > bodyPos.top)
@ -401,56 +520,6 @@ TreeGrid.prototype.initCellSelection = function(restrictToNode)
// Tree grid node class
function TreeGridNode(node, grid, level, insertBefore, startHidden)
{
this.grid = grid;
this.level = level;
this.key = node.key;
this.data = node.data;
if (this.level === undefined)
this.level = -1;
if (!grid.root)
grid.root = this;
else
{
this.leaf = node.leaf;
this.collapsed = node.collapsed || !node.leaf && (!node.children || !node.children.length);
this.tr = [];
for (var i = 0; i < (node.rows || 1); i++)
{
var tr = document.createElement('tr');
if (startHidden)
tr.style.display = 'none';
tr._node = this;
this.tr.push(tr);
}
this._oldCells = [];
this.render();
for (var i = 0; i < this.tr.length; i++)
{
insertBefore ? grid.tbody.insertBefore(this.tr[i], insertBefore) : grid.tbody.appendChild(this.tr[i]);
}
}
this.children = [];
this.childrenByKey = {};
if (node.children)
{
var trs = [];
for (var i = 0; i < node.children.length; i++)
{
var child = new TreeGridNode(node.children[i], grid, this.level+1, insertBefore, this.collapsed);
child._index = i;
this.children.push(child);
if (child.key !== undefined)
this.childrenByKey[child.key] = child;
if (grid.stickyInit && !this.collapsed)
trs.push.apply(trs, child.tr);
}
if (trs.length)
fixStickyRows(grid.table, trs);
}
}
TreeGridNode.prototype.getKey = function()
{
return this.key;
@ -500,25 +569,49 @@ TreeGridNode.prototype._renderCell = function(rowIndex, colIndex, cell, force)
{
// this may be the first render of a row inside a stickyheaders grid
var tr = this.tr[rowIndex];
var ri = tr.cells.length && tr.cells[0].className.indexOf(' _scri') >= 0 ? (colIndex > 0 ? colIndex+1 : 0) : colIndex;
var isFix = tr.cells.length && tr.cells[0].className.indexOf(' _scri') >= 0;
var ri = isFix ? (colIndex > 0 ? colIndex+1 : 0) : colIndex;
while (!tr.cells[ri])
tr.appendChild(document.createElement('td'));
// virtualDOM-like approach: compare old HTML properties
if (force || !this._oldCells[rowIndex] || !this._oldCells[rowIndex][colIndex] ||
cell && !this._hashEqual(this._oldCells[rowIndex][colIndex], cell))
{
var old;
if (isFix && colIndex == 0 && rowIndex == 0)
{
old = {
width: tr.cells[ri].style.width,
height: tr.cells[ri].style.height,
position: tr.cells[ri].style.position,
display: tr.cells[ri].style.display,
zIndex: tr.cells[ri].style.zIndex
};
}
this.grid._setProps(tr.cells[ri], cell);
if (colIndex == 0)
{
if (rowIndex == 0)
{
this._addCollapser();
if (isFix)
{
// FIXME: this is rather ugly :-( we need to restore stickyheaders styles
tr.cells[ri]._oldWidth = tr.cells[ri].style.width;
for (var i in old)
tr.cells[ri].style[i] = old[i];
tr.cells[ri].className += ' _scri'+this.grid.table._scri;
}
}
else
tr.cells[ri].style.paddingLeft = (this.grid._initialPadding + this.grid.levelIndent * this.level + 20) + 'px';
}
return true;
}
return false;
}
TreeGridNode.prototype.render = function(colidx, rowidx, force)
TreeGridNode.prototype.render = function(colidx, rowidx, force, skipStickyFix)
{
var cells = this.grid.renderer(this, colidx, rowidx);
if (this.tr.length == 1)
@ -527,17 +620,19 @@ TreeGridNode.prototype.render = function(colidx, rowidx, force)
colidx = undefined;
if (rowidx === null || rowidx < 0 || rowidx >= this.tr.length)
rowidx = undefined;
var modified = false;
if (rowidx !== undefined)
{
if (colidx !== undefined)
{
this._renderCell(rowidx, colidx, cells[rowidx] && cells[rowidx][colidx], force);
modified = this._renderCell(rowidx, colidx, cells[rowidx] && cells[rowidx][colidx], force) || modified;
this._oldCells[rowidx] = this._oldCells[rowidx] || [];
this._oldCells[rowidx][colidx] = cells[rowidx] && cells[rowidx][colidx];
}
else
{
for (var j = 0; j < this.grid.header.length; j++)
this._renderCell(rowidx, j, cells[rowidx] && cells[rowidx][j], force);
modified = this._renderCell(rowidx, j, cells[rowidx] && cells[rowidx][j], force) || modified;
this._oldCells[rowidx] = cells[rowidx];
}
}
@ -545,7 +640,8 @@ TreeGridNode.prototype.render = function(colidx, rowidx, force)
{
for (var i = 0; i < this.tr.length; i++)
{
this._renderCell(i, colidx, cells[i] && cells[i][colidx], force);
modified = this._renderCell(i, colidx, cells[i] && cells[i][colidx], force) || modified;
this._oldCells[i] = this._oldCells[i] || [];
this._oldCells[i][colidx] = cells[i] && cells[i][colidx];
}
}
@ -553,9 +649,12 @@ TreeGridNode.prototype.render = function(colidx, rowidx, force)
{
for (var i = 0; i < this.tr.length; i++)
for (var j = 0; j < this.grid.header.length; j++)
this._renderCell(i, j, cells[i] && cells[i][j], force);
modified = this._renderCell(i, j, cells[i] && cells[i][j], force) || modified;
this._oldCells = cells;
}
if (modified && this.grid.stickyInit && !skipStickyFix)
fixStickyColumnSizes(this.grid.table);
return modified;
}
TreeGridNode.prototype._getToggleHandler = function()
@ -606,8 +705,8 @@ TreeGridNode.prototype.toggle = function()
if (!e.collapsed)
st = st.concat(e.children);
}
if (trs.length)
initStickyRows(this.grid.table, trs, true);
if (trs.length && this.grid.stickyInit)
fixStickyRows(this.grid.table, trs);
}
if (this.grid.stickyInit)
fixStickyColumnSizes(this.grid.table);
@ -708,4 +807,4 @@ TreeGridNode.prototype.addChildren = function(nodes, insertBefore)
return this.children.slice(insertBefore, nodes.length);
}
;
})();

4
treegridtest.htm
View File

@ -55,7 +55,7 @@ table.stickyheaders td:nth-child(2) { width: 25%; }
} ]);
}, 1000);
setTimeout(function() {
TG.initStickyHeaders();
TG.initStickyHeaders({});
}, 3000);
TG.onExpand = function(node)
{
@ -77,7 +77,7 @@ table.stickyheaders td:nth-child(2) { width: 25%; }
TG.initCellEditing();
// Cell selection by mouse drag example
TG.initCellSelection();
TG.initCellSelection(true);
TG.onCellSelect = function(node, i, td)
{
return i > 0;