区域选择
区域选择是通过插件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 的时候，首先判断是否有自定义的拦截，如果有自定义拦截，执行自定义拦截，否则执行默认粘贴方法。
- 默认粘贴支持两种模式，一种是选择了区域，此时粘贴会在选择区域内进行粘贴；
- 另一种模式是仅指定了起点，按照复制的区域，从顶点开始粘贴后续区域。
function _decodeTabularDataExt(_grid, ta) {
var columns = _grid.getColumns();
var clippeds = toRow(_grid, ta);
document.body.removeChild(ta);
var ranges = _grid.getSelectionModel().getSelectedRanges();
if (ranges && ranges[0] && !((ranges[0].fromCell - ranges[0].toCell == 0) && (ranges[0].fromRow - ranges[0].toRow == 0))) {
var to = ranges[0];
var startCell = to.fromCell;
var startRow = to.fromRow;
// to.toRow - to.fromRow
// 通过数据反向操作
for (var y = 0; y < clippeds.length; y++) {
var desty = startRow + y;
if (desty <= to.toRow) {
var dt = _grid.getDataItem(desty);
if (dt) {
for (var x = 0; x < clippeds[y].length; x++) {
var destx = startCell + x;
if (destx < grid.getColumns().length && destx <= to.toCell) {
if (!_grid.onBeforeEditCellReadonly(desty, destx, dt, columns[destx])) {
setDataItemValueForColumn(dt, columns[destx], clippeds[y][x]);
// dt[columns[destx].field] = clippeds[y][x];
}
}
}
}
}
}
} else {
// if startPoint
// else if range
var selectedCell = _grid.getActiveCell();
if (selectedCell) {
var startCell = selectedCell.cell;
var startRow = selectedCell.row;
// 通过数据反向操作
for (var y = 0; y < clippeds.length; y++) {
var desty = startRow + y;
var dt = _grid.getDataItem(desty);
if (dt) {
for (var x = 0; x < clippeds[y].length; x++) {
var destx = startCell + x;
if (destx < grid.getColumns().length) {
if (!_grid.onBeforeEditCellReadonly(desty, destx, dt, columns[destx])) {
setDataItemValueForColumn(dt, columns[destx], clippeds[y][x]);
//dt[columns[destx].field] = clippeds[y][x];
}
}
}
}
}
}
}
_grid.invalidate();
_grid.render();
clearCopySelection();
return;
}
setTimeout(function () {
if (_grid.trigger(_self.onPasteCells, toRow(_grid, ta), e) === true) {
return;
}
_decodeTabularData(_grid, ta);
}, 50);
自定义粘贴示例：
copyExtManager.onPasteCells.subscribe(function (e, args) {
if ($(e.target).hasClass("bom-past")) {
var selectedCell = grid.getActiveCell();
if (selectedCell) {
var startRow = selectedCell.row;
var rowData = grid.getDataItem(startRow);
var children = [];
rowData.___path = "";
var treeViewStack = [rowData];
var bomValidator = {
parentPath: function (row, rows) {
var tempRow = row;
var parentPath = [];
while (tempRow) {
parentPath.push(tempRow.f3000);
if (tempRow.parent) {
tempRow = findItemById(tempRow.parent);
} else {
tempRow = null;
}
}
return parentPath;
},
cycleCheck: function (row, parentPath) {
}
}
var parentPath = bomValidator.parentPath(rowData, getSgAllData());
for (var x = 0; x < args.length; x++) {
var nRow = $.extend({}, rowData);
nRow.id = sbz.uuid();
for (var y = 1; y < args[x].length; y++) {
if (y + 1 < grid.getColumns().length) {
nRow[grid.getColumns()[y + 1].field] = args[x][y];
}
}
nRow.f1000 = nRow.f2001 = nRow.f2000;
nRow.f3000 = nRow.f3001 = nRow.f2000;
nRow.__state = 0;
nRow.___path = args[x][0];
if (treeViewStack.length > 0) {
if (treeViewStack[treeViewStack.length - 1].___path.length < nRow.___path.length) {
var parent = treeViewStack[treeViewStack.length - 1];
// 找到父
var nParentPath = treeViewStack.filter((v) => {
return v.f2000 == nRow.f2000;
});
if (nParentPath.length > 0 || parentPath.indexOf(nRow.f2000) != -1) {
alert("死循环:" + parentPath);
return;
}
nRow.parentNumber = parent.f2000;
treeViewStack.push(nRow);
// 确定层级
treeViewPath(parent, nRow, x);
} else {
// 找到最近的兄弟或直接的父
var tempPaths = [];
tempPaths.push(parentPath);
for (var i = treeViewStack.length - 1; i >= 0; i--) {
if (treeViewStack[i].___path.length >= nRow.___path.length) {
treeViewStack.pop();
} else {
tempPaths.push(treeViewStack[i].f2000);
}
}
if (tempPaths.indexOf(nRow.f2000) != -1) {
alert("死循环");
return;
}
var parent = treeViewStack[treeViewStack.length - 1];
nRow.parentNumber = parent.f2000;
treeViewStack.push(nRow);
// 确定层级
treeViewPath(parent, nRow, x);
}
}
// 提示是否增加 行 ，假设增加
// 直接更新和刷新状态...
children[x] = nRow;
}
if (children && children.length > 0) {
var parents = treeViewSameNodes(rowData);
for (var i = 0; i < parents.length; i++) {
treeViewCopyData(children, parents[i]);
}
treeViewInsert(sgBomData, rowData, children);
refresh();
}
}
return true;
}
return false;
});
- slickgrid ( nsunleo-slickgrid ) 4 解决区域选择和列选择冲突
slickgrid ( nsunleo-slickgrid ) 3 解决区域选择和列选择冲突 之前启用区域选择的时候,又启用了列选择(CheckboxSelectColumn),此时发现选择状态与区域 ...
- slickgrid ( nsunleo-slickgrid ) 3 修正区域选择不能跨冻结列的问题
slickgrid ( nsunleo-slickgrid ) 3 修正区域选择不能跨冻结列的问题 上次解决区域选择不能跨冻结列问题的时候,剩了个尾巴,从右往左选择的时候,会出现选择不正常的情况,后 ...
- slickgrid ( nsunleo-slickgrid ) 2 修正区域选择不能跨冻结列的问题
slickgrid( nsunleo-slickgrid ) 2 修正区域选择不能跨冻结列的问题 周六的时候,留了个小小的尾巴,区域选择的问题进做到了定位: 问题原因,在slickgrid启动冻结之 ...
- 【opencv学习笔记六】图像的ROI区域选择与复制
图像的数据量还是比较大的,对整张图片进行处理会影响我们的处理效率,因此常常只对图像中我们需要的部分进行处理,也就是感兴趣区域ROI.今天我们来看一下如何设置图像的感兴趣区域ROI.以及对ROI区域图像 ...
- 图像的ROI区域选择与复制
[opencv学习笔记六]图像的ROI区域选择与复制 孜然 7 人赞同了该文章 图像的数据量还是比较大的,对整张图片进行处理会影响我们的处理效率,因此常常只对图像中我们需要的部分进行处理,也就是感 ...
- js实现选择及复制粘贴
最近项目有个点击复制到粘贴板的需求,在这里做一个简单的例子分享给大家,没考虑兼容性,需要兼容的大家去查找下文档 //html<p id="element">测试测试&l ...
- Vim的使用 区域选择
1.Visual Block 区域选择,这里的Visual表示视觉,图像,可视化. 2. 小写v:字符选择 shift+v(大写V):行选择 ctrl+v:矩 ...
- 个人永久性免费-Excel催化剂功能第82波-复制粘贴按源区域大小自动扩展收缩目标区域
日常工作中,复制粘贴的操作,永远是最高频的操作,没有之一,在最高频的操作上,进行优化,让过程更智能,比一天到晚鼓吹人工智能替换人的骇人听闻的新闻来得更实际.此篇带来一点点的小小的改进,让日后无数的复制 ...
- 个人永久性免费-Excel催化剂功能第44波-可见区域复制粘贴不覆盖隐藏内容
Excel的复制粘贴操作,每天都在进行,若其中稍能提升一点效率,长久来说,实在是很可观的效率提升. Excel自带的复制粘贴功能,若复制的数据源或粘贴的目标位置中有隐藏的行列内容,简单一个复制粘贴充满 ...
随机推荐
- 攻防世界 reverse secret-string-400
secret-string-400 school-ctf-winter-2015 解压文件得到html和js文件 Task.html <html> <head> <tit ...
- Android Studio 通过 ListView 学习 ArrayAdapte
ListView •前言 ListView 绝对可以称得上是 Android 中最常用的控件之一,几乎所有的应用程序都会用到它. 由于手机屏幕空间有限,能够一次性在屏幕上显示的内容并不多,当我们的程序 ...
- Java中的泛型 - 细节篇
前言 大家好啊,我是汤圆,今天给大家带来的是<Java中的泛型 - 细节篇>,希望对大家有帮助,谢谢 细心的观众朋友们可能发现了,现在的标题不再是入门篇,而是各种详细篇,细节篇: 是因为之 ...
- Go Protobuf(比xml小3-10倍, 快20-100倍)
简介 Protocol Buffers是什么? protocol buffers 是一种灵活,高效,自动化机制的结构数据序列化方法-可类比 XML,但是比 XML 更小.更快.更为简单.你可以定义数据 ...
- 什么是 Jenkins? 运用Jenkins持续集成
[注]本文译自:https://www.edureka.co/blog/what-is-jenkins/ 持续集成是 DevOps 最重要的部分,用于集成各个 DevOps 阶段.Jenkins ...
- CIE标准色度系统（下）
四.色温与相关色温 根据绝对黑体光谱分布特性的普朗克定律,由普朗克公式可以计算出黑体对应于某一温度的光谱分布,并由此应用CIE标准色度系统可获得该温度下黑体发光的三刺激值和色品坐标,从而在色品图上得到 ...
- HTML5是什么
HTML5是目前超文本标记语言 (Hyper Text Markup Language)最新修订版.HTML可以理解为一门程序语言,HTML5字面的意思,这门程序语言的第五次修订,也是HTML的第五个 ...
- 如何自己设计一个类似dubbo的rpc框架？
(1)上来你的服务就得去注册中心注册吧,你是不是得有个注册中心,保留各个服务的信息,可以用zookeeper来做,对吧 (2)然后你的消费者需要去注册中心拿对应的服务信息吧,对吧,而且每个服务可能会存 ...
- IDEA通过Maven打包JavaFX工程（OpenJFX11）
1 概述 最近研究JFX,写出来了但是打包不了,这...尴尬... IDEA的文档说只支持Java8打成jar包: 尝试过直接使用Maven插件的package,不行,也尝试过Build Artifa ...
- Mybatis3源码笔记（八）小窥MyBatis-plus
前言 Mybatis-Plus是一个 MyBatis增强工具包,简化 CRUD 操作,在 MyBatis 的基础上只做增强不做改变,为简化开发.提高效率而生,号称无侵入,现在开发中比较常用,包括我自己 ...
