2016-02-20 13:31:29 +03:00
|
|
|
<!doctype html>
|
|
|
|
<html>
|
|
|
|
<head>
|
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
|
|
<link rel="stylesheet" type="text/css" href="treegrid.css" />
|
|
|
|
<link rel="stylesheet" type="text/css" href="../tplext/fht/defaultTheme.css">
|
|
|
|
<script type="text/javascript" src="../tplext/jquery-1.11.2.min.js"></script>
|
|
|
|
<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>
|
2016-08-11 15:01:55 +03:00
|
|
|
<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>
|
2016-02-20 13:31:29 +03:00
|
|
|
</head>
|
|
|
|
<body>
|
2016-08-11 15:01:55 +03:00
|
|
|
<div class="scroller" id="scroller"></div>
|
2016-02-20 13:31:29 +03:00
|
|
|
<script>
|
|
|
|
<!--
|
2016-08-11 15:01:55 +03:00
|
|
|
var _scri = 0;
|
2016-08-11 15:43:04 +03:00
|
|
|
// handle non-header row change
|
2016-08-11 15:01:55 +03:00
|
|
|
function fixStickyRow(table, tr)
|
|
|
|
{
|
|
|
|
var e = tr.children[0];
|
|
|
|
if (e.className.indexOf(' _scri'+table._scri) >= 0)
|
|
|
|
{
|
2016-08-11 15:43:04 +03:00
|
|
|
// refix
|
|
|
|
tr.removeChild(tr.children[1]);
|
|
|
|
var d = e.cloneNode(true);
|
|
|
|
d.className = d.className.replace(' _scri'+table._scri, '');
|
|
|
|
d.style.visibility = 'hidden';
|
|
|
|
d.style.width = '';
|
|
|
|
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';
|
2016-08-11 15:01:55 +03:00
|
|
|
// force layouting
|
|
|
|
table.parentNode.scrollTop = table.parentNode.scrollTop;
|
|
|
|
}
|
2016-08-11 15:43:04 +03:00
|
|
|
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)
|
|
|
|
{
|
2016-08-11 15:01:55 +03:00
|
|
|
// check&fix column sizes
|
|
|
|
var changed = false;
|
2016-08-11 15:43:04 +03:00
|
|
|
for (var i = 1; i < table._sizerow.children.length; i++)
|
2016-08-11 15:01:55 +03:00
|
|
|
{
|
|
|
|
var ne = table._sizerow.children[i];
|
|
|
|
var nw = ne.offsetWidth;
|
2016-08-11 15:43:04 +03:00
|
|
|
var cw = table._widths[i-1];
|
2016-08-11 15:01:55 +03:00
|
|
|
if (nw != cw)
|
|
|
|
{
|
2016-08-11 15:43:04 +03:00
|
|
|
table._widths[i-1] = nw;
|
2016-08-11 15:01:55 +03:00
|
|
|
changed = true;
|
2016-08-11 15:43:04 +03:00
|
|
|
if (i == 1)
|
2016-08-11 15:01:55 +03:00
|
|
|
{
|
|
|
|
// resize fixed column
|
|
|
|
for (var j = 0; j < table.rows.length; j++)
|
2016-08-11 15:43:04 +03:00
|
|
|
{
|
2016-08-11 15:01:55 +03:00
|
|
|
if (table.rows[j] != table._sizerow)
|
2016-08-11 15:43:04 +03:00
|
|
|
{
|
2016-08-11 15:01:55 +03:00
|
|
|
table.rows[j].children[0].style.width = nw+'px';
|
2016-08-11 15:43:04 +03:00
|
|
|
table.rows[j].children[0].style.height = (j == 0 ? table._sizerow.offsetHeight : table.rows[j].offsetHeight)+'px';
|
|
|
|
}
|
|
|
|
}
|
2016-08-11 15:01:55 +03:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
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';
|
2016-08-11 15:43:04 +03:00
|
|
|
table.rows[0].children[i].style.height = table._sizerow.children[i].offsetHeight+'px';
|
2016-08-11 15:01:55 +03:00
|
|
|
}
|
|
|
|
}
|
2016-08-11 15:43:04 +03:00
|
|
|
}
|
|
|
|
// handle header row change
|
|
|
|
function fixStickyHeader(table)
|
|
|
|
{
|
|
|
|
var tr = table.rows[0];
|
|
|
|
var sr = table._sizerow;
|
|
|
|
while (sr.children[1])
|
|
|
|
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);
|
2016-08-11 15:01:55 +03:00
|
|
|
}
|
|
|
|
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;
|
2016-08-11 15:43:04 +03:00
|
|
|
var sr = rs[0].cloneNode(true);
|
2016-08-11 15:01:55 +03:00
|
|
|
// только не нужно border-collapse юзать, это ведёт к долгому пиксельхантингу в разных браузерах
|
2016-08-11 15:43:04 +03:00
|
|
|
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';
|
2016-08-11 15:01:55 +03:00
|
|
|
for (var i = 0; i < rs[0].children.length; i++)
|
|
|
|
{
|
|
|
|
var e = rs[0].children[i];
|
|
|
|
w[i] = e.offsetWidth;
|
|
|
|
l[i] = e.offsetLeft;
|
|
|
|
}
|
2016-08-11 15:43:04 +03:00
|
|
|
table._widths = w;
|
2016-08-11 15:01:55 +03:00
|
|
|
table._sizerow = sr;
|
|
|
|
rs[0].style.height = '0';
|
|
|
|
rs[0].style.display = 'block';
|
|
|
|
rs[0].style.position = 'absolute';
|
2016-08-11 15:43:04 +03:00
|
|
|
rs[0].parentNode.insertBefore(sr, rs[0].nextSibling);
|
2016-08-11 15:01:55 +03:00
|
|
|
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];
|
2016-08-11 15:43:04 +03:00
|
|
|
var d = e.cloneNode(true);
|
|
|
|
d.style.visibility = 'hidden';
|
|
|
|
e.parentNode.insertBefore(d, e.nextSibling);
|
2016-08-11 15:01:55 +03:00
|
|
|
if (i != 0)
|
|
|
|
{
|
2016-08-11 15:43:04 +03:00
|
|
|
e.style.height = e.parentNode.offsetHeight+'px';
|
2016-08-11 15:01:55 +03:00
|
|
|
e.style.position = 'absolute';
|
|
|
|
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; }';
|
|
|
|
});
|
|
|
|
}
|
2016-02-24 18:48:09 +03:00
|
|
|
onDomReady(function()
|
2016-02-20 13:31:29 +03:00
|
|
|
{
|
2016-02-24 18:48:09 +03:00
|
|
|
var i = {
|
2016-06-05 01:17:51 +03:00
|
|
|
data: [ 'Payment from Gazprom to Shell 2', '4', '5' ]
|
2016-02-24 18:48:09 +03:00
|
|
|
};
|
2016-06-05 01:17:51 +03:00
|
|
|
var TG = new TreeGrid({ header: [], items: [], renderer: function(node)
|
|
|
|
{
|
|
|
|
var cells = [];
|
|
|
|
for (var i = 0; i < node.data.length; i++)
|
|
|
|
cells[i] = { innerHTML: node.data[i] };
|
|
|
|
return cells;
|
|
|
|
} });
|
2016-02-24 18:48:09 +03:00
|
|
|
TG.table.className = 'grid';
|
2016-08-11 15:01:55 +03:00
|
|
|
document.getElementById('scroller').appendChild(TG.table);
|
2016-03-04 12:27:56 +03:00
|
|
|
setTimeout(function() {
|
2016-08-11 15:01:55 +03:00
|
|
|
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 фев' ]);
|
2016-03-04 12:27:56 +03:00
|
|
|
TG.root.setChildren(false, [ {
|
2016-06-05 01:17:51 +03:00
|
|
|
data: [ 'Payment from Gazprom to Shell', '2', '3' ]
|
2016-08-11 15:01:55 +03:00
|
|
|
}, {
|
|
|
|
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' ]
|
2016-03-04 12:27:56 +03:00
|
|
|
} ]);
|
|
|
|
}, 1000);
|
2016-08-11 15:01:55 +03:00
|
|
|
setTimeout(function() {
|
|
|
|
stickFirst(TG.table);
|
|
|
|
}, 3000);
|
2016-02-24 18:48:09 +03:00
|
|
|
TG.onExpand = function(node)
|
|
|
|
{
|
|
|
|
// Dynamic loading example
|
2016-02-20 13:31:29 +03:00
|
|
|
if (!node.children.length)
|
|
|
|
node.setChildren(false, [ i ]);
|
2016-02-24 18:48:09 +03:00
|
|
|
return true;
|
|
|
|
|
|
|
|
// Another example with delay (emulation of server interaction)
|
|
|
|
setTimeout(function() {
|
|
|
|
if (!node.children.length)
|
|
|
|
node.setChildren(false, [ i ]);
|
|
|
|
node.toggle();
|
|
|
|
}, 100);
|
|
|
|
return false;
|
|
|
|
};
|
|
|
|
|
2016-02-25 12:43:03 +03:00
|
|
|
// Cell editing example
|
2016-03-09 23:52:32 +03:00
|
|
|
TG.initCellEditing();
|
2016-02-25 12:43:03 +03:00
|
|
|
|
|
|
|
// Cell selection by mouse drag example
|
2016-03-10 15:59:57 +03:00
|
|
|
TG.initCellSelection();
|
|
|
|
TG.onCellSelect = function(node, i, td)
|
2016-02-24 18:48:09 +03:00
|
|
|
{
|
2016-03-10 14:46:50 +03:00
|
|
|
return i > 0;
|
2016-03-10 15:59:57 +03:00
|
|
|
};
|
2016-02-20 13:31:29 +03:00
|
|
|
});
|
|
|
|
//-->
|
|
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|