handsonetable+vue 表格在線編輯

<template>
  <div>
    <div id="example-container" class="wrapper">
      <HotTable ref="testHot" :root="root" :settings="hotSettings"/>
      <el-button type="primary" size="small" @click="saveData">{{ '保存' }}</el-button>
      <el-button size="small" @click="goBack">{{ '返回' }}</el-button>
      <!--<el-button size="small" @click="goBack">{{ $t('task.next_step') }}</el-button>-->
    </div>
  </div>
</template>
<script>
import HotTable from 'vue-handsontable-official'
export default {
  name: 'SampleApp',
  components: {
    HotTable
  },
  props: {
    taskid: {
      type: String,
      default: ''
    },
    createTaskType: {
      type: Boolean,
      default: false
    },
    createTaskForm: {
      type: String,
      default: ''
    }
  },
  data: function() {
    return {
      root: 'test-hot',
      hotSettings: {
        data: [],
        // startRows: 11, //行列範圍
        // startCols: 11,
        minRows: 1, // 最小行列
        // minCols: 6,
        width: '100%',
        // maxRows: 30, //最大行列
        // maxCols: 30,
        rowHeaders: true, // 行表頭
        height: 320,
        rowHeights: 23,
        colHeaders: true, // 行表頭
        // colHeaders: ["時間", "Kia", "Nissan", "Toyota", "Honda", "123"], //自定義列表頭or 布爾值
        // minSpareCols: 2, //列留白
        // minSpareRows: 2, //行留白
        currentRowClassName: 'currentRow', // 爲選中行添加類名，能夠更改樣式
        currentColClassName: 'currentCol', // 爲選中列添加類名
        autoWrapRow: true, // 自動換行
        contextMenu: {
          // 自定義右鍵菜單，可漢化，默認布爾值
          items: {
            row_above: {
              name: '上方插入一行'
            },
            row_below: {
              name: '下方插入一行'
            },
            // col_left: {
            //   name: "左方插入列"
            // },
            // col_right: {
            //   name: "右方插入列"
            // },
            hsep1: '---------', // 提供分隔線
            remove_row: {
              name: '刪除行'
            }
            // remove_col: {
            //   name: "刪除列"
            // },
            // make_read_only: {
            //   name: "只讀"
            // },
            // borders: {
            //   name: "表格線"
            // },
            // commentsAddEdit: {
            //   name: "添加備註"
            // },
            // commentsRemove: {
            //   name: "取消備註"
            // },
            // freeze_column: {
            //   name: "固定列"
            // },
            // unfreeze_column: {
            //   name: "取消列固定"
            // },
            // hsep2: "---------"
          }
        }, // 右鍵效果
        fillHandle: true, // 選中拖拽複製 possible values: true, false, "horizontal", "vertical"
        fixedColumnsLeft: 0, // 固定左邊列數
        fixedRowsTop: 0, // 固定上邊列數
        columns: [
          // 添加每一列的數據類型和一些配置
          {},
          {},
          {},
          {},
          {},
          {},
          {},
          {},
          {},
          {},
          {},
          // {},
          // {},
          // {},
          // {},
          {},
          {},
          {},
          {},
          {},
          {},
          {},
          {}
        ],
        manualColumnFreeze: true, // 手動固定列
        manualColumnMove: true, // 手動移動列
        manualRowMove: true, // 手動移動行
        manualColumnResize: true, // 手工更改列距
        manualRowResize: true, // 手動更改行距
        comments: true, // 添加註釋
        customBorders: [], // 添加邊框
        columnSorting: true, // 排序
        stretchH: 'none' // 根據寬度橫向擴展，last:只擴展最後一列，none：默認不擴展
      }
    }
  },

  mounted() {
    // 獲取任務詳情
    console.log(this.taskid)
    if (this.taskid) {
      this.$store.dispatch('GET_Field_LIST', this.taskid).then(data => {
        // 拼column
        var columnSize = data.data.columnLargestSize
        if (columnSize === 0) {
          columnSize = 30
        }
        var size = []
        for (var i = 0; i < columnSize; i++) {
          var col = {}
          size.push(col)
        }
        console.log(size)
        // this.hotSettings.columns = size;
        // 放數據
        this.hotSettings.data = data.data.result
      })
    }
  },
  methods: {
    goBack() {
      this.$parent.goback()
      // this.$router.push('/integration/task')
    },
    submit() {
      this.postData()
    },
    transformTf(str) {
      return str.replace(/([A-Z])/g, '_$1').toLowerCase()
    },
    transformStr3(str) {
      const re = /_(\w)/g
      return str.replace(re, function($0, $1) {
        return $1.toUpperCase()
      })
    },
    saveData() {
      var examData = this.$refs.testHot.table.getData() // 這裏要注意，若是使用this.hotSettings.data 保存表格數據，拖拽完之後數據的順序將不會更新，所以使用 this.$refs.testHot.table.getData(); 來獲取數據，獲取的數據格式爲二維數組。
      var param = []
      param.push(examData)
      param.push(this.taskid)
      this.$store.dispatch('SAVE_Field_LIST', param).then(data => {
        this.$notify({
          title: '操做成功',
          dangerouslyUseHTMLString: true,
          type: 'success'
        })
        console.log(data)
        this.goBack()
      })
    }
  }
}
</script>

<style>
button {
  margin: 20px 20px;
}
.handsontable .currentRow {
  background-color: #e7e8ef;
}

.handsontable .currentCol {
  background-color: #f9f9fb;
}
#test-hot {
  width: 800px;
  height: 800px;
  overflow: hidden;
}
</style>

效果 

 後端代碼 一個用來回顯 一個是修改數據

 Resource方法

    @SuppressWarnings("unchecked")
    @RequestMapping(value = "/template/table/{id}", method = {
            RequestMethod.GET }, produces = "application/json;charset=UTF-8")
    @ResponseBody
    @ApiOperation("給在線模版編輯準備的數據")
    public ResponseEntity<RestResponse<List<ImportField>>> getTemplateTableField(
            @ApiParam(required = true, name = "Authorization", value = "jwt憑證") @RequestHeader(value = "Authorization", required = true) String Authorization,
            @PathVariable(value = "id", required = true) String id) throws URISyntaxException, WebException, Exception {
        TableTemplateField result = importFieldService.getTableFieldByTemplateId(id);
        return ResponseEntity.ok().body(RestResponse.getRestResponse(CommonCodeMessageEnum.SUCCESS.getBizCode(),
                CommonCodeMessageEnum.SUCCESS.getMessage(), result));
    }
    
    
    @SuppressWarnings("unchecked")
    @RequestMapping(value = "/template/table/{id}", method = {
            RequestMethod.POST }, produces = "application/json;charset=UTF-8")
    @ResponseBody
    @ApiOperation("編輯在線模版")
    public ResponseEntity<RestResponse<List<ImportField>>> editTemplateTableField(
            @ApiParam(required = true, name = "Authorization", value = "jwt憑證") @RequestHeader(value = "Authorization", required = true) String Authorization,@RequestBody List<String[]> json,
            @PathVariable(value = "id", required = true) String id){
        System.out.println(json.toString());
        importFieldService.editTemplateTableField(json,id);
        return ResponseEntity.ok().body(RestResponse.getRestResponse(CommonCodeMessageEnum.SUCCESS.getBizCode(),
                CommonCodeMessageEnum.SUCCESS.getMessage(), "success"));
    }

 

 數據格式，相似一個list<<string>>的格式，返回和接收都是這個格式

[
["20080101", 10, 11, 12, 13, true],
["20090101", 20, 11, 14, 13, true],
["20010101", 30, 15, 12, 13, true],
["20010101", 32, 213, 21, 312, true],
["20010201", 32, 213, 21, 312, true],
["20010301", 32, 213, 21, 312, true],
["20010401", 32, 213, 21, 312, true],
["20010501", 32, 213, 21, 312, true],
["20010601", 32, 213, 21, 312, true]
],

 service方法

    /**
     * 獲取模版字段，轉成table
     * 
     * @param id
     * @return
     */
    public TableTemplateField getTableFieldByTemplateId(String id) {
        List<List<String>> datalist = new ArrayList<>();
        List<ImportField> list = importFieldRepository.findFieldByTemplateId(id);
        // 根據rowNumber 分類column
        Map<Integer, List<ImportField>> map = list.stream().sorted(Comparator.comparing(ImportField::getColumnNo))
                .collect(Collectors.groupingBy(ImportField::getRowNo,
                        Collectors.mapping(java.util.function.Function.identity(), Collectors.toList())));
        for (Integer i : map.keySet()) {
            List<String> contentlist = new ArrayList<>();
            for (ImportField field : map.get(i)) {
                contentlist.add(field.getName() + "(" + field.getLabel() + ")");
            }
            datalist.add(contentlist);
        }
        System.out.println(datalist.toString());
        TableTemplateField tableTemplateField = new TableTemplateField();
        tableTemplateField.setResult(datalist);
        // 獲取最大的column
        Optional<ImportField> importField = list.stream().max(Comparator.comparingInt(ImportField::getColumnNo));
        Integer columSize = importField.isPresent() ? importField.get().getColumnNo() : 0;
        tableTemplateField.setColumnLargestSize(columSize);
        return tableTemplateField;
    }

    /**
     * 修改模版field 全刪全增
     * 
     * @param json
     * @param id
     */
    public void editTemplateTableField(List<String[]> dataList, String id) {
        ImportTemplate template = importTemplateRepository.findOne(id);
        Set<ImportField> fields = new HashSet<ImportField>();
        if (dataList.size() > 0) {
            for (int i = 1; i <= dataList.size(); i++) {
                String[] heads = dataList.get(i - 1);
                for (int b = 1; b <= heads.length; b++) {
                    ImportField field = new ImportField();
                    String fieldcontent = heads[b - 1];
                    field.setRowNo(i);
                    field.setColumnNo(b);
                    // 可能存在空字段
                    if (!StringUtils.isEmpty(fieldcontent)) {
                        if (fieldcontent.contains("rowkey")) {
                            field.setIsRowKey(1);
                        }
                        int a = fieldcontent.indexOf("(");
                        int c = fieldcontent.indexOf(")");
                        if (a == -1 || c == -1) {
                            throw new WebException(ErrorEnum.ERR_FIELDNAME_UNFORMATTER);
                        }
                        String label = fieldcontent.substring(a + 1, c);
                        String name = fieldcontent.substring(0, a);
                        field.setName(name);
                        field.setLabel(label);
                        fields.add(field);
                    }
                }
            }
            if (dataList.size() > 1) {
                template.setIsMutipartTitle(1);
            }
            template.setTitleLine(dataList.size());
            template.setImportField(fields);
            importTemplateRepository.save(template);
        }
    }