slickgrid ( nsunleo-slickgrid ) 8 区域选择与复制粘贴
作者:互联网
区域选择
区域选择是通过插件CellRangeSelector实现的,默认不支持跨冻结列进行选择,修正了选择,支持跨冻结列,代码如下,通过判断选择的起点和终点所落在的冻结范围进行计算,如从左往右进行复制,此时需要判拷贝的列数是否超过了冻结列,如果超过冻结了,此时需要在右侧(canvas)中进行绘制,否则在原canvas中绘制。从右往左逻辑同。
function show(range, cfg) {
var canvas = cfg.canvas;
var start = cfg.start;
var end = cfg.end;
var from = grid.getCellNodeBox(range.fromRow, range.fromCell);
var to = grid.getCellNodeBox(range.toRow, range.toCell);
// range left to right
var directLR = start <= end;
// frozenColumn temp var
var frozenColumn = grid.getOptions().frozenColumn;
var lR = false;
// lR true condition
if (directLR) {
lR = start <= frozenColumn && end > frozenColumn;
} else {
lR = start > frozenColumn && end <= frozenColumn;
}
if (!_elem) {
_elem = $("<div></div>", { css: options.selectionCss })
.addClass(options.selectionCssClass)
.css("position", "absolute")
.appendTo(grid.getActiveCanvasNode());
_borderWidth = _elem.css("border-left-width");
}
// lr ,create new element .
if (lR && !_rElem) {
_rElem = $("<div></div>", { css: options.selectionCss })
.addClass(options.selectionCssClass)
.css("position", "absolute")
.appendTo(canvas);
}
// ! lr ,remove _rElem
if (!lR && _rElem) {
_rElem.remove();
_rElem = null;
}
var temp = lR && directLR ? _rElem : _elem;
var lWidth = lR ? directLR ? canvas.width() : to.right - 2 : (to.right - from.left - 2);
var lLeft = lR && !directLR ? 0 : (from.left - 1);
//console.log("DIRECT_LR:" + directLR + " FROM_L:" + from.left + " TO_L:" + to.left + " FROM_R:" + from.right + " TO_R" + to.right + " START:" + start + " END:" + end + " LWIDTH:" + lWidth)
if (_elem) {
_elem.css("border-right-width", lR ? directLR ? "0px" : _borderWidth : _borderWidth);
_elem.css("border-left-width", lR ? directLR ? _borderWidth : "0px" : _borderWidth);
_elem.css({
top: from.top - 1,
left: lLeft,
height: to.bottom - from.top - 2,
width: lWidth
});
}
if (_rElem) {
var rLeft = directLR ? 0 : from.left;
var rWidth = !directLR ? canvas.width() : (to.right - 2);
//console.log("RWIDTH:" + rWidth + " RLEFT:" + rLeft);
_rElem.css("border-left-width", lR ? directLR ? "0px" : _borderWidth : _borderWidth);
_rElem.css("border-right-width", lR ? directLR ? _borderWidth : "0px" : _borderWidth);
_rElem.css({
top: from.top - 1,
left: rLeft,
height: to.bottom - from.top - 2,
width: rWidth
});
}
return temp;
}
拷贝粘贴的实现:
获取选中的数据,监听ctrl + c 和 ctrl + v 事件进行拦截,是通过CellExternalFullCopyManager插件实现的(支持跨冻结列拷贝、粘贴)。
当监听到ctrl + c 的时候,先拦截事件,并将选中区域的数据转换成数据保存在临时的text中,并且选中text的值,之后将text删除,此时粘贴板上已经有复制的值。
当监听到ctrl + v 的时候,首先判断是否有自定义的拦截,如果有自定义拦截,执行自定义拦截,否则执行默认粘贴方法。
- 默认粘贴支持两种模式,一种是选择了区域,此时粘贴会在选择区域内进行粘贴;
- 另一种模式是仅指定了起点,按照复制的区域,从顶点开始粘贴后续区域。
- 扩展能够动态导入tree,增加了发布粘贴事件。
标签:slickgrid,rElem,复制粘贴,grid,nsunleo,var,treeViewStack,directLR,css 来源: https://www.cnblogs.com/nsunleo/p/14797602.html