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

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

　　上次解决区域选择不能跨冻结列问题的时候，剩了个尾巴，从右往左选择的时候，会出现选择不正常的情况，后续对这个问题进行了修正。

在修正问题前，需要选择的方向，即从左往右还是从右往左选择（L->R Or R->L)。

　　确定是否跨区域，前提知道选择的方向，即（L->R && Start <= frozenColumn && End > frozenColumn || R->L && Start>frozenColumn && End <=frozenColumn) 。

　　从选择方向得知，我们需要记录开始和结束（Start ，End)。

　　上述准备条件之后剩下的就是计算border了，L->R的情况跨区域的时候 L的右边框0，R->L 的时候，R的左边框0。

　　起点问题，L->R跨区域的情况，R的Left为0；R->L跨区域的情况，L的起点为L父容器的宽度- 当前的左起点。

　　分析之后，改造代码：

function handleDrag(e, dd) {

      if (!_dragging) {

        return;

      }

      e.stopImmediatePropagation();

      var end = _grid.getCellFromPoint(

        e.pageX - _$activeCanvas.offset().left + _columnOffset,

        e.pageY - _$activeCanvas.offset().top + _rowOffset

      );

      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;

      }

      dd.range.end = end;

      var canvas = $(_grid.getActiveCanvasNode(e));

      _decorator.show(new Slick.Range(dd.range.start.row, dd.range.start.cell, end.row, end.cell), {

        start: _startCell.cell,

        canvas: canvas,

        end: dd.range.end.cell

      });

    }

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;

    }

修正后的结果：

OK 到这里，未完待续！

巴特西

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

最新文章

热门文章