Handsontable 6.2.2 manualColumnMove配置数据库列顺序数组不生效怎么办

核心问题原因 #

• manualColumnMove 配置项本身仅用于控制是否开启列拖拽移动功能的布尔开关，不能直接传入位置数组作为初始展示顺序配置，部分旧版本即便支持数组传入，映射规则也和你定义的arrPos逻辑相反。
• 你存储的arrPos = [2,4,1,3,0]是「第N个展示位对应原始列索引」的映射逻辑，和Handsontable内置列顺序接口的参数逻辑不匹配。

解决方法 #

方案1：直接重组columns配置（全版本兼容，最稳妥） #

直接根据存储的位置数组重新生成列配置，不需要依赖列移动插件即可生效：

// 原始列配置
const originalColumns = [    
  {data: 'A'}, //0
  {data: 'B'}, //1
  {data: 'C'}, //2
  {data: 'D'}, //3
  {data: 'E'}  //4
];
// 数据库存储的位置数组
const arrPos = [2,4,1,3,0];
// 按展示顺序生成新的列配置
const sortedColumns = arrPos.map(originIndex => originalColumns[originIndex]);

// 初始化表格时直接使用重组后的列配置
hot = new Handsontable(container, {
  /* 其他原有配置 */
  columns: sortedColumns,
  manualColumnMove: true // 如需要允许用户后续手动拖拽调整列可保留该配置
});

方案2：调用列移动插件API调整（需保留原始列索引场景适用） #

如果你的业务需要保留原始列的索引顺序，可以在表格初始化完成后调用插件API调整：

hot = new Handsontable(container, {
  /* 其他原有配置 */
  columns:[    
    {data: 'A'}, //0
    {data: 'B'}, //1
    {data: 'C'}, //2
    {data: 'D'}, //3
    {data: 'E'}  //4
  ],
  manualColumnMove: true // 必须先开启列移动功能
});

// 初始化完成后调用移动接口调整顺序
const arrPos = [2,4,1,3,0];
const movePlugin = hot.getPlugin('manualColumnMove');
arrPos.forEach((originIndex, targetPos) => {
  movePlugin.moveColumn(originIndex, targetPos);
});
// 重新渲染后生效
hot.render();

后续存储说明 #

如果需要保存用户手动调整后的列顺序，可通过movePlugin.getDragSequence()获取最新的位置数组，直接存回数据库即可。

内容的提问来源于stack exchange，提问作者Makoto Uno