Some fixes and it's mostly working
parent
5bae69d153
commit
3c02d4e2dd
117
treegridtest.htm
117
treegridtest.htm
|
@ -20,38 +20,68 @@ th, td { border-width: 0 1px 1px 0 !important; }
|
||||||
<script>
|
<script>
|
||||||
<!--
|
<!--
|
||||||
var _scri = 0;
|
var _scri = 0;
|
||||||
|
// handle non-header row change
|
||||||
function fixStickyRow(table, tr)
|
function fixStickyRow(table, tr)
|
||||||
{
|
{
|
||||||
var e = tr.children[0];
|
var e = tr.children[0];
|
||||||
if (e.className.indexOf(' _scri'+table._scri) >= 0)
|
if (e.className.indexOf(' _scri'+table._scri) >= 0)
|
||||||
{
|
{
|
||||||
// unfix sticky
|
// refix
|
||||||
tr.style.height = '';
|
tr.removeChild(tr.children[1]);
|
||||||
e.style.width = '';
|
var d = e.cloneNode(true);
|
||||||
e.style.height = '';
|
d.className = d.className.replace(' _scri'+table._scri, '');
|
||||||
e.style.position = '';
|
d.style.visibility = 'hidden';
|
||||||
e.style.display = '';
|
d.style.width = '';
|
||||||
e.className = e.className.replace(' _scri'+table._scri, '');
|
d.style.height = '';
|
||||||
|
d.style.position = '';
|
||||||
|
d.style.display = '';
|
||||||
|
d.style.zIndex = '';
|
||||||
|
e.parentNode.insertBefore(d, e.nextSibling);
|
||||||
|
// fix size
|
||||||
|
e.style.height = tr.offsetHeight+'px';
|
||||||
|
e.style.width = d.offsetWidth+'px';
|
||||||
// force layouting
|
// force layouting
|
||||||
table.parentNode.scrollTop = table.parentNode.scrollTop;
|
table.parentNode.scrollTop = table.parentNode.scrollTop;
|
||||||
}
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
// fix new
|
||||||
|
var d = e.cloneNode(true);
|
||||||
|
d.style.visibility = 'hidden';
|
||||||
|
e.parentNode.insertBefore(d, e.nextSibling);
|
||||||
|
e.style.height = e.parentNode.offsetHeight+'px';
|
||||||
|
e.style.width = e.offsetWidth+'px';
|
||||||
|
e.style.position = 'absolute';
|
||||||
|
e.style.display = 'block';
|
||||||
|
e.style.zIndex = '1';
|
||||||
|
e.className += ' _scri'+table._scri;
|
||||||
|
}
|
||||||
|
fixStickyColumnSizes(table);
|
||||||
|
}
|
||||||
|
function fixStickyColumnSizes(table)
|
||||||
|
{
|
||||||
// check&fix column sizes
|
// check&fix column sizes
|
||||||
var changed = false;
|
var changed = false;
|
||||||
for (var i = 0; i < table._sizerow.children.length; i++)
|
for (var i = 1; i < table._sizerow.children.length; i++)
|
||||||
{
|
{
|
||||||
var ne = table._sizerow.children[i];
|
var ne = table._sizerow.children[i];
|
||||||
var nw = ne.offsetWidth;
|
var nw = ne.offsetWidth;
|
||||||
var cw = 1+ne.firstChild.style.width.replace('px', '');
|
var cw = table._widths[i-1];
|
||||||
if (nw != cw)
|
if (nw != cw)
|
||||||
{
|
{
|
||||||
ne.firstChild.style.width = (nw-1)+'px';
|
table._widths[i-1] = nw;
|
||||||
changed = true;
|
changed = true;
|
||||||
if (i == 0)
|
if (i == 1)
|
||||||
{
|
{
|
||||||
// resize fixed column
|
// resize fixed column
|
||||||
for (var j = 0; j < table.rows.length; j++)
|
for (var j = 0; j < table.rows.length; j++)
|
||||||
|
{
|
||||||
if (table.rows[j] != table._sizerow)
|
if (table.rows[j] != table._sizerow)
|
||||||
|
{
|
||||||
table.rows[j].children[0].style.width = nw+'px';
|
table.rows[j].children[0].style.width = nw+'px';
|
||||||
|
table.rows[j].children[0].style.height = (j == 0 ? table._sizerow.offsetHeight : table.rows[j].offsetHeight)+'px';
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -62,17 +92,35 @@ function fixStickyRow(table, tr)
|
||||||
{
|
{
|
||||||
table.rows[0].children[i].style.left = table._sizerow.children[i].offsetLeft+'px';
|
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';
|
table.rows[0].children[i].style.width = table._sizerow.children[i].offsetWidth+'px';
|
||||||
|
table.rows[0].children[i].style.height = table._sizerow.children[i].offsetHeight+'px';
|
||||||
}
|
}
|
||||||
// FIXME проблема: когда колонки увеличиваются, высота части строк может уменьшиться. как это поймать?
|
|
||||||
}
|
}
|
||||||
// fix sticky again
|
}
|
||||||
tr.style.height = tr.offsetHeight+'px';
|
// handle header row change
|
||||||
e.style.width = e.offsetWidth+'px';
|
function fixStickyHeader(table)
|
||||||
e.style.position = 'absolute';
|
{
|
||||||
e.style.height = tr.style.height;
|
var tr = table.rows[0];
|
||||||
e.style.display = 'block';
|
var sr = table._sizerow;
|
||||||
e.style.zIndex = '1';
|
while (sr.children[1])
|
||||||
e.className += ' _scri'+table._scri;
|
sr.removeChild(sr.children[1]);
|
||||||
|
for (var i = 0; i < tr.children.length; i++)
|
||||||
|
{
|
||||||
|
if (i == 1)
|
||||||
|
continue;
|
||||||
|
var e = tr.children[i].cloneNode(true);
|
||||||
|
if (i == 0)
|
||||||
|
e.className = e.className.replace(' _scri'+table._scri, '');
|
||||||
|
e.style.position = '';
|
||||||
|
e.style.width = '';
|
||||||
|
e.style.height = '';
|
||||||
|
e.style.left = '';
|
||||||
|
e.style.display = '';
|
||||||
|
e.style.zIndex = '';
|
||||||
|
sr.appendChild(e);
|
||||||
|
}
|
||||||
|
// force layouting
|
||||||
|
table.parentNode.scrollTop = table.parentNode.scrollTop;
|
||||||
|
fixStickyColumnSizes(table);
|
||||||
}
|
}
|
||||||
function stickFirst(table)
|
function stickFirst(table)
|
||||||
{
|
{
|
||||||
|
@ -84,32 +132,25 @@ function stickFirst(table)
|
||||||
}
|
}
|
||||||
var rs = table.rows;
|
var rs = table.rows;
|
||||||
var w = [], l = [], h = rs[0].offsetHeight;
|
var w = [], l = [], h = rs[0].offsetHeight;
|
||||||
var sr = document.createElement('tr');
|
var sr = rs[0].cloneNode(true);
|
||||||
// только не нужно border-collapse юзать, это ведёт к долгому пиксельхантингу в разных браузерах
|
// только не нужно border-collapse юзать, это ведёт к долгому пиксельхантингу в разных браузерах
|
||||||
// ещё нужно методы, решающие 3 следующие задачи:
|
sr.insertBefore(document.createElement('td'), sr.firstChild);
|
||||||
// - прилепить вновь добавленную строку + колонки могли стать шире
|
sr.children[0].style.width = '0';
|
||||||
// - обработать изменение заголовка: колонки могли стать шире/уже, могли добавиться/удалиться
|
sr.children[0].style.display = 'block';
|
||||||
// - обработать изменение строки: могла стать толще/тоньше, колонки могли стать шире
|
sr.children[0].style.position = 'absolute';
|
||||||
|
sr.children[0].style.padding = '0';
|
||||||
for (var i = 0; i < rs[0].children.length; i++)
|
for (var i = 0; i < rs[0].children.length; i++)
|
||||||
{
|
{
|
||||||
var e = rs[0].children[i];
|
var e = rs[0].children[i];
|
||||||
w[i] = e.offsetWidth;
|
w[i] = e.offsetWidth;
|
||||||
l[i] = e.offsetLeft;
|
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';
|
table._widths = w;
|
||||||
rs[0].parentNode.insertBefore(sr, rs[0].nextSibling);
|
|
||||||
table._sizerow = sr;
|
table._sizerow = sr;
|
||||||
rs[0].style.height = '0';
|
rs[0].style.height = '0';
|
||||||
rs[0].style.display = 'block';
|
rs[0].style.display = 'block';
|
||||||
rs[0].style.position = 'absolute';
|
rs[0].style.position = 'absolute';
|
||||||
|
rs[0].parentNode.insertBefore(sr, rs[0].nextSibling);
|
||||||
for (var i = 0; i < rs[0].children.length; i++)
|
for (var i = 0; i < rs[0].children.length; i++)
|
||||||
{
|
{
|
||||||
var e = rs[0].children[i];
|
var e = rs[0].children[i];
|
||||||
|
@ -125,11 +166,13 @@ function stickFirst(table)
|
||||||
if (rs[i] == sr)
|
if (rs[i] == sr)
|
||||||
continue;
|
continue;
|
||||||
var e = rs[i].children[0];
|
var e = rs[i].children[0];
|
||||||
e.parentNode.style.height = e.parentNode.offsetHeight+'px';
|
var d = e.cloneNode(true);
|
||||||
|
d.style.visibility = 'hidden';
|
||||||
|
e.parentNode.insertBefore(d, e.nextSibling);
|
||||||
if (i != 0)
|
if (i != 0)
|
||||||
{
|
{
|
||||||
|
e.style.height = e.parentNode.offsetHeight+'px';
|
||||||
e.style.position = 'absolute';
|
e.style.position = 'absolute';
|
||||||
e.style.height = e.parentNode.style.height;
|
|
||||||
e.style.display = 'block';
|
e.style.display = 'block';
|
||||||
e.style.width = w[0]+'px';
|
e.style.width = w[0]+'px';
|
||||||
e.style.zIndex = '1';
|
e.style.zIndex = '1';
|
||||||
|
|
Loading…
Reference in New Issue