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 // Simple Sticky Header and Column implementation for HTML tables
// (c) Vitaliy Filippov 2016 // (c) Vitaliy Filippov 2016
// License: MPL 2.0+ // License: MPL 2.0+
// Version: 2016-08-13 // Version: 2016-08-15
// USAGE: // USAGE:
// makeStickyHeaders(table): add sticky header and footer to table // 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, // 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. // and that min/max width/height rules apply to the second row/column, not the first header one.
(function() { ;(function() {
var _scri = 0; var _scri = 0;
@ -127,7 +127,7 @@ window.makeStickyHeaders = function(table)
e.style.height = hs[i]+'px'; e.style.height = hs[i]+'px';
e.style.width = w[0]+'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) addListener(table.parentNode, 'scroll', function(e)
{ {
var l = this.scrollLeft, t = this.scrollTop; 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 */ /* scroll div styles */
.scroller .scroller
{ {
position: relative;
height: 100%;
width: 100%;
}
.scroller > .inner
{
position: absolute;
height: 100%; height: 100%;
width: 100%; width: 100%;
overflow: auto; overflow: auto;
@ -43,6 +51,10 @@ table.grid
border-collapse: separate; border-collapse: separate;
border-spacing: 0; border-spacing: 0;
border-left: 1px solid #ccc; border-left: 1px solid #ccc;
}
table.grid > *:first-child > tr:first-child > *, table.grid > tr:first-child > *
{
border-top: 1px solid #ccc; 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 * Very simple and fast tree grid/table, compatible with dynamic loading and stickyheaders.js
* License: MPL 2.0+, (c) Vitaliy Filippov 2016+ * 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); new TreeGridNode({ children: options.items }, this);
} }
TreeGrid.prototype.initStickyHeaders = function() TreeGrid.prototype.initStickyHeaders = function(options)
{ {
this.sticky = true; this.sticky = true;
this.stickyInit = this.header && this.header.length; this.noStickyResize = options.noWindowResize;
if (this.stickyInit) 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); addListener(window, 'resize', function()
this.table.className += ' stickyheaders'; {
if (self.stickyInit)
fixStickyColumnSizes(self.table);
});
} }
} }
@ -111,11 +124,7 @@ TreeGrid.prototype.setHeader = function(newHeader)
if (this.sticky) if (this.sticky)
{ {
if (!this.stickyInit) if (!this.stickyInit)
{ this._makeStickyHeaders();
makeStickyHeaders(this.table);
this.table.className += ' stickyheaders';
this.stickyInit = true;
}
else else
fixStickyHeader(this.table); fixStickyHeader(this.table);
} }
@ -693,3 +702,5 @@ TreeGridNode.prototype.addChildren = function(nodes, insertBefore)
fixStickyRows(this.grid.table, trs); fixStickyRows(this.grid.table, trs);
return this.children.slice(insertBefore, nodes.length); 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; } th, td { border-width: 0 1px 1px 0 !important; }
table td:nth-child(1) { width: 25%; } table td:nth-child(1) { width: 25%; }
table.stickyheaders td:nth-child(2) { width: 25%; } table.stickyheaders td:nth-child(2) { width: 25%; }
.scroller { width: 100%; height: 400px; overflow: auto; } .scroller { width: 100%; height: 400px; }
</style> </style>
</head> </head>
<body> <body>
<div class="scroller" id="scroller"></div> <div class="scroller"><div class="inner" id="scroller"></div></div>
<script> <script>
<!-- <!--
(function() (function()