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" />
|
|
|
|
<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; }
|
|
|
|
</style>
|
2016-02-20 13:31:29 +03:00
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<script>
|
|
|
|
<!--
|
2016-08-14 14:49:15 +03:00
|
|
|
(function()
|
2016-02-20 13:31:29 +03:00
|
|
|
{
|
2017-06-25 16:19:41 +03:00
|
|
|
var items = [];
|
|
|
|
for (var i = 0; i < 1000; i++)
|
|
|
|
{
|
|
|
|
items[i] = {
|
|
|
|
data: [ 'Payment from Gazprom to Shell '+i, (Math.random()+'').substr(0, 6), '', (Math.random()+'').substr(0, 6) ],
|
|
|
|
collapsed: true,
|
|
|
|
children: []
|
|
|
|
};
|
|
|
|
for (var j = 0; j < 5; j++)
|
|
|
|
{
|
|
|
|
items[i].children[j] = {
|
|
|
|
data: [ 'Subpayment '+i+' / '+j, 231, 231 ],
|
|
|
|
leaf: true
|
|
|
|
};
|
|
|
|
}
|
|
|
|
}
|
|
|
|
//var TG = window.TG = new TreeGrid({ header: [], items: [], bind: { rowSpan: true }, stickyHeaders: true, stickyColumnWidth: '200px', renderer: function(node)
|
|
|
|
var TG = window.TG = new TreeGrid({ header: [
|
|
|
|
'', '15 фев', '16 фев', '17 фев', '18 фев'
|
|
|
|
], items: items, bind: { rowSpan: true }, stickyHeaders: true, stickyColumnWidth: '200px', renderer: function(node)
|
2016-06-05 01:17:51 +03:00
|
|
|
{
|
|
|
|
var cells = [];
|
|
|
|
for (var i = 0; i < node.data.length; i++)
|
|
|
|
cells[i] = { innerHTML: node.data[i] };
|
2016-10-07 18:11:29 +03:00
|
|
|
if (node.tr.length == 2)
|
|
|
|
{
|
|
|
|
cells = [ cells.slice(0), cells.slice(0) ];
|
2017-01-24 13:57:10 +03:00
|
|
|
// cells[0][0].rowSpan = 2;
|
|
|
|
// cells[1][0] = { style: 'display: none' };
|
2016-10-07 18:11:29 +03:00
|
|
|
}
|
2016-06-05 01:17:51 +03:00
|
|
|
return cells;
|
|
|
|
} });
|
2017-07-06 01:40:45 +03:00
|
|
|
document.body.appendChild(TG.wrapper||TG.table);
|
2017-06-25 16:19:41 +03:00
|
|
|
TG.syncView();
|
|
|
|
/*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, [ {
|
2017-06-25 16:19:41 +03:00
|
|
|
data: [ 'Payment from Gazprom to Shell', '2', '3' ],
|
|
|
|
children: [ {
|
|
|
|
data: [ 'Payment from Gazprom to Shell', '2', '3' ],
|
|
|
|
}, {
|
|
|
|
data: [ 'Payment from Gazprom to Shell', '2', '31203' ],
|
|
|
|
rows: 2
|
|
|
|
}, {
|
|
|
|
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-08-11 15:01:55 +03:00
|
|
|
}, {
|
2016-10-07 18:11:29 +03:00
|
|
|
data: [ 'Payment from Gazprom to Shell', '2', '31203' ],
|
|
|
|
rows: 2
|
2016-08-11 15:01:55 +03:00
|
|
|
}, {
|
|
|
|
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-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-12-06 15:40:12 +03:00
|
|
|
TG.initCellSelection(true);
|
2016-03-10 15:59:57 +03:00
|
|
|
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;
|
2017-06-25 16:19:41 +03:00
|
|
|
};*/
|
2016-08-14 14:49:15 +03:00
|
|
|
})();
|
2016-02-20 13:31:29 +03:00
|
|
|
//-->
|
|
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|