Rectangle cell selection example
parent
2e2ae80aa1
commit
b055971c1b
14
treegrid.css
14
treegrid.css
|
@ -25,15 +25,27 @@ table { border-collapse: collapse; }
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* selection rectangle */
|
||||||
|
.selection-rect
|
||||||
|
{
|
||||||
|
position: absolute;
|
||||||
|
border: 1px solid #003f6e;
|
||||||
|
background: #0097ff;
|
||||||
|
opacity: 0.1;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
/* fixed header table styles */
|
/* fixed header table styles */
|
||||||
table.grid tbody tr:hover, table.grid tbody tr:hover td
|
table.grid tbody tr:hover, table.grid tbody tr:hover td
|
||||||
{
|
{
|
||||||
background-color: #e2eff8;
|
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;
|
background-color: #c1ddf1;
|
||||||
|
box-shadow: inset 0 0 0 1px #3d91cf;
|
||||||
}
|
}
|
||||||
|
|
||||||
table.grid thead th
|
table.grid thead th
|
||||||
|
|
|
@ -83,7 +83,7 @@ function TreeGridNode(node, grid, level, insertBefore, startHidden)
|
||||||
this.tr = document.createElement('tr');
|
this.tr = document.createElement('tr');
|
||||||
if (startHidden)
|
if (startHidden)
|
||||||
this.tr.style.display = 'none';
|
this.tr.style.display = 'none';
|
||||||
this.tr._level = this.level;
|
this.tr._node = this;
|
||||||
for (var i = 0; i < this.grid.header.length; i++)
|
for (var i = 0; i < this.grid.header.length; i++)
|
||||||
{
|
{
|
||||||
var td = document.createElement('td');
|
var td = document.createElement('td');
|
||||||
|
@ -137,7 +137,7 @@ TreeGridNode.prototype.toggle = function()
|
||||||
{
|
{
|
||||||
// collapse all children
|
// collapse all children
|
||||||
var c = this.tr.nextSibling;
|
var c = this.tr.nextSibling;
|
||||||
while (c && c._level > this.level)
|
while (c && c._node.level > this.level)
|
||||||
{
|
{
|
||||||
c.style.display = 'none';
|
c.style.display = 'none';
|
||||||
c = c.nextSibling;
|
c = c.nextSibling;
|
||||||
|
@ -162,7 +162,7 @@ TreeGridNode.prototype.setChildren = function(isLeaf, newChildren)
|
||||||
if (!this.tr)
|
if (!this.tr)
|
||||||
this.grid.tbody.innerHTML = '';
|
this.grid.tbody.innerHTML = '';
|
||||||
else
|
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.grid.tbody.removeChild(this.tr.nextSibling);
|
||||||
this.leaf = isLeaf;
|
this.leaf = isLeaf;
|
||||||
if (this.leaf)
|
if (this.leaf)
|
||||||
|
|
140
treegridtest.htm
140
treegridtest.htm
|
@ -14,32 +14,128 @@
|
||||||
</div></div>
|
</div></div>
|
||||||
<script>
|
<script>
|
||||||
<!--
|
<!--
|
||||||
onDomReady(function() {
|
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)
|
|
||||||
{
|
{
|
||||||
// Dynamic loading example
|
var i = {
|
||||||
if (!node.children.length)
|
cells: [ 'Payment from Gazprom to Shell 2', '4', '5' ]
|
||||||
node.setChildren(false, [ i ]);
|
};
|
||||||
return true;
|
var TG = new TreeGrid([ {
|
||||||
|
cells: [ 'Payment from Gazprom to Shell', '2', '3' ]
|
||||||
// Another example with delay (emulation of server interaction)
|
} ], [ '', '15 фев', '16 фев', '17 фев', '18 фев', '19 фев', '20 фев', '21 фев' ]);
|
||||||
setTimeout(function() {
|
TG.table.className = 'grid';
|
||||||
|
TG.onExpand = function(node)
|
||||||
|
{
|
||||||
|
// Dynamic loading example
|
||||||
if (!node.children.length)
|
if (!node.children.length)
|
||||||
node.setChildren(false, [ i ]);
|
node.setChildren(false, [ i ]);
|
||||||
node.toggle();
|
return true;
|
||||||
}, 100);
|
|
||||||
return false;
|
// Another example with delay (emulation of server interaction)
|
||||||
};
|
setTimeout(function() {
|
||||||
document.getElementById('innerdiv').appendChild(TG.table);
|
if (!node.children.length)
|
||||||
$(TG.table).fixedHeaderTable({});
|
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>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
Loading…
Reference in New Issue