move cell selection code into treegrid.js
parent
82faff6702
commit
96855a05f7
106
treegrid.js
106
treegrid.js
|
@ -1,7 +1,7 @@
|
||||||
/**
|
/**
|
||||||
* Very simple and fast tree grid/table, compatible with dynamic loading and jQuery fixedHeaderTable
|
* Very simple and fast tree grid/table, compatible with dynamic loading and jQuery fixedHeaderTable
|
||||||
* License: MPL 2.0+, (c) Vitaliy Filippov 2016+
|
* 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
|
// Tree grid node class
|
||||||
|
|
||||||
function TreeGridNode(node, grid, level, insertBefore, startHidden)
|
function TreeGridNode(node, grid, level, insertBefore, startHidden)
|
||||||
|
|
|
@ -50,97 +50,11 @@ onDomReady(function()
|
||||||
TG.initCellEditing();
|
TG.initCellEditing();
|
||||||
|
|
||||||
// Cell selection by mouse drag example
|
// Cell selection by mouse drag example
|
||||||
var startDrag, dragDiv;
|
TG.initCellSelection(function(node, i, td)
|
||||||
addListener(document.body, 'mousedown', function(evt)
|
|
||||||
{
|
{
|
||||||
var els = TG.table.querySelectorAll('td.selected');
|
return i > 0;
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
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>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
Loading…
Reference in New Issue