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

Use additional absolute-positioned elements to set the total height

master
Vitaliy Filippov 2017-07-06 00:57:22 +03:00
parent 3cad0959e6
commit ecf43f9711
2 changed files with 27 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
treegrid.css
View File

@ -34,6 +34,7 @@ table.grid
{
border-collapse: separate;
border-spacing: 0;
outline: 0;
}
table.grid > *:first-child > tr:first-child > *, table.grid > tr:first-child > *
@ -169,6 +170,15 @@ table.grid .celleditor input
z-index: 4;
}
.grid-fixed-col-sizer
{
position: absolute;
left: 0;
top: 0;
width: 1px;
z-index: 0;
}
.grid-fixed-col-wrapper2
{
position: absolute;

20
treegrid.js
View File

@ -85,6 +85,7 @@ function TreeGrid(options)
this.bindProps[i] = 1;
this.levelIndent = 20;
this.table = document.createElement('table');
this.table.tabIndex = 0;
this.table.className = 'grid';
this.thead = document.createElement('thead');
this.tbody = document.createElement('tbody');
@ -122,6 +123,9 @@ function TreeGrid(options)
this.fixedCol.appendChild(this.fixedColBody);
this.fixedColWrapper = document.createElement('div');
this.fixedColWrapper.className = 'grid-fixed-col-wrapper';
this.fixedColSizer = document.createElement('div');
this.fixedColSizer.className = 'grid-fixed-col-sizer';
this.fixedColWrapper.appendChild(this.fixedColSizer);
this.fixedColWrapper.appendChild(this.fixedCol);
this.fixedColWrapper2 = document.createElement('div');
this.fixedColWrapper2.className = 'grid-fixed-col-wrapper2';
@ -131,6 +135,9 @@ function TreeGrid(options)
this.wrapper.className = 'grid-wrapper';
this.tableWrapper = document.createElement('div');
this.tableWrapper.className = 'grid-body-wrapper';
this.tableSizer = document.createElement('div');
this.tableSizer.className = 'grid-fixed-col-sizer';
this.tableWrapper.appendChild(this.tableSizer);
this.tableWrapper.appendChild(this.table);
this.wrapper.appendChild(this.tableWrapper);
// sticky column width
@ -486,6 +493,8 @@ TreeGrid.prototype.syncView = function()
var lastFirst = endStart+this._findVisibleNodeOffset(lastNodes, offsetHeight);
var avgItemHeight = this.endItemHeight / lastNodes.length;
avgItemHeight = (avgItemHeight < this.minItemHeight ? this.minItemHeight : avgItemHeight);
this.fixedColSizer.style.height = (this.nodeCount*avgItemHeight)+'px';
this.tableSizer.style.height = (this.nodeCount*avgItemHeight)+'px';
var scrollPos = this.nodeCount*avgItemHeight > this.tableWrapper.offsetHeight ?
this.tableWrapper.scrollTop / (this.nodeCount*avgItemHeight - this.tableWrapper.offsetHeight) : 0;
if (scrollPos > 1)
@ -493,7 +502,7 @@ TreeGrid.prototype.syncView = function()
var firstVisible = scrollPos*lastFirst;
var rangeStart = Math.floor(firstVisible);
var rangeCount = visibleItems;
this._addPlaceholder('top');
this._addPlaceholder('top', 0);
var firstItemHeight;
if (rangeStart >= endStart)
{
@ -514,11 +523,16 @@ TreeGrid.prototype.syncView = function()
var visibleNodes = this._findNodes(this.root, rangeStart, rangeCount);
this._renderNodes(visibleNodes);
this._syncStart(visibleNodes);
this._addPlaceholder('mid');
this._addPlaceholder('mid', 0);
firstItemHeight = getNodeHeight(visibleNodes[0])*(firstVisible-rangeStart);
}
this._setPlaceholder('top', this.tableWrapper.scrollTop-firstItemHeight);
}
else
{
this.fixedColSizer.style.height = 0;
this.tableSizer.style.height = 0;
}
this._finishSync();
// Then sync row sizes for fixed column to work properly
var total = 0;
@ -545,7 +559,7 @@ TreeGrid.prototype.syncView = function()
}
this.syncStickyRow();
}
if (endStart > 0)
if (endStart > 0 && endStart > rangeStart+rangeCount)
{
this._setPlaceholder('mid', this.nodeCount*avgItemHeight - total - (this.tableWrapper.scrollTop-firstItemHeight));
}