如何在gridjs-svelte中通过rowClick事件获取点击行/单元格详情?
问题:GridJS-Svelte行点击事件无法获取行数据,寻求替代组件
问题背景
GridJS官方文档中提供了获取点击行/单元格详情的示例代码:
const grid = new Grid({ columns: ['Name', 'Email', 'Phone Number'], sort: true, search: true, data: [ ['John', 'john@example.com', '(353) 01 222 3333'], ['Mark', 'mark@gmail.com', '(01) 22 888 4444'], ['Eoin', 'eo3n@yahoo.com', '(05) 10 878 5554'], ['Nisen', 'nis900@gmail.com', '313 333 1923'] ] }); grid.on('rowClick', (...args) => console.log('row: ' + JSON.stringify(args), args)); grid.on('cellClick', (...args) => console.log('cell: ' + JSON.stringify(args), args));
在官方示例页面点击表格时,控制台会输出包含PointerEvent和行数据的参数。
但在SvelteKit 5的+page.svelte中使用如下代码时:
<script lang="ts" > import Grid from "gridjs-svelte" </script> <Grid data={[ ['John', 'john@example.com', '(353) 01 222 3333'], ['Mark', 'mark@gmail.com', '(01) 22 888 4444'], ['Eoin', 'eo3n@yahoo.com', '(05) 10 878 5554'], ['Nisen', 'nis900@gmail.com', '313 333 1923'] ]} columns={['Name', 'Email', 'Phone Number']} sort="true" search="true" on:rowClick={ (...args) => {console.log(JSON.stringify(args));}} />
点击行时控制台仅输出[{"isTrusted":false}],无法获取到行数据。
当前使用的依赖版本
>npm list +-- @sveltejs/adapter-auto@3.3.1 +-- @sveltejs/kit@2.15.2 +-- @sveltejs/vite-plugin-svelte@5.0.3 +-- gridjs-svelte@2.1.1 +-- gridjs@6.2.0 +-- svelte-check@4.1.4 +-- svelte@5.17.5 +-- typescript@5.7.3 `-- vite@6.0.7 ...
需求
怀疑gridjs-svelte的事件监听器存在bug,希望避免使用GridJS的选择插件,同时寻求维护更活跃的Svelte表格替代组件。
内容的提问来源于stack exchange,提问作者T. Zack Crawford
相关产品推荐
相关产品推荐

