关于GridJS配置DataTables后实现用户端列显隐与重排的咨询

一、列显示/隐藏功能 #

GridJS 可通过配置结合自定义控件实现列的显示/隐藏，核心是利用 grid.updateConfig() 方法动态修改列的 hidden 属性：

1. 定义列的初始配置，可设置部分列默认隐藏：

const columns = [
  { name: 'ID', hidden: false },
  { name: '姓名', hidden: false },
  { name: '邮箱', hidden: true },
  { name: '手机号', hidden: false }
];

const grid = new Grid({
  columns: columns,
  data: [
    [1, '张三', 'zhangsan@example.com', '13800138000'],
    [2, '李四', 'lisi@example.com', '13900139000']
  ],
  container: '#grid'
}).render();

2. 添加上下文控件（复选框组）供用户选择：

<div class="column-controls">
  <label><input type="checkbox" data-col="ID" checked> ID</label>
  <label><input type="checkbox" data-col="姓名" checked> 姓名</label>
  <label><input type="checkbox" data-col="邮箱"> 邮箱</label>
  <label><input type="checkbox" data-col="手机号" checked> 手机号</label>
</div>

3. 监听控件事件，动态更新列的显示状态：

document.querySelectorAll('.column-controls input').forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    const colName = this.dataset.col;
    // 找到对应列并修改hidden属性
    const updatedColumns = columns.map(col => {
      if (col.name === colName) {
        return { ...col, hidden: !this.checked };
      }
      return col;
    });
    // 更新Grid配置并重新渲染
    grid.updateConfig({ columns: updatedColumns }).forceRender();
  });
});

二、列重新排序功能 #

GridJS 本身无内置列拖拽重排功能，可通过集成 SortableJS 实现，步骤如下：

1. 初始化 Grid 后，获取表头的列容器：

const gridHeader = document.querySelector('.gridjs-head tr');

2. 用 SortableJS 初始化拖拽功能，监听排序结束事件：

new Sortable(gridHeader, {
  animation: 150,
  onEnd: function(evt) {
    const oldIndex = evt.oldIndex;
    const newIndex = evt.newIndex;
    // 调整columns数组的顺序
    const [movedCol] = columns.splice(oldIndex, 1);
    columns.splice(newIndex, 0, movedCol);
    // 更新Grid配置并重新渲染
    grid.updateConfig({ columns: columns }).forceRender();
  }
});

注意：如果使用了 GridJS 的分页、排序等其他功能，更新列顺序后需确保这些功能的状态同步，比如重新加载数据或重置排序状态。

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