14.2.4 复制指定行，在指定行下面新增并粘贴改行该怎么实现

Derrick.Jiao

如图，该模板是使用的SpreadJS Designer画的，我想在vue代码中，获取动态数据来填充12行的数据，并且获取数据长度来增加12行格式到13行14行乃至更多行。
麻烦指导一下，我该如何复制12行的样式并且把该格式新增到12行下边

Derrick.Jiao · Derrick.Jiao

wisestar 发表于 2021-12-2 11:39
您好，demo我看了，但是我这边有几个疑问，demo中的ssjson我这边无法通过SpreadJS Designer打开，另外我 ...

把json前面删除即可导进我们的在线表格编辑器
image.png78521727.png

导进去后，可以通过数据-模板去设计对应的字段。这样绑定数据源的时候才能找到对应的位置绑定。
image.png931145934.png

另外你提供的模板之所以无法绑定是因为没有像上图那样去设计模板，右侧的按钮也是可以直接拖到工作簿上的。关于如何设计模板可以参考云盘里面的视频教程。
链接：https://pan.baidu.com/s/1d4EaQ1fi_0q-Iy3Y6qDcMA
提取码：lqak

Derrick.Jiao · Derrick.Jiao

你好，可以参考这个demo，利用数据绑定实现
image.png526027831.png

wisestar · wisestar

Derrick.Jiao 发表于 2021-12-2 10:10
你好，可以参考这个demo，利用数据绑定实现

您好，demo我看了，但是我这边有几个疑问，demo中的ssjson我这边无法通过SpreadJS Designer打开，另外我如何把数据绑定到指定位置呢？我这边目前按下面代码无法绑上去

<template>
<div class="home">
<div class="toolbar">
<input type="file" class="el-button" @change="importExcel($event)" />
<el-button @click="exportExcel()">导出 Excel</el-button>
<el-button @click="handelPrint()">打印</el-button>
</div>
<div class="spreadWrapper">
<gc-spread-sheets
class="spreadHost"
@workbookInitialized="workbookInitialized($event)"
>
<gc-worksheet></gc-worksheet>
</gc-spread-sheets>
</div>
</div>
</template>
<script>
import Vue from "vue";
import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css";
import * as GC from "@grapecity/spread-sheets";
import "@grapecity/spread-sheets-vue";
import * as ExcelIO from "@grapecity/spread-excelio";
import FileSaver from "file-saver";
import "@grapecity/spread-sheets-charts";
import "@grapecity/spread-sheets-resources-zh";
import "@grapecity/spread-sheets-barcode";
import json from "./../data/xsdj.json";
import '@grapecity/spread-sheets-print';
import moment from "moment";
GC.Spread.Common.CultureManager.culture("zh-cn");
// GC.Spread.Sheets.LicenseKey = ExcelIO.LicenseKey = "your key";
export default class SpreadSheets extends Vue {
/*data(){
return{
tableData:[{ xh: 1, cp: '手机', gg: '台', xhao: 'A15',dw:'A',sl:99, cjj:5499, zk:499, sj:5000,bz:'' },
{ xh: 2, cp: '手机', gg: '台', xhao: 'A15',dw:'A',sl:99, cjj:5499, zk:499, sj:5000,bz:'' },
{ xh: 3, cp: '手机', gg: '台', xhao: 'A15',dw:'A',sl:99, cjj:5499, zk:499, sj:5000,bz:'' },],
loading:false,
queryParams:{
},
source:null
}
}*/
constructor() {
super();
this.spread = null;
this.tableData=[{ xh: 1, cp: '手机', gg: '台', xhao: 'A15',dw:'A',sl:99, cjj:5499, zk:499, sj:5000,bz:'' },
{ xh: 2, cp: '手机', gg: '台', xhao: 'A15',dw:'A',sl:99, cjj:5499, zk:499, sj:5000,bz:'' },
{ xh: 3, cp: '手机', gg: '台', xhao: 'A15',dw:'A',sl:99, cjj:5499, zk:499, sj:5000,bz:'' },];
}
mounted() {
console.log("tableData："+this.tableData)
}
//
// constructor() {
// super();
// this.spread = null;
// }
workbookInitialized(spread) {
console.log("this:"+this)
console.log("tableData："+this.tableData)
this.spread = spread;
spread.fromJSON(json);
var sheet = spread.getActiveSheet();
sheet.getRange(12, 3, 1, 1).text("ssss")
// sheet.copyTo(12,0,13,0,17,10,GC.Spread.Sheets.CopyToOptions.value);
var fromRange = [new GC.Spread.Sheets.Range(12, 3, 1, 1)];
var toRanges = [new GC.Spread.Sheets.Range(13, 3, 1, 1)];
//去除无用网格线
sheet.options.gridline = {showVerticalGridline: false, showHorizontalGridline: false};
sheet.options.showVerticalScrollbar = false;// y不显示滚动条
sheet.options.showHorizontalScrollbar = false; // x不显示滚动条
sheet.options.colHeaderVisible = false;//隐藏列头
sheet.options.rowHeaderVisible = false;//隐藏行头
spread.options.allowContextMenu = false;//禁用右键
sheet.options.isProtected = true;
console.log(this.tableData)
this.source = new GC.Spread.Sheets.Bindings.CellBindingSource(this.tableData);
console.log(this.source)
sheet.setDataSource(this.source);
for (let i = 0; i < 3; i++) {
}
spread.commandManager().execute({cmd: "clipboardPaste", sheetName: "Sheet1", fromSheet: sheet, fromRanges: fromRange,
pastedRanges: toRanges, isCutting: false, clipboardText: "", pasteOption: GC.Spread.Sheets.ClipboardPasteOptions.all});
spread.resumePaint();
}
importExcel(event) {
const file = event.target.files[0];
let self = this;
let excelIO = new ExcelIO.IO();
excelIO.open(file, (spreadJSON) => {
if (self.spread) {
self.spread.fromJSON(spreadJSON);
}
});
}
exportExcel() {
let self = this;
if (self.spread) {
let spreadJSON = JSON.stringify(self.spread.toJSON());
let excelIO = new ExcelIO.IO();
excelIO.save(spreadJSON, (blob) => {
FileSaver.saveAs(blob, "export.xlsx");
});
}
}
handelPrint() {
this.setPrintInfo(this.spread)
this.spread.print();
let sheet = this.spread.getActiveSheet();
sheet.addColumns(0,3);
}
setPrintInfo(spread) {
let sheet = spread.getActiveSheet();
sheet.deleteColumns(0,3);
let printInfo = sheet.printInfo();
printInfo.showBorder(false);
printInfo.margin({
top: 10,
bottom: 30,
left: 5,
right: -50,
header: 0,
footer: 0,
});
let fontsObj = window.fonts
var fonts = {
normal: fontsObj["simsun.ttf"],
};
printInfo.orientation(GC.Spread.Sheets.Print.PrintPageOrientation.landscape)
// printInfo.showBorder(true);
printInfo.showGridLine(false);
printInfo.showColumnHeader(GC.Spread.Sheets.Print.PrintVisibilityType.hide);
printInfo.showRowHeader(GC.Spread.Sheets.Print.PrintVisibilityType.hide);
printInfo.centering(GC.Spread.Sheets.Print.PrintCentering.horizontal);
}
async query() {
this.loading = true
try {
this.queryParams.sendTime = moment(this.queryParams.sendTime).format("YYYY-MM") + "-01"
const {page, lastMonthDataNum} = await getList(this.queryParams)
this.tableData = page.data.map(item => {
item.year = moment(item.sendTime).format("YYYY年")
item.month = moment(item.sendTime).format("MM月")
return item
})
} catch {
} finally {
this.loading = false
}
}
}
</script>
<style scoped>
.home,
.spreadWrapper {
height: 100%;
}
.spreadHost {
height: 100%;
width: 100%;
}
.toolbar {
padding-bottom: 10px;
}
.el-button {
/*padding-bottom: 5px;*/
height: 50px;
}
a {
float: right;
text-decoration: none;
margin-right: 10px;
line-height: 56px;
}
</style>

复制代码

wisestar · wisestar

这个是我这边的模板

wisestar · wisestar

Derrick.Jiao 发表于 2021-12-2 09:08
把json前面删除即可导进我们的在线表格编辑器

非常感谢

Derrick.Jiao · Derrick.Jiao

wisestar 发表于 2021-12-2 14:21
非常感谢

应该的，有新问题欢迎开新帖交流~

		自动登录	找回密码
密码			立即注册

[已处理] 14.2.4 复制指定行，在指定行下面新增并粘贴改行该怎么实现

最佳答案

6 个回复

SpreadJS 高级认证

讲师达人

GrapeCity

悬赏达人

SpreadJS 认证