Alternative approach to fixed header and column
parent
50c1482a7f
commit
5bae69d153
155
treegridtest.htm
155
treegridtest.htm
|
|
@ -8,12 +8,146 @@
|
|||
<script type="text/javascript" src="../tplext/fht/jquery.fixedheadertable.js"></script>
|
||||
<script type="text/javascript" src="util.js"></script>
|
||||
<script type="text/javascript" src="treegrid.js"></script>
|
||||
<style>
|
||||
table, tr, td, th { box-sizing: border-box; background: white; }
|
||||
table { border-collapse: separate; border-spacing: 0px; }
|
||||
th, td { border-width: 0 1px 1px 0 !important; }
|
||||
.scroller { width: 500px; height: 400px; overflow: auto; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="scroller"><div class="inner" id="innerdiv">
|
||||
</div></div>
|
||||
<div class="scroller" id="scroller"></div>
|
||||
<script>
|
||||
<!--
|
||||
var _scri = 0;
|
||||
function fixStickyRow(table, tr)
|
||||
{
|
||||
var e = tr.children[0];
|
||||
if (e.className.indexOf(' _scri'+table._scri) >= 0)
|
||||
{
|
||||
// unfix sticky
|
||||
tr.style.height = '';
|
||||
e.style.width = '';
|
||||
e.style.height = '';
|
||||
e.style.position = '';
|
||||
e.style.display = '';
|
||||
e.className = e.className.replace(' _scri'+table._scri, '');
|
||||
// force layouting
|
||||
table.parentNode.scrollTop = table.parentNode.scrollTop;
|
||||
}
|
||||
// check&fix column sizes
|
||||
var changed = false;
|
||||
for (var i = 0; i < table._sizerow.children.length; i++)
|
||||
{
|
||||
var ne = table._sizerow.children[i];
|
||||
var nw = ne.offsetWidth;
|
||||
var cw = 1+ne.firstChild.style.width.replace('px', '');
|
||||
if (nw != cw)
|
||||
{
|
||||
ne.firstChild.style.width = (nw-1)+'px';
|
||||
changed = true;
|
||||
if (i == 0)
|
||||
{
|
||||
// resize fixed column
|
||||
for (var j = 0; j < table.rows.length; j++)
|
||||
if (table.rows[j] != table._sizerow)
|
||||
table.rows[j].children[0].style.width = nw+'px';
|
||||
}
|
||||
}
|
||||
}
|
||||
if (changed)
|
||||
{
|
||||
// reposition fixed header
|
||||
for (var i = 1; i < table._sizerow.children.length; i++)
|
||||
{
|
||||
table.rows[0].children[i].style.left = table._sizerow.children[i].offsetLeft+'px';
|
||||
table.rows[0].children[i].style.width = table._sizerow.children[i].offsetWidth+'px';
|
||||
}
|
||||
// FIXME проблема: когда колонки увеличиваются, высота части строк может уменьшиться. как это поймать?
|
||||
}
|
||||
// fix sticky again
|
||||
tr.style.height = tr.offsetHeight+'px';
|
||||
e.style.width = e.offsetWidth+'px';
|
||||
e.style.position = 'absolute';
|
||||
e.style.height = tr.style.height;
|
||||
e.style.display = 'block';
|
||||
e.style.zIndex = '1';
|
||||
e.className += ' _scri'+table._scri;
|
||||
}
|
||||
function stickFirst(table)
|
||||
{
|
||||
if (!table._scrstyle)
|
||||
{
|
||||
table._scrstyle = document.createElement('style');
|
||||
(document.head||document.getElementsByTagName('head')[0]).appendChild(table._scrstyle);
|
||||
table._scri = _scri++;
|
||||
}
|
||||
var rs = table.rows;
|
||||
var w = [], l = [], h = rs[0].offsetHeight;
|
||||
var sr = document.createElement('tr');
|
||||
// только не нужно border-collapse юзать, это ведёт к долгому пиксельхантингу в разных браузерах
|
||||
// ещё нужно методы, решающие 3 следующие задачи:
|
||||
// - прилепить вновь добавленную строку + колонки могли стать шире
|
||||
// - обработать изменение заголовка: колонки могли стать шире/уже, могли добавиться/удалиться
|
||||
// - обработать изменение строки: могла стать толще/тоньше, колонки могли стать шире
|
||||
for (var i = 0; i < rs[0].children.length; i++)
|
||||
{
|
||||
var e = rs[0].children[i];
|
||||
w[i] = e.offsetWidth;
|
||||
l[i] = e.offsetLeft;
|
||||
var s = document.createElement('td');
|
||||
s.style.padding = '0';
|
||||
s.style.whiteSpace = 'nowrap';
|
||||
var d = document.createElement('div');
|
||||
d.style.width = (w[i]-1)+'px';
|
||||
d.style.height = '1px';
|
||||
s.appendChild(d);
|
||||
sr.appendChild(s);
|
||||
}
|
||||
sr.style.height = h+'px';
|
||||
rs[0].parentNode.insertBefore(sr, rs[0].nextSibling);
|
||||
table._sizerow = sr;
|
||||
rs[0].style.height = '0';
|
||||
rs[0].style.display = 'block';
|
||||
rs[0].style.position = 'absolute';
|
||||
for (var i = 0; i < rs[0].children.length; i++)
|
||||
{
|
||||
var e = rs[0].children[i];
|
||||
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';
|
||||
}
|
||||
for (var i = rs.length-1; i >= 0; i--)
|
||||
{
|
||||
if (rs[i] == sr)
|
||||
continue;
|
||||
var e = rs[i].children[0];
|
||||
e.parentNode.style.height = e.parentNode.offsetHeight+'px';
|
||||
if (i != 0)
|
||||
{
|
||||
e.style.position = 'absolute';
|
||||
e.style.height = e.parentNode.style.height;
|
||||
e.style.display = 'block';
|
||||
e.style.width = w[0]+'px';
|
||||
e.style.zIndex = '1';
|
||||
}
|
||||
else
|
||||
{
|
||||
e.style.left = '';
|
||||
e.style.zIndex = '2';
|
||||
}
|
||||
e.className += ' _scri'+table._scri;
|
||||
}
|
||||
table.parentNode.addEventListener('scroll', function(e)
|
||||
{
|
||||
var l = this.scrollLeft, t = this.scrollTop;
|
||||
rs[0].style.top = t+'px';
|
||||
table._scrstyle.innerHTML = '._scri'+table._scri+' { left: '+l+'px; }';
|
||||
});
|
||||
}
|
||||
onDomReady(function()
|
||||
{
|
||||
var i = {
|
||||
|
|
@ -27,15 +161,24 @@ onDomReady(function()
|
|||
return cells;
|
||||
} });
|
||||
TG.table.className = 'grid';
|
||||
document.getElementById('innerdiv').appendChild(TG.table);
|
||||
$(TG.table).fixedHeaderTable({});
|
||||
document.getElementById('scroller').appendChild(TG.table);
|
||||
setTimeout(function() {
|
||||
TG.setHeader([ '', '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 фев' ]);
|
||||
TG.root.setChildren(false, [ {
|
||||
data: [ 'Payment from Gazprom to Shell', '2', '3' ]
|
||||
}, {
|
||||
data: [ 'Payment from Gazprom to Shell', '2', '31203' ]
|
||||
}, {
|
||||
data: [ 'Payment from Gazprom to Shell', '2', '329x<br>2' ]
|
||||
}, {
|
||||
data: [ 'Payment from Gazprom to Shell', '2', '239000' ]
|
||||
}, {
|
||||
data: [ 'Payment from Gazprom to Shell', '2', 'aaaaa' ]
|
||||
} ]);
|
||||
$(TG.table).fixedHeaderTable({});
|
||||
}, 1000);
|
||||
setTimeout(function() {
|
||||
stickFirst(TG.table);
|
||||
}, 3000);
|
||||
TG.onExpand = function(node)
|
||||
{
|
||||
// Dynamic loading example
|
||||
|
|
|
|||
Loading…
Reference in New Issue