handsontable使用及遇到的坑-重写render

重写render方法遇到的坑

重写render方法可以在配置项中添加render方法

handonstableInstance.updateSetting({
    rennder: (hot,TD: HTMLTableCellElement, row: number, col: number, prop, value: any, cellProperties) => {
        //todoList
    }
}, false);

• hot 是handsontable的实例
• TD 是单元格td的dom对象
• row 行号
• col 列号
• prop 我也没想清楚
• value 单元格的值
• cellProperties 单元格属性 如：readonly
  如果想用自己定义的数据结构
  如：

interface Cell {
    value: any
}
let tableData: Cell[][] = [[{value: '单元格的值'}]];
handsontableIntance.loadData(tableData); 

若采用这个方式，你在render中的value就为{value: ‘单元格的值’}，即tableData[row][col]
并且可以给td.innerHtml = ‘想的html’;就可以很方便的控制单元格中的内容，并且方法控制单元格中显示样式的控制，比如弄一下边框、背景色，字体，字号之类的
这个时候可以觉得可以想当然td.rowspan = 2;来控制合并单元格之类的，实际上并不可以，因为render之后handsontable有自己的合并单元格的骚操作，直接导致直接付给TD的rowspan和colspan无效
更骚的方法是afterRender这个中去控制，但是会导致别的问题

采用以上自定数据接口的后果

当采用以上的数据结构时，起初一些功能上回显得得心印手，当到一定程度后，天坑就出现了
handsontable的数据结构是数组和json对象都是可以的，所以用以上的方法会导致他深度遍历，他内部用了JSON.stringify和JSON.parse，所以传的是对象则会变成json的key-value，但是不管传对象还是key-value都会导致他出现循环引用的，他是怎么做的，我也没想明白

解决办法

把自定义的数据的引用挂在handsontable的实例上
如：

handsontable.cellDatas = any;

然后在rendder中根据row和col到handsontable.cellDatas中去取出来，然后再控制显示。