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

区域选择

区域选择是通过插件CellRangeSelector实现的，默认不支持跨冻结列进行选择，修正了选择，支持跨冻结列，代码如下，通过判断选择的起点和终点所落在的冻结范围进行计算，如从左往右进行复制，此时需要判拷贝的列数是否超过了冻结列，如果超过冻结了，此时需要在右侧（canvas)中进行绘制，否则在原canvas中绘制。从右往左逻辑同。

 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;

    }

 

拷贝粘贴的实现：

获取选中的数据，监听ctrl + c 和 ctrl + v 事件进行拦截，是通过CellExternalFullCopyManager插件实现的（支持跨冻结列拷贝、粘贴）。

当监听到ctrl + c 的时候，先拦截事件，并将选中区域的数据转换成数据保存在临时的text中，并且选中text的值，之后将text删除，此时粘贴板上已经有复制的值。

当监听到ctrl + v 的时候，首先判断是否有自定义的拦截，如果有自定义拦截，执行自定义拦截，否则执行默认粘贴方法。

• 默认粘贴支持两种模式，一种是选择了区域，此时粘贴会在选择区域内进行粘贴；
• 另一种模式是仅指定了起点，按照复制的区域，从顶点开始粘贴后续区域。

 function _decodeTabularDataExt(_grid, ta) {

            var columns = _grid.getColumns();

            var clippeds = toRow(_grid, ta);

 

            document.body.removeChild(ta);

 

            var ranges = _grid.getSelectionModel().getSelectedRanges();

            if (ranges && ranges[0] && !((ranges[0].fromCell - ranges[0].toCell == 0) && (ranges[0].fromRow - ranges[0].toRow == 0))) {

                var to = ranges[0];

                var startCell = to.fromCell;

                var startRow = to.fromRow;

                // to.toRow - to.fromRow

                // 通过数据反向操作

                for (var y = 0; y < clippeds.length; y++) {

                    var desty = startRow + y;

                    if (desty <= to.toRow) {

                        var dt = _grid.getDataItem(desty);

                        if (dt) {

                            for (var x = 0; x < clippeds[y].length; x++) {

                                var destx = startCell + x;

                                if (destx < grid.getColumns().length && destx <= to.toCell) {

                                    if (!_grid.onBeforeEditCellReadonly(desty, destx, dt, columns[destx])) {

                                        setDataItemValueForColumn(dt, columns[destx], clippeds[y][x]);

                                        // dt[columns[destx].field] = clippeds[y][x];

                                    }

                                }

                            }

                        }

                    }

                }

            } else {

                // if startPoint 

                // else if range 

                var selectedCell = _grid.getActiveCell();

                if (selectedCell) {

                    var startCell = selectedCell.cell;

                    var startRow = selectedCell.row;

                    // 通过数据反向操作

                    for (var y = 0; y < clippeds.length; y++) {

                        var desty = startRow + y;

                        var dt = _grid.getDataItem(desty);

                        if (dt) {

                            for (var x = 0; x < clippeds[y].length; x++) {

                                var destx = startCell + x;

                                if (destx < grid.getColumns().length) {

 

                                    if (!_grid.onBeforeEditCellReadonly(desty, destx, dt, columns[destx])) {

                                        setDataItemValueForColumn(dt, columns[destx], clippeds[y][x]);

                                        //dt[columns[destx].field] = clippeds[y][x];

                                    }

                                }

                            }

                        }

                    }

                }

            }

 

            _grid.invalidate();

 

            _grid.render();

            clearCopySelection();

 

            return;

}

• 扩展能够动态导入tree,增加了发布粘贴事件。

 setTimeout(function () {

                        if (_grid.trigger(_self.onPasteCells, toRow(_grid, ta), e) === true) {

                            return;

                        }

 

                        _decodeTabularData(_grid, ta);

                    }, 50);

自定义粘贴示例：

copyExtManager.onPasteCells.subscribe(function (e, args) {

        if ($(e.target).hasClass("bom-past")) {

            var selectedCell = grid.getActiveCell();

            if (selectedCell) {

                var startRow = selectedCell.row;

                var rowData = grid.getDataItem(startRow);

                var children = [];

                rowData.___path = "";

                var treeViewStack = [rowData];

 

                var bomValidator = {

                    parentPath: function (row, rows) {

                        var tempRow = row;

                        var parentPath = [];

                        while (tempRow) {

                            parentPath.push(tempRow.f3000);

                            if (tempRow.parent) {

                                tempRow = findItemById(tempRow.parent);

                            } else {

                                tempRow = null;

                            }

                        }

                        return parentPath;

                    },

                    cycleCheck: function (row, parentPath) {

 

                    }

                }

 

                var parentPath = bomValidator.parentPath(rowData, getSgAllData());

                for (var x = 0; x < args.length; x++) {

                    var nRow = $.extend({}, rowData);

                    nRow.id = sbz.uuid();

 

                    for (var y = 1; y < args[x].length; y++) {

                        if (y + 1 < grid.getColumns().length) {

                            nRow[grid.getColumns()[y + 1].field] = args[x][y];

                        }

                    }

 

                    nRow.f1000 = nRow.f2001 = nRow.f2000;

                    nRow.f3000 = nRow.f3001 = nRow.f2000;

                    nRow.__state = 0;

                    nRow.___path = args[x][0];

 

                    if (treeViewStack.length > 0) {

                        if (treeViewStack[treeViewStack.length - 1].___path.length < nRow.___path.length) {

 

                            var parent = treeViewStack[treeViewStack.length - 1];

                            // 找到父

                            var nParentPath = treeViewStack.filter((v) => {

                                return v.f2000 == nRow.f2000;

                            });

 

                            if (nParentPath.length > 0 || parentPath.indexOf(nRow.f2000) != -1) {

                                alert("死循环:" + parentPath);

                                return;

                            }

 

                            nRow.parentNumber = parent.f2000;

                            treeViewStack.push(nRow);

 

                            // 确定层级

                            treeViewPath(parent, nRow, x);

                        } else {

                            // 找到最近的兄弟或直接的父

                            var tempPaths = [];

                            tempPaths.push(parentPath);

                            for (var i = treeViewStack.length - 1; i >= 0; i--) {

                                if (treeViewStack[i].___path.length >= nRow.___path.length) {

                                    treeViewStack.pop();

                                } else {

                                    tempPaths.push(treeViewStack[i].f2000);

                                }

                            }

 

                            if (tempPaths.indexOf(nRow.f2000) != -1) {

                                alert("死循环");

                                return;

                            }

 

                            var parent = treeViewStack[treeViewStack.length - 1];

                            nRow.parentNumber = parent.f2000;

                            treeViewStack.push(nRow);

                            // 确定层级

                            treeViewPath(parent, nRow, x);

                        }

                    }

 

 

                    // 提示是否增加 行 ，假设增加 

                    // 直接更新和刷新状态...

 

                    children[x] = nRow;

                }

 

 

                if (children && children.length > 0) {

                    var parents = treeViewSameNodes(rowData);

 

                    for (var i = 0; i < parents.length; i++) {

                        treeViewCopyData(children, parents[i]);

                    }

 

                    treeViewInsert(sgBomData, rowData, children);

                    refresh();

                }

            }

            return true;

        }

 

        return false;

    });