1. Requirements: Click on the cell whose column type is json in the handsontable -> pop up the json editor for editing and saving
2. Core code:
1. Click on the cell and a pop-up box will pop up - table.vue file
<hot-table:settings="hotSettings" :columns="columns"/>
<JsonEditorDialog
v-if="showJsonEditorDialog"
:visible="showJsonEditorDialog"
@cancel="cancelJsonEditorDialog"
@ok="okJsonEditorDialog"
:value="currentCellData" />
<script>
import JsonEditorDialog from './json_editor_dialog.vue'
export default {
components: {
JsonEditorDialog
},
data(){
return {
showJsonEditorDialog: false,
currentCellData: undefined,
currentSelectRow: undefined,
currentSelectCol: undefined,
}
},
mounted(){
this.init()
},
methods: {
cancelJsonEditorDialog() {
this.showJsonEditorDialog = false
},
async okJsonEditorDialog(data) {
this.showJsonEditorDialog = false
const updateCells = [
{
col_index: this.currentSelectCol - 1,
row_index: this.currentSelectRow,
value: JSON.stringify(data)
}
]
const res = await tableApi.commitOp(
update_cells: updateCells
)
if (res.data.error) this.$message.error('操作失败')
this.$message.success('操作成功')
this.fetchData()
},
addHook() {
this.hotInstance.addHook('afterOnCellMouseDown', this.afterOnCellMouseDown.bind(this))
},
afterOnCellMouseDown(event, coords, TD) {
const col_type = this.columns[col].value_type
this.currentSelectRow = coords.row
this.currentSelectCol = coords.col
if (coords.row !== -1 && col_type === 'json') {
this.showJsonEditorDialog = true
this.currentCellData = this.hotInstance.getDataAtCell(this.currentSelectRow, this.currentSelectCol)
}
},
init(){
this.addHook()
this.fetchData()
....
},
fetchData(){
...},
}
}
</script>
2. json editor pop-up code—json-editor-dialog.vue
<template>
<div class="json-editor-dialog">
<a-modal :visible="visible" title="JSON编辑" @ok="onOk" @cancel="onCancel" width="900px" class="json-editor-dialog-modal">
<vue-json-editor v-model="jsonContent" :show-btns="false" mode="tree" lang="zh" :expandedOnStart="false" @json-change="jsonChange" @json-save="jsonSave" @has-error="hasError"></vue-json-editor>
</a-modal>
</div>
</template>
<script>
import vueJsonEditor from 'vue-json-editor'
import '@/styles/jsoneditor.css'
export default {
components: {
vueJsonEditor },
props: {
visible: {
type: Boolean
},
value: {
type: String
}
},
data() {
return {
jsonContent: {
}
}
},
mounted() {
this.init()
},
methods: {
isJosn(str) {
if (typeof str == 'object' && str) {
return true
}
if (typeof str == 'string') {
try {
var obj = JSON.parse(str)
if (typeof obj == 'object' && obj) return true
return false
} catch (e) {
return false
}
}
},
init() {
this.jsonContent = JSON.parse(this.value)
},
save() {
if (!this.isJSON(this.jsonStr)) {
this.$message.error(`json格式错误`)
return false
}
this.$message.success('json格式正确')
},
onOk() {
this.save()
this.$emit('ok', this.jsonContent)
console.log('ok', this.jsonContent)
},
onCancel() {
console.log('cancel')
this.$emit('cancel')
},
jsonChange() {
console.log('json change')
},
jsonSave() {
console.log('json save')
},
hasError() {
console.log('has error')
}
}
}
</script>