首页 > 其他 > 详细

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

时间:2021-03-07 21:55:28      阅读:24      评论:0      收藏:0      [点我收藏+]

 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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!