其他分享
首页 > 其他分享> > slickgrid ( nsunleo-slickgrid ) 8 区域选择与复制粘贴

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

标签:slickgrid,rElem,复制粘贴,grid,nsunleo,var,treeViewStack,directLR,css
来源: https://www.cnblogs.com/nsunleo/p/14797602.html