<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
<gc-worksheet></gc-worksheet>
<div @click="handelClick" class="btn">获取数值</div>
</gc-spread-sheets>
</div>
</template>
<script>
import Vue from "vue";
import '@grapecity/spread-sheets-resources-zh';
GC.Spread.Common.CultureManager.culture("zh-cn");
import "@grapecity/spread-sheets-vue";
import GC from "@grapecity/spread-sheets";
import "./styles.css";
import {
FivePointedStarCellType,
FullNameCellType
} from "./data.js";
const spreadNS = GC.Spread.Sheets;
//Custom Cell Type
let App = Vue.extend({
name: "app",
data: function () {
return {
spread: ''
};
},
methods: {
handelClick() {
let selection = this.spread.getActiveSheet().getSelections()[0]
console.log(selection, 'ssss');
let result = []
let rowList = [],
colList = [],
ListObj = []
for (let i = 0; i < selection.rowCount; i++) {
rowList.push(selection.row + i)
}
for (let i = 0; i <
selection.colCount; i++) {
colList.push(selection.col + i)
}
for (let i = 0; i < rowList.length; i++) {
for (let j = 0; j < colList.length; j++) {
ListObj.push({
row: rowList,
col: colList[j]
})
}
}
for (let i = 0; i < ListObj.length; i++) {
this.spread.getActiveSheet().getValue(ListObj.row, ListObj.col)
result.push(
this.spread.getActiveSheet().getValue(ListObj.row, ListObj.col)
)
console.log(this.spread.getActiveSheet().getValue(ListObj.row, ListObj.col));
}
// console.log(rowList, colList, ListObj);
console.log(result, 'result');
let value = [];
let label = [];
let obj = [{
label: '',
value: ''
}]
result.map((item, index) => {
obj.push()
})
for (let i = 0; i < result.length; i = i + 2) {
console.log(result);
value.push(result)
}
for (let i = 1; i < result.length; i = i + 2) {
console.log(result);
label.push(result)
}
let results = value.map((name, i) => ({
name,
value: label
}));
console.log(results, 'ddddddd');
},
initSpread(spread) {
this.spread = spread
const sheet = spread.getSheet(0);
sheet.suspendPaint();
sheet.setColumnWidth(0, 100);
sheet.setColumnWidth(1, 170);
const columnInfo = [{
name: "result",
displayName: "Result",
cellType: new FivePointedStarCellType(),
size: 50
},
{
name: "person",
displayName: "Person",
cellType: new FullNameCellType(),
size: 170
}
];
var source = [{
result: true,
person: {
showValue: "LeBron",
hiddenValue: "James"
}
},
{
result: false,
person: {
showValue: "Chris",
hiddenValue: "Bosh"
}
},
{
result: true,
person: {
showValue: "Dwyane",
hiddenValue: "Wade"
}
},
{
result: false,
person: {
showValue: "Mike",
hiddenValue: "Miller"
}
},
{
result: true,
person: {
showValue: "Mike",
hiddenValue: "Miller"
}
},
{
result: true,
person: {
showValue: "Udonis",
hiddenValue: "Haslem"
}
},
{
result: true,
person: {
showValue: "Mario",
hiddenValue: "Chalmers"
}
},
{
result: true,
person: {
showValue: "Joel",
hiddenValue: "Anthony"
}
},
{
result: false,
person: {
showValue: "Shane",
hiddenValue: "Battier"
}
},
{
result: false,
person: {
showValue: "Ray",
hiddenValue: "Allen"
}
},
{
result: true,
person: {
showValue: "James",
hiddenValue: "Jones"
}
},
{
result: false,
person: {
showValue: "Rashard",
hiddenValue: "Lewis"
}
},
{
result: true,
person: {
showValue: "Norris",
hiddenValue: "Cole"
}
},
{
result: true,
person: {
showValue: "Chris",
hiddenValue: "Andersen"
}
},
{
result: false,
person: {
showValue: "Jarvis",
hiddenValue: "Varnado"
}
},
{
result: true,
person: {
showValue: "Juwan",
hiddenValue: "Howard"
}
},
];
sheet.setDataSource(source);
sheet.bindColumns(columnInfo);
sheet.resumePaint();
}
}
});
FullNameCellType.prototype.isEditingValueChanged = function (oldValue, newValue) {
if (newValue.showValue != oldValue.showValue || newValue.hiddenValue != oldValue.hiddenValue) {
return true;
}
return false;
};
new Vue({
render: h => h(App)
}).$mount("#app");
</script> |