nsunleo-slickgrid 修正区域选择不能跨冻结列的问题
周六的时候,留了个小小的尾巴,区域选择的问题进做到了定位:
问题原因,在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) }); }
修正后的效果预览
接下来会处理选择的时候,界面状态不刷新的问题。
nsunleo-slickgrid 修正区域选择不能跨冻结列的问题
原文:https://www.cnblogs.com/nsunleo/p/14495711.html