vitalif-js
/
treegrid
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Rectangle cell selection example

rel-1.0
Vitaliy Filippov 2016-02-24 18:48:09 +03:00
parent 2e2ae80aa1
commit b055971c1b
3 changed files with 134 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
treegrid.css
View File

@ -25,15 +25,27 @@ table { border-collapse: collapse; }
bottom: 0;
}
/* selection rectangle */
.selection-rect
{
position: absolute;
border: 1px solid #003f6e;
background: #0097ff;
opacity: 0.1;
display: none;
}
/* fixed header table styles */
table.grid tbody tr:hover, table.grid tbody tr:hover td
{
background-color: #e2eff8;
}
table.grid tr.selected
table.grid tr.selected, table.grid td.selected, table.grid tr.selected:hover,
table.grid tr.selected:hover td, table.grid tr:hover td.selected
{
background-color: #c1ddf1;
box-shadow: inset 0 0 0 1px #3d91cf;
}
table.grid thead th

6
treegrid.js
View File

@ -83,7 +83,7 @@ function TreeGridNode(node, grid, level, insertBefore, startHidden)
this.tr = document.createElement('tr');
if (startHidden)
this.tr.style.display = 'none';
this.tr._level = this.level;
this.tr._node = this;
for (var i = 0; i < this.grid.header.length; i++)
{
var td = document.createElement('td');
@ -137,7 +137,7 @@ TreeGridNode.prototype.toggle = function()
{
// collapse all children
var c = this.tr.nextSibling;
while (c && c._level > this.level)
while (c && c._node.level > this.level)
{
c.style.display = 'none';
c = c.nextSibling;
@ -162,7 +162,7 @@ TreeGridNode.prototype.setChildren = function(isLeaf, newChildren)
if (!this.tr)
this.grid.tbody.innerHTML = '';
else
while (this.tr.nextSibling && this.tr.nextSibling._level > this.level)
while (this.tr.nextSibling && this.tr.nextSibling._node.level > this.level)
this.grid.tbody.removeChild(this.tr.nextSibling);
this.leaf = isLeaf;
if (this.leaf)

140
treegridtest.htm
View File

@ -14,32 +14,128 @@
</div></div>
<script>
<!--
onDomReady(function() {
var i = {
cells: [ 'Payment from Gazprom to Shell 2', '4', '5' ]
};
var TG = new TreeGrid([ {
cells: [ 'Payment from Gazprom to Shell', '2', '3' ]
} ], [ '', '15 фев', '16 фев', '17 фев', '18 фев', '19 фев', '20 фев', '21 фев' ]);
TG.table.className = 'grid';
TG.onExpand = function(node)
onDomReady(function()
{
// Dynamic loading example
if (!node.children.length)
node.setChildren(false, [ i ]);
return true;
// Another example with delay (emulation of server interaction)
setTimeout(function() {
var i = {
cells: [ 'Payment from Gazprom to Shell 2', '4', '5' ]
};
var TG = new TreeGrid([ {
cells: [ 'Payment from Gazprom to Shell', '2', '3' ]
} ], [ '', '15 фев', '16 фев', '17 фев', '18 фев', '19 фев', '20 фев', '21 фев' ]);
TG.table.className = 'grid';
TG.onExpand = function(node)
{
// Dynamic loading example
if (!node.children.length)
node.setChildren(false, [ i ]);
node.toggle();
}, 100);
return false;
};
document.getElementById('innerdiv').appendChild(TG.table);
$(TG.table).fixedHeaderTable({});
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;
};
document.getElementById('innerdiv').appendChild(TG.table);
$(TG.table).fixedHeaderTable({});
// Cell selection example
/* addListener(TG.table, 'click', function(ev)
{
var td = ev.target || ev.srcElement;
while (td.nodeName != 'TABLE' && td.nodeName != 'TD')
td = td.parentNode;
if (td.nodeName == 'TD' && td.parentNode._node && td.previousSibling)
td.className = td.className == 'selected' ? '' : 'selected';
});*/
var startDrag, dragDiv;
$(document.body).on('mousedown', function(evt)
{
$(TG.table).find('td.selected').removeClass('selected');
startDrag = [ evt.pageX, evt.pageY ];
if (!dragDiv)
{
dragDiv = document.createElement('div');
dragDiv.className = 'selection-rect';
document.body.appendChild(dragDiv);
}
dragDiv.style.display = 'block';
dragDiv.style.left = evt.pageX+'px';
dragDiv.style.top = evt.pageY+'px';
dragDiv.style.width = '0px';
dragDiv.style.height = '0px';
return false;
});
$(document.body).on('mousemove', function(evt)
{
if (startDrag)
{
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;
}
$(rectangleSelect($(TG.table).find('td + td'), x1, y1, x2, y2)).addClass('selected');
startDrag = null;
}
});
});
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;
}
//-->
</script>
</body>