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

Add automatic resize on window resize by default

rel-1.0
Vitaliy Filippov 2016-08-15 16:22:13 +03:00
parent c022dd9212
commit 2ba24b71eb
4 changed files with 39 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
stickyheaders.js
View File

@ -1,7 +1,7 @@
// Simple Sticky Header and Column implementation for HTML tables
// (c) Vitaliy Filippov 2016
// License: MPL 2.0+
// Version: 2016-08-13
// Version: 2016-08-15
// USAGE:
// makeStickyHeaders(table): add sticky header and footer to table
@ -27,7 +27,7 @@
// WARNING 5: make sure you have no CSS rules that will differ on the original header row/column and cloned one,
// and that min/max width/height rules apply to the second row/column, not the first header one.
(function() {
;(function() {
var _scri = 0;
@ -127,7 +127,7 @@ window.makeStickyHeaders = function(table)
e.style.height = hs[i]+'px';
e.style.width = w[0]+'px';
}
var row0top = getOffsetRect(rs[0]).top;
var row0top = getOffsetRect(rs[0]).top-getOffsetRect(rs[0].offsetParent).top;
addListener(table.parentNode, 'scroll', function(e)
{
var l = this.scrollLeft, t = this.scrollTop;

12
treegrid.css
View File

@ -9,6 +9,14 @@ body { -moz-text-size-adjust: none; } /* do not scale fonts in mobile firefox */
/* scroll div styles */
.scroller
{
position: relative;
height: 100%;
width: 100%;
}
.scroller > .inner
{
position: absolute;
height: 100%;
width: 100%;
overflow: auto;
@ -43,6 +51,10 @@ table.grid
border-collapse: separate;
border-spacing: 0;
border-left: 1px solid #ccc;
}
table.grid > *:first-child > tr:first-child > *, table.grid > tr:first-child > *
{
border-top: 1px solid #ccc;
}

33
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-08-12
* Version: 2016-08-15
*/
/**
@ -82,14 +82,27 @@ function TreeGrid(options)
new TreeGridNode({ children: options.items }, this);
}
TreeGrid.prototype.initStickyHeaders = function()
TreeGrid.prototype.initStickyHeaders = function(options)
{
this.sticky = true;
this.stickyInit = this.header && this.header.length;
if (this.stickyInit)
this.noStickyResize = options.noWindowResize;
if (this.header && this.header.length)
this._makeStickyHeaders();
}
TreeGrid.prototype._makeStickyHeaders = function()
{
var self = this;
makeStickyHeaders(this.table);
this.stickyInit = true;
this.table.className += ' stickyheaders';
if (!this.noStickyResize)
{
makeStickyHeaders(this.table);
this.table.className += ' stickyheaders';
addListener(window, 'resize', function()
{
if (self.stickyInit)
fixStickyColumnSizes(self.table);
});
}
}
@ -111,11 +124,7 @@ TreeGrid.prototype.setHeader = function(newHeader)
if (this.sticky)
{
if (!this.stickyInit)
{
makeStickyHeaders(this.table);
this.table.className += ' stickyheaders';
this.stickyInit = true;
}
this._makeStickyHeaders();
else
fixStickyHeader(this.table);
}
@ -693,3 +702,5 @@ TreeGridNode.prototype.addChildren = function(nodes, insertBefore)
fixStickyRows(this.grid.table, trs);
return this.children.slice(insertBefore, nodes.length);
}
;

4
treegridtest.htm
View File

@ -12,11 +12,11 @@ table { border-collapse: separate; border-spacing: 0px; }
th, td { border-width: 0 1px 1px 0 !important; }
table td:nth-child(1) { width: 25%; }
table.stickyheaders td:nth-child(2) { width: 25%; }
.scroller { width: 100%; height: 400px; overflow: auto; }
.scroller { width: 100%; height: 400px; }
</style>
</head>
<body>
<div class="scroller" id="scroller"></div>
<div class="scroller"><div class="inner" id="scroller"></div></div>
<script>
<!--
(function()