100字范文 > luckysheet移动端添加复制粘贴（批量粘贴）操作按钮

luckysheet移动端添加复制粘贴（批量粘贴）操作按钮

时间：2021-02-20 00:26:26

需求：

移动端的luckysheet需要有类似钉钉写作文档中的选中一块区域后弹出复制、剪切等按钮。

操作：

luckysheet滑动选中一块区域后会在左上角和右下角有小圆点，点击小圆点或者滑动选择区域时弹出操作框（类似钉钉文档）

开工：

添加dom

CTRL+P找到Moblie.js文件，在document的touchend回调的末尾加上自己的函数，开始处理。

ShowMobileOperation函数内容如下：

上面函数的简易思路：

触摸完毕，创建dom，挂载到body上，之后定位到触摸坐标。为dom中的几个按钮添加点击事件处理。

各按钮回调思路

文本复制按钮（#copyShowVal）回调。

（1）首先用luckysheet.getRangeValue()获取复制区域的单元格对象数据（返回结果是二维数组），然后构建出需要的符合单元格对象格式的二维数组。（就是把m也赋值给v，其他批注啥的都不要，这样去粘贴构建出来的数据就都是显示值m了）

（2）之后将构建好的数据交给selection.copybyformat(event,JSON.stringify(copyData))去处理。最后隐藏操作区域。

全复制（#mobileCopyBtn）按钮回调

同上

粘贴（#mobilePasteBtn）按钮回调

（1）调用selection.paste(event,'btn',Store.isCopyText) 方法，由于需要做批量粘贴，还需要对粘贴的数据进行处理。

（2）进入paste后，获取textarea的内容data（实现复制粘贴功能时clipboard不支持就用这种方法），之后交给pasteHandler方法，在pasteHandler方法里对数据进行自适应处理。自适应数据处理函数代码如下：

// nby 实现批量粘贴数据的函数function selfAdaptionData(data){let primData = $.extend(true, [], data);// 判断当前选区，实现批量粘贴let range = luckysheet.getRange()//获取需要粘贴的区域let pasteRange = [range[0].row[1] - range[0].row[0] + 1 , range[0].column[1] - range[0].column[0] + 1 ]let copyRange = [data.length,data[0].length]let residueColumnNum = pasteRange[1] - copyRange[1] //粘贴区域的列数是否比已复制的数据列数多let residueRowNum = pasteRange[0] - copyRange[0]if(residueColumnNum > 0 || residueRowNum > 0){// 粘贴区域更大，扩大粘贴的数据// 先扩大列数let columnCount = parseInt(pasteRange[1]/copyRange[1])for(let i = 1 ; i < columnCount ; i++){data = data.map((arr,index)=>{return [...arr,...primData[index]]//这里新添加的每行数据需要用对应的那一行，并且需要是之前的数据})}// 扩大行数let primDataArr = $.extend(true, [], data);//先存下，一次粘贴的数据let rowCount = parseInt(pasteRange[0]/copyRange[0])for(let i = 1 ; i < rowCount ; i++){data = [...data,...primDataArr]}}return data}

selfAdaptionData函数说明：

通过luckysheet.getRange()获取粘贴的区域，计算出粘贴区域的行数和列数pasteRange，又通过入参data计算出拷贝区域的行列数copyRange，通过行列相减，判断粘贴区域是否大于拷贝区域。

如果大于，则需要扩大数据。计算出最小整数倍，然后循环添加。先把列处理好之后就是行。