Posted 2 January 2024, 7:23 pm EST - Updated 2 January 2024, 7:29 pm EST
Before we start, we ask for your understanding that the writing will be strange to translate and write the article with a translator.
*** The parts I want are as follows.**
- Import the local Excel file.
- Modify specific cells in the file.
- Bind the modified file to the flexgrid.
*** The present problem**
I’ve finished importing and modifying the local Excel file.
However, there is a problem that the modified data is bound in the binding part and then the original data is bound again.
(Binding is done twice)
Please refer to the code below
Please refer to the .zip file for xlsx data
- PS.
The ContentsLayout part is for screen layout.
<template>
<ContentsLayout
>
<!--
main DIV
-->
<div class="main-1way">
<!-- todo -->
<div class="container-fluid">
<!-- the flexsheet -->
<wj-flex-sheet :initialized="initializeFlexSheet">
</wj-flex-sheet>
<div class="form-inline well well-lg">
<input
type="file"
class="form-control"
id="importFile"
accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
>
<button class="btn btn-default" @click="load">Load</button>
</div>
<div class="form-inline well well-lg">
File Name:
<input type="text" class="form-control" v-model="fileName">
<button class="btn btn-default" @click="save">Save</button>
</div>
</div>
</div>
</ContentsLayout>
</template>
<script>
// import
import "@grapecity/wijmo.styles/wijmo.css";
import '@grapecity/wijmo.vue2.grid.sheet';
import * as wjcGrid from '@grapecity/wijmo.grid';
import * as wjcSheet from '@grapecity/wijmo.grid.sheet';
import ContentsLayout from "@/components/layouts/ContentsLayout.vue";
import WijmoFlexGrid from '@/components/controls/GridView/WijmoFlexGrid.vue';
export default {
data() {
return {
// todo
// flexGrid
columns: null,
wjmGroupCols: null,
templateName: "",
condition: null,
gridData: null,
updateData: [],
fileName:null,
importFile:null,
flex:null,
}
},
components: {
// component
ContentsLayout: ContentsLayout,
WijmoFlexGrid: WijmoFlexGrid,
},
props: {
//
},
watch: {
//
},
mounted() {
//
},
computed: {
//
},
created() {
//
},
unmounted() {
},
methods: {
// todo
initializeFlexSheet: function(flex) {
flex.deferUpdate(() => {
let sheetIdx, sheetName, colIdx, rowIdx;
// initialize the dataMap for the bound sheet.
if (flex) {
for (sheetIdx = 0;sheetIdx < flex.sheets.length; sheetIdx++) {
flex.selectedSheetIndex = sheetIdx;
sheetName = flex.selectedSheet.name;
if (sheetName === "Country") {
let column = flex.columns.getColumn("countryId");
if (column && !column.dataMap) {
column.dataMap = this._buildDataMap(this.countries);
}
column = flex.columns.getColumn("productId");
if (column && !column.dataMap) {
column.dataMap = this._buildDataMap(this.products);
}
column = flex.columns.getColumn("amount");
if (column) {
column.format = "c2";
}
} else {
for (colIdx = 0;colIdx < flex.columns.length;colIdx++) {
for (rowIdx = 0;rowIdx < flex.rows.length;rowIdx++) {
flex.setCellData(rowIdx,colIdx,colIdx + rowIdx);
}
}
}
}
flex.selectedSheetIndex = 0;
}
});
this.flex=flex;
},
load() {
try {
let fileInput = document.getElementById("importFile");
if (this.flex && fileInput.files[0]) {
this.flex.loadAsync(fileInput.files[0]);
this.flex.deferUpdate(() => {
this.gridData = null;
this.updateData = [];
this.modifyGridData();
});
}
} catch (err) {
console.error(err);
}
},
modifyGridData() {
for (let rowIdx = 0; rowIdx < 5; rowIdx++) {
for (let colIdx = 0; colIdx < 2; colIdx++) {
let cellValue = colIdx + rowIdx + 1;
this.flex.setCellData(rowIdx, colIdx, cellValue);
}
}
},
save() {
let fileName = this.importFile ? this.fileName : "test.xlsx";
this.flex.saveAsync(fileName);
},
}
};
</script><style scoped lang="scss">
// css
// todo
.container-fluid .wj-flexsheet {
height: 400px;
margin: 6px 0;
}
</style>
