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

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)
        });
      }

修正后的效果预览

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