关于grid.js网格控件激活行功能的技术咨询

Grid.js确实没有原生支持你要的「单行激活高亮+方向键切换+触发事件」功能，也没有官方插件提供这个能力，不过可以通过手动结合DOM操作、事件监听来实现，下面是具体方案：

1. 先定义高亮样式 #

首先给激活行加个CSS类，方便区分：

.gridjs-row.active {
  background-color: #e3f2fd; /* 浅蓝色高亮，可根据需求调整 */
  outline: 1px solid #2196f3;
}

2. 初始化Grid时绑定点击激活逻辑 #

利用Grid.js的onRowClick钩子，处理行点击时的激活切换：

let activeRow = null;

const grid = new gridjs.Grid({
  columns: ['Name', 'Email', 'Phone'],
  data: [
    ['John Doe', 'john@example.com', '(555) 123-4567'],
    ['Jane Smith', 'jane@example.com', '(555) 987-6543'],
    ['Bob Johnson', 'bob@example.com', '(555) 456-7890']
  ],
  onRowClick: (e, row) => {
    // 移除之前激活行的样式
    if (activeRow) {
      activeRow.classList.remove('active');
    }
    // 给当前点击的行添加激活样式
    activeRow = row.el;
    activeRow.classList.add('active');
    // 触发自定义激活事件
    activeRow.dispatchEvent(new CustomEvent('rowActivated', { 
      detail: { rowData: row.data },
      bubbles: true
    }));
  }
}).render(document.getElementById('grid'));

3. 添加方向键导航支持 #

监听全局键盘事件，处理上下箭头切换激活行：

document.addEventListener('keydown', (e) => {
  if (!activeRow) {
    // 如果还没有激活行，默认选中第一行
    const firstRow = document.querySelector('.gridjs-row');
    if (firstRow) {
      firstRow.classList.add('active');
      activeRow = firstRow;
      activeRow.dispatchEvent(new CustomEvent('rowActivated', { 
        detail: { rowData: grid.data[0] }, // 异步数据场景需调整获取方式
        bubbles: true
      }));
    }
    return;
  }

  const allRows = Array.from(document.querySelectorAll('.gridjs-row'));
  const currentIndex = allRows.indexOf(activeRow);

  if (e.key === 'ArrowUp' && currentIndex > 0) {
    // 上移一行
    activeRow.classList.remove('active');
    activeRow = allRows[currentIndex - 1];
    activeRow.classList.add('active');
    triggerRowActivatedEvent(activeRow, currentIndex - 1);
  } else if (e.key === 'ArrowDown' && currentIndex < allRows.length - 1) {
    // 下移一行
    activeRow.classList.remove('active');
    activeRow = allRows[currentIndex + 1];
    activeRow.classList.add('active');
    triggerRowActivatedEvent(activeRow, currentIndex + 1);
  }
});

// 封装触发事件的函数
function triggerRowActivatedEvent(rowEl, index) {
  rowEl.dispatchEvent(new CustomEvent('rowActivated', { 
    detail: { 
      rowData: grid.data[index],
      rowIndex: index
    },
    bubbles: true
  }));
}

4. 捕获激活事件 #

在需要的地方监听自定义的rowActivated事件：

document.getElementById('grid').addEventListener('rowActivated', (e) => {
  console.log('激活的行数据:', e.detail.rowData);
  console.log('激活的行索引:', e.detail.rowIndex);
  // 这里写你的业务逻辑
});

注意事项 #

• 如果你的Grid是异步加载数据（比如用server选项），需要在数据加载完成后（比如onDataLoaded钩子）重置激活状态，避免找不到行元素。
• 分页场景下，切换分页后要清空之前的activeRow引用，重新处理第一行的激活逻辑。
• 可以根据需求调整高亮样式，比如区分hover状态和激活状态。

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