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>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="scroller"><div class="inner" id="innerdiv">
|
|
|
|
|
</div></div>
|
|
|
|
|
<script>
|
|
|
|
|
<!--
|
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 = {
|
|
|
|
|
cells: [ 'Payment from Gazprom to Shell 2', '4', '5' ]
|
|
|
|
|
};
|
2016-03-04 12:27:56 +03:00
|
|
|
var TG = new TreeGrid([], []);
|
2016-02-24 18:48:09 +03:00
|
|
|
TG.table.className = 'grid';
|
2016-03-04 12:27:56 +03:00
|
|
|
document.getElementById('innerdiv').appendChild(TG.table);
|
|
|
|
|
$(TG.table).fixedHeaderTable({});
|
|
|
|
|
setTimeout(function() {
|
|
|
|
|
TG.setHeader([ '', '15 фев', '16 фев', '17 фев', '18 фев', '19 фев', '20 фев', '21 фев' ]);
|
|
|
|
|
TG.root.setChildren(false, [ {
|
|
|
|
|
cells: [ 'Payment from Gazprom to Shell', '2', '3' ]
|
|
|
|
|
} ]);
|
|
|
|
|
$(TG.table).fixedHeaderTable({});
|
|
|
|
|
}, 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
|
|
|
|
|
$(TG.table).dblclick(function(evt)
|
2016-02-24 18:48:09 +03:00
|
|
|
{
|
2016-02-25 12:43:03 +03:00
|
|
|
var td = evt.target;
|
2016-02-24 18:48:09 +03:00
|
|
|
while (td.nodeName != 'TABLE' && td.nodeName != 'TD')
|
|
|
|
|
td = td.parentNode;
|
2016-02-25 12:43:03 +03:00
|
|
|
if (td.nodeName == 'TD' && td.parentNode._node && td.previousSibling && td.className != 'celleditor')
|
|
|
|
|
{
|
|
|
|
|
td.className = 'celleditor';
|
|
|
|
|
td.innerHTML = '<input type="text" value="'+td.innerHTML+'" />';
|
|
|
|
|
$(td.firstChild).on('keydown', function(evt)
|
|
|
|
|
{
|
|
|
|
|
if (evt.keyCode == 13 || evt.keyCode == 10)
|
|
|
|
|
{
|
|
|
|
|
td.innerHTML = td.firstChild.value;
|
|
|
|
|
td.className = '';
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
td.firstChild.focus();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
$(document.body).on('click', function(evt)
|
|
|
|
|
{
|
|
|
|
|
var td = evt.target;
|
|
|
|
|
while (td && td.nodeName != 'TD')
|
|
|
|
|
td = td.parentNode;
|
|
|
|
|
if (td && td.className == 'celleditor')
|
|
|
|
|
return;
|
|
|
|
|
$(TG.table).find('td.celleditor').each(function(e)
|
|
|
|
|
{
|
|
|
|
|
this.innerHTML = this.firstChild.value;
|
|
|
|
|
this.className = '';
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Cell selection by mouse drag example
|
2016-02-24 18:48:09 +03:00
|
|
|
var startDrag, dragDiv;
|
|
|
|
|
$(document.body).on('mousedown', function(evt)
|
|
|
|
|
{
|
|
|
|
|
$(TG.table).find('td.selected').removeClass('selected');
|
2016-02-25 12:43:03 +03:00
|
|
|
if (evt.button != 0)
|
|
|
|
|
return;
|
2016-02-24 18:48:09 +03:00
|
|
|
startDrag = [ evt.pageX, evt.pageY ];
|
|
|
|
|
if (!dragDiv)
|
|
|
|
|
{
|
|
|
|
|
dragDiv = document.createElement('div');
|
|
|
|
|
dragDiv.className = 'selection-rect';
|
|
|
|
|
document.body.appendChild(dragDiv);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
$(document.body).on('mousemove', function(evt)
|
|
|
|
|
{
|
|
|
|
|
if (startDrag)
|
|
|
|
|
{
|
2016-02-25 12:43:03 +03:00
|
|
|
dragDiv.style.display = 'block';
|
2016-02-24 18:48:09 +03:00
|
|
|
if (startDrag[0] < evt.pageX)
|
|
|
|
|
{
|
|
|
|
|
dragDiv.style.left = startDrag[0]+'px';
|
|
|
|
|
dragDiv.style.width = (evt.pageX-startDrag[0])+'px';
|
|
|
|
|
}
|
|
|
|
|
else
|
|
|
|
|
{
|
|
|
|
|
dragDiv.style.left = evt.pageX+'px';
|
|
|
|
|
dragDiv.style.width = (startDrag[0]-evt.pageX)+'px';
|
|
|
|
|
}
|
|
|
|
|
if (startDrag[1] < evt.pageY)
|
|
|
|
|
{
|
|
|
|
|
dragDiv.style.top = startDrag[1]+'px';
|
|
|
|
|
dragDiv.style.height = (evt.pageY-startDrag[1])+'px';
|
|
|
|
|
}
|
|
|
|
|
else
|
|
|
|
|
{
|
|
|
|
|
dragDiv.style.top = evt.pageY+'px';
|
|
|
|
|
dragDiv.style.height = (startDrag[1]-evt.pageY)+'px';
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
$(document.body).on('mouseup', function(evt)
|
|
|
|
|
{
|
|
|
|
|
if (startDrag)
|
|
|
|
|
{
|
|
|
|
|
dragDiv.style.display = 'none';
|
|
|
|
|
var x1 = startDrag[0], y1 = startDrag[1], x2 = evt.pageX, y2 = evt.pageY;
|
|
|
|
|
if (x2 < x1)
|
|
|
|
|
{
|
|
|
|
|
var t = x2;
|
|
|
|
|
x2 = x1;
|
|
|
|
|
x1 = t;
|
|
|
|
|
}
|
|
|
|
|
if (y2 < y1)
|
|
|
|
|
{
|
|
|
|
|
var t = y2;
|
|
|
|
|
y2 = y1;
|
|
|
|
|
y1 = t;
|
|
|
|
|
}
|
|
|
|
|
startDrag = null;
|
2016-02-25 12:43:03 +03:00
|
|
|
if (x2 > x1+10 && y2 > y1+10)
|
|
|
|
|
{
|
|
|
|
|
$(rectangleSelect($(TG.table).find('td + td'), x1, y1, x2, y2)).addClass('selected');
|
|
|
|
|
return false;
|
|
|
|
|
}
|
2016-02-24 18:48:09 +03:00
|
|
|
}
|
|
|
|
|
});
|
2016-02-20 13:31:29 +03:00
|
|
|
});
|
2016-02-24 18:48:09 +03:00
|
|
|
|
|
|
|
|
function rectangleSelect(selector, x1, y1, x2, y2)
|
|
|
|
|
{
|
|
|
|
|
var elements = [];
|
|
|
|
|
$(selector).each(function()
|
|
|
|
|
{
|
|
|
|
|
var $this = $(this);
|
|
|
|
|
var offset = $this.offset();
|
|
|
|
|
var x = offset.left;
|
|
|
|
|
var y = offset.top;
|
|
|
|
|
var w = $this.width();
|
|
|
|
|
var h = $this.height();
|
|
|
|
|
if (x+w >= x1 && y+h >= y1 && x <= x2 && y <= y2)
|
|
|
|
|
{
|
|
|
|
|
elements.push($this.get(0));
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
return elements;
|
|
|
|
|
}
|
2016-02-20 13:31:29 +03:00
|
|
|
//-->
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
