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

move cell selection code into treegrid.js

rel-1.0
Vitaliy Filippov 2016-03-10 14:46:50 +03:00
parent 82faff6702
commit 96855a05f7
2 changed files with 107 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
treegrid.js
View File

@ -1,7 +1,7 @@
/**
* Very simple and fast tree grid/table, compatible with dynamic loading and jQuery fixedHeaderTable
* License: MPL 2.0+, (c) Vitaliy Filippov 2016+
* Version: 2016-03-09
* Version: 2016-03-10
*/
/**
@ -147,6 +147,110 @@ TreeGrid.prototype.stopCellEditing = function(td, _int)
}
}
// Simple cell selection
TreeGrid.prototype.initCellSelection = function(onSelect, onDeselect)
{
this.onCellSelect = onSelect;
this.onCellDeselect = onDeselect;
var startDrag, dragDiv;
var self = this;
addListener(document.body, 'mousedown', function(evt)
{
var els = self.table.querySelectorAll('td.selected');
for (var i = 0; i < els.length; i++)
{
self.onCellDeselect && self.onCellDeselect(els[i].parentNode._node, self.getNodeIndex(els[i]), els[i]);
els[i].className = els[i].className.replace(' selected', '');
}
evt = getEventCoord(evt);
if (evt.which != 1)
return;
startDrag = [ evt.pageX, evt.pageY ];
if (!dragDiv)
{
dragDiv = document.createElement('div');
dragDiv.className = 'selection-rect';
document.body.appendChild(dragDiv);
}
});
addListener(document.body, 'mousemove', function(evt)
{
if (startDrag)
{
evt = getEventCoord(evt);
dragDiv.style.display = 'block';
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';
}
}
});
addListener(document.body, 'mouseup', function(evt)
{
if (startDrag)
{
evt = getEventCoord(evt);
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;
if (x2 > x1+10 && y2 > y1+10)
{
rectangleSelect(self.table.getElementsByTagName('td'), x1, y1, x2, y2, function()
{
var i = self.getNodeIndex(this);
if (!self.onCellSelect || self.onCellSelect(td.parentNode._node, i, this))
this.className += ' selected';
});
return false;
}
}
});
function rectangleSelect(elements, x1, y1, x2, y2, cb)
{
for (var i = 0; i < elements.length; i++)
{
var offset = getOffset(elements[i]);
var w = elements[i].offsetWidth;
var h = elements[i].offsetHeight;
if (offset.left+w >= x1 && offset.top+h >= y1 && offset.left <= x2 && offset.top <= y2)
cb.apply(elements[i]);
}
}
}
// Tree grid node class
function TreeGridNode(node, grid, level, insertBefore, startHidden)

90
treegridtest.htm
View File

@ -50,97 +50,11 @@ onDomReady(function()
TG.initCellEditing();
// Cell selection by mouse drag example
var startDrag, dragDiv;
addListener(document.body, 'mousedown', function(evt)
TG.initCellSelection(function(node, i, td)
{
var els = TG.table.querySelectorAll('td.selected');
for (var i = 0; i < els.length; i++)
els[i].className = els[i].className.replace(' selected', '');
evt = getEventCoord(evt);
if (evt.which != 1)
return;
startDrag = [ evt.pageX, evt.pageY ];
if (!dragDiv)
{
dragDiv = document.createElement('div');
dragDiv.className = 'selection-rect';
document.body.appendChild(dragDiv);
}
});
addListener(document.body, 'mousemove', function(evt)
{
if (startDrag)
{
evt = getEventCoord(evt);
dragDiv.style.display = 'block';
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';
}
}
});
addListener(document.body, 'mouseup', function(evt)
{
if (startDrag)
{
evt = getEventCoord(evt);
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;
if (x2 > x1+10 && y2 > y1+10)
{
rectangleSelect(TG.table.getElementsByTagName('td'), x1, y1, x2, y2, function()
{
var e = this.previousSibling;
while (e && e.nodeType == 3) e = e.previousSibling;
if (e)
this.className += ' selected';
});
return false;
}
}
return i > 0;
});
});
function rectangleSelect(elements, x1, y1, x2, y2, cb)
{
for (var i = 0; i < elements.length; i++)
{
var offset = getOffset(elements[i]);
var w = elements[i].offsetWidth;
var h = elements[i].offsetHeight;
if (offset.left+w >= x1 && offset.top+h >= y1 && offset.left <= x2 && offset.top <= y2)
cb.apply(elements[i]);
}
}
//-->
</script>
</body>