slickgrid( nsunleo-slickgrid )  2 修正区域选择不能跨冻结列的问题

  周六的时候,留了个小小的尾巴,区域选择的问题进做到了定位:

问题原因,在slickgrid启动冻结之后,表格左右会分成两个canvas,原逻辑区域选择首先确定当前的canvas,然后所有的操作都在当前的canvas中完成,修正的逻辑首先去掉跨区域的逻辑。

 if ((!_grid.canCellBeSelected(end.row, end.cell))
//|| (!_isRightCanvas && (end.cell > _gridOptions.frozenColumn))
//|| (_isRightCanvas && (end.cell <= _gridOptions.frozenColumn))
//|| ( !_isBottomCanvas && ( end.row >= _gridOptions.frozenRow ) )
|| (_isBottomCanvas && (end.row < _gridOptions.frozenRow))
) {
return;
}

、 接下来就是如何判断跨区域(冻结列),判断冻结列很简单,通过获取当前表格的cell的列和forzonColumns的数量比较即可得出。

 var left = range.fromCell <= grid.getOptions().frozenColumn;
var right = range.toCell > grid.getOptions().frozenColumn;
var lR = left && right;

  处理完之后,就是获取对应点canvas了,因此改造了grid.js,增加了获取lCanvas和rCanvas的方法。

    // stone 20210306 根据列获取 canvas
function getCurrentCanvasNode(col) {
return col <= options.frozenColumn ? $canvasTopL : $canvasTopR;
}

  然后按照原逻辑,在确认lR(跨区域)的时候创建_rElem。

      // stone 20210305 增加 left 的控制
if (lR && !_rElem) {
_rElem = $("<div></div>", { css: options.selectionCss })
.addClass(options.selectionCssClass)
.css("position", "absolute")
.appendTo(canvas);
}

  此时存在一个问题,就是如果跨区域,_elem和_rElem的border需要合并起来,即_elem的有边框和_rElem的左边框此时应该为0,否则会如下图所示效果。

   因此改造,在lR的条件下,重置border样式。

 if (_elem) {
_elem.css("border-right-width", right ? "0px" : _borderWidth);
_elem.css({
top: from.top - 1,
left: from.left - 1,
height: to.bottom - from.top - 2,
width: lR ? canvas.width() : (to.right - from.left - 2)
});
} if (_rElem) {
_rElem.css("border-left-width", right ? "0px" : _borderWidth);
_rElem.css({
top: from.top - 1,
left: 0,
height: to.bottom - from.top - 2,
width: to.right - 2
});
}

  剩下的问题就是_elem边框的宽度问题,如果是跨冻结列(lR)的情况,此时宽度如果用原计算逻辑会有出入,因此如果出现lR的情况,讲_elem的宽度设置成其父canvas的宽度即可。

     if (_elem) {
_elem.css("border-right-width", right ? "0px" : _borderWidth);
_elem.css({
top: from.top - 1,
left: from.left - 1,
height: to.bottom - from.top - 2,
width: lR ? _elem.parent().width() : (to.right - from.left - 2)
});
}

修正后的效果预览

接下来会处理选择的时候,界面状态不刷新的问题。

slickgrid ( nsunleo-slickgrid ) 2 修正区域选择不能跨冻结列的问题的更多相关文章

  1. slickgrid ( nsunleo-slickgrid ) 3 修正区域选择不能跨冻结列的问题

     slickgrid ( nsunleo-slickgrid ) 3 修正区域选择不能跨冻结列的问题 上次解决区域选择不能跨冻结列问题的时候,剩了个尾巴,从右往左选择的时候,会出现选择不正常的情况,后 ...

  2. slickgrid ( nsunleo-slickgrid ) 8 区域选择与复制粘贴

    区域选择 区域选择是通过插件CellRangeSelector实现的,默认不支持跨冻结列进行选择,修正了选择,支持跨冻结列,代码如下,通过判断选择的起点和终点所落在的冻结范围进行计算,如从左往右进行复 ...

  3. slickgrid ( nsunleo-slickgrid ) 4 解决区域选择和列选择冲突

    slickgrid ( nsunleo-slickgrid ) 3 解决区域选择和列选择冲突 之前启用区域选择的时候,又启用了列选择(CheckboxSelectColumn),此时发现选择状态与区域 ...

  4. ajax 城市区域选择三级联动

    <body onLoad="sheng()"><div class="xqbody">    <form action=" ...

  5. Vim的使用 区域选择

    1.Visual Block 区域选择,这里的Visual表示视觉,图像,可视化. 2.    小写v:字符选择     shift+v(大写V):行选择               ctrl+v:矩 ...

  6. 【opencv学习笔记六】图像的ROI区域选择与复制

    图像的数据量还是比较大的,对整张图片进行处理会影响我们的处理效率,因此常常只对图像中我们需要的部分进行处理,也就是感兴趣区域ROI.今天我们来看一下如何设置图像的感兴趣区域ROI.以及对ROI区域图像 ...

  7. QTableView表格控件区域选择-自绘选择区域

    目录 一.开心一刻 二.概述 三.效果展示 四.实现思路 1.绘制区域 2.绘制边框 3.绘制 五.相关文章 原文链接:QTableView表格控件区域选择-自绘选择区域 一.开心一刻 陪完客户回到家 ...

  8. 使用Qt5+CMake实现图片的区域选择(附源码)

    近期研发涉及到了图片的区域选择,找来一些资料一直不能很满意,所以自己实现了一个. 实现步骤如下.源码可以点击ImageAOI获取. 如下资料来自源码的README. ImageAOI (XLabel) ...

  9. 图像的ROI区域选择与复制

    [opencv学习笔记六]图像的ROI区域选择与复制 孜然   7 人赞同了该文章 图像的数据量还是比较大的,对整张图片进行处理会影响我们的处理效率,因此常常只对图像中我们需要的部分进行处理,也就是感 ...

随机推荐

  1. dart类详细讲解

    dart 是一个面向对象的语言;面向对象有 (1)继承 (2)封装 (3)多态 dart的所有东西都是对象,所有的对象都是继承与object类 一个类通常是由属性和方法组成的哈: 在dart中如果你要 ...

  2. python Crypto 加密解密

    本片文字记录使用python 的Crypto 工具对图片或者文本进行加密解密的方法: import numpy as np from PIL import Image from base64 impo ...

  3. Zabbix 监控项更多用法

    监控服务端口状态 配置 Zabbix 提供的检测器 配置自定义值映射 查看监控项数据状态 触发器配置 自定义监控项 TCP 11 种状态 TCP 11 种状态 LISTEN - 侦听来自远方TCP端口 ...

  4. 痞子衡嵌入式:超级下载算法(RT-UFL)开发笔记(4) - 轮询Flash配置参数

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是超级下载算法开发笔记(4)之轮询Flash配置参数. 文接上篇 <超级下载算法(RT-UFL)开发笔记(3) - 统一FlexSP ...

  5. 链接脚本再探和VMA与LMA

    链接脚本简单描述 连接脚本的描述都是以节(section)的单位的,网上也有很多描述链接脚本语法的好文章,再不济还有官方的说明文档可以用来学习,其实主要就是对编译构建的整个过程有了深入的理解后就能对链 ...

  6. 009.NET5_程序的发布运行

    发布 相差了web.config文件 脚本启动 cmd,进入程序根目录. 带参启动 其实,最终与web.config中效果一样

  7. vue watch All In One

    vue watch All In One var vm = new Vue({ data: { a: 1, b: 2, c: 3, d: 4, e: { f: { g: 5 } } }, watch: ...

  8. TypeScript Generics All In one

    TypeScript Generics All In one TypeScript 泛型 代码逻辑复用 扩展性 设计模式 方法覆写, 直接覆盖 方法重载,参数个数或参数类型不同 test " ...

  9. HTTP/HTTPS Proxy & Charles

    HTTP/HTTPS Proxy & Charles Charles https://www.charlesproxy.com/ https://www.jianshu.com/p/53d2c ...

  10. puppeteer & screenshot

    puppeteer & screenshot http://localhost:9812/screenshot?url=https://cdn.xgqfrms.xyz/