Handsontable列解冻后恢复原位置失效问题求助

我需要实现Handsontable表格的以下功能：

• 冻结某列时，该列自动移动到第0列（最左侧）位置
• 右键执行解冻操作时，该列回到它的原始位置

我尝试通过自定义unfreezeColumn回调函数，基于列的原始顺序来实现（比如冻结索引3的列时移到第0位，解冻时回到3位），但自定义的索引功能无法正常工作。

原实现代码 #

HTML部分 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://handsontable.com/dist/handsontable.full.js"></script>
<link rel="stylesheet" href=="https://handsontable.com/dist/handsontable.full.css">
<div id="grid" class="handsontable"></div>

JavaScript部分 #

$(function() {
  var data = [
    ['Year', 'Maserati', 'Mazda', 'Mercedes', 'Mini', 'Mitsubishi'],
    ['2009', 0, 2941, 4303, 354, 5814],
    ['2010', 5, 2905, 2867, 412, 5284],
    ['2011', 4, 2517, 4822, 552, 6127],
    ['2012', 2, 2422, 5399, 776, 4151]
  ];

  const container = document.getElementById('grid');
  let isUpdatingOrder = false; // Flag to prevent recursion
  const originalOrder = [...Array(data[0].length).keys()]; // Track the original column order
  const hiddenColumnsList = [];
  const expandedCells = {};

  // Initialize Handsontable
  const hot = new Handsontable(container, {
    data: data,
    columns: originalOrder.map((index) => ({
      title: data[0][index],
      minWidth: 150,
      width: 160
    })),
    filters: true,
    dropdownMenu: ['filter_by_value', 'filter_action_bar'],
    height: 900,
    autoWrapRow: true,
    autoWrapCol: true,
    contextMenu: {
      items: {
        "freeze_column": {},
        "unfreeze_column": {
          name: 'Unfreeze column',
          callback: function(key, selection) {
            const colIndex = selection[0].start.col;
            console.log('Unfreezing column index:', colIndex);
            unfreezeColumn(colIndex);
          }
        },
        "hidden_columns_hide": {},
        "hidden_columns_show": {}
      }
    },
    manualColumnFreeze: true,
    readOnly: true,
    editor: false,
    width: '100%',
    colHeaders: true,
    manualColumnResize: true,
    autoColumnSize: true,
    wordWrap: true,
    className: 'jnj-table',
    licenseKey: 'non-commercial-and-evaluation',
    hiddenColumns: {
      columns: hiddenColumnsList,
      indicators: true
    }
  });

  // Function to unfreeze the column
  function unfreezeColumn(colIndex) {
    hot.getPlugin('manualColumnFreeze').unfreezeColumn(colIndex);
    updateColumnOrder();
  }

  // Function to update the column order
  function updateColumnOrder() {
    if (isUpdatingOrder) return; // Prevent recursion
    isUpdatingOrder = true; // Set the flag

    const currentOrder = hot.getSettings().manualColumnMove || [];

    // Restore the columns to the original order only if they're not in the original state
    if (!arraysEqual(currentOrder, originalOrder)) {
      hot.updateSettings({
        manualColumnMove: originalOrder
      });
    }

    hot.render();
    isUpdatingOrder = false; // Reset the flag
  }

  // Helper function to compare two arrays
  function arraysEqual(arr1, arr2) {
    if (arr1.length !== arr2.length) return false;
    return arr1.every((value, index) => value === arr2[index]);
  }

});

问题分析 #

原代码的核心问题：

1. 未实现冻结列时自动移至首列的逻辑，Handsontable默认冻结操作不会改变列位置
2. updateColumnOrder直接重置所有列到原始顺序，多列冻结解冻时会出现混乱，无法精准还原单列的原始位置
3. 未跟踪单列的原始索引，解冻时无法定位到正确的还原位置
4. HTML中存在笔误：href==会导致样式加载失败

修正后的实现代码 #

HTML部分 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://handsontable.com/dist/handsontable.full.js"></script>
<link rel="stylesheet" href="https://handsontable.com/dist/handsontable.full.css">
<div id="grid" class="handsontable"></div>

JavaScript部分 #

$(function() {
  var data = [
    ['Year', 'Maserati', 'Mazda', 'Mercedes', 'Mini', 'Mitsubishi'],
    ['2009', 0, 2941, 4303, 354, 5814],
    ['2010', 5, 2905, 2867, 412, 5284],
    ['2011', 4, 2517, 4822, 552, 6127],
    ['2012', 2, 2422, 5399, 776, 4151]
  ];

  const container = document.getElementById('grid');
  let isUpdating = false;
  // 跟踪每一列的原始索引，键为当前视觉索引，值为原始索引
  const originalColIndexes = [...Array(data[0].length).keys()];
  const hiddenColumnsList = [];

  const hot = new Handsontable(container, {
    data: data,
    columns: originalColIndexes.map((index) => ({
      title: data[0][index],
      minWidth: 150,
      width: 160
    })),
    filters: true,
    dropdownMenu: ['filter_by_value', 'filter_action_bar'],
    height: 900,
    autoWrapRow: true,
    autoWrapCol: true,
    contextMenu: {
      items: {
        "freeze_column": {
          // 重写冻结回调，先移至首列再冻结
          callback: function(key, selection) {
            const colIndex = selection[0].start.col;
            if (colIndex === 0) return;
            
            // 移动列到首列
            hot.getPlugin('manualColumnMove').moveColumn(colIndex, 0);
            // 冻结首列
            hot.getPlugin('manualColumnFreeze').freezeColumn(0);
            
            // 更新原始索引映射
            const movedColOriginal = originalColIndexes.splice(colIndex, 1)[0];
            originalColIndexes.unshift(movedColOriginal);
          }
        },
        "unfreeze_column": {
          name: 'Unfreeze column',
          callback: function(key, selection) {
            const colIndex = selection[0].start.col;
            unfreezeColumn(colIndex);
          }
        },
        "hidden_columns_hide": {},
        "hidden_columns_show": {}
      }
    },
    manualColumnFreeze: true,
    manualColumnMove: true, // 必须开启手动列移动支持
    readOnly: true,
    editor: false,
    width: '100%',
    colHeaders: true,
    manualColumnResize: true,
    autoColumnSize: true,
    wordWrap: true,
    className: 'jnj-table',
    licenseKey: 'non-commercial-and-evaluation',
    hiddenColumns: {
      columns: hiddenColumnsList,
      indicators: true
    }
  });

  // 解冻并还原列到原始位置
  function unfreezeColumn(colIndex) {
    if (isUpdating) return;
    isUpdating = true;
    
    // 解冻目标列
    hot.getPlugin('manualColumnFreeze').unfreezeColumn(colIndex);
    // 获取该列的原始索引
    const originalPos = originalColIndexes[colIndex];
    
    // 更新索引映射
    originalColIndexes.splice(colIndex, 1);
    originalColIndexes.splice(originalPos, 0, originalPos);
    
    // 移动列到原始位置
    hot.getPlugin('manualColumnMove').moveColumn(colIndex, originalPos);
    
    isUpdating = false;
    hot.render();
  }
});

关键改动说明 #

1. 开启manualColumnMove：必须开启该配置才能支持列位置的动态调整
2. 重写冻结列回调：冻结前先将目标列移动到首列，再执行冻结操作，同时同步更新索引映射数组
3. 精准解冻还原：通过originalColIndexes跟踪每列的原始位置，解冻时仅将当前列移回其原始位置，不影响其他列
4. 修正HTML笔误：将href==改为href=，确保样式正常加载

内容的提问来源于stack exchange，提问作者Maya Gans