Grid.js 原生环境中通过plugins增加选行功能
Grid.js has an internal pipeline which takes care of processing, filter and refining the raw data. You can get access to the current pipeline by using config.pipeline (via the useConfig hook) or you can use the useSelector hook to subscribe to a specific part of Grid.js state.
典型的grid.js plugins模板如下
function TotalSalaryPlugin() {
const [total, setTotal] = useState(0);
const data = useSelector((state) => state.data);
useEffect(() => {
if (!data) return;
setTotal(data.toArray().reduce((prev, row) => prev + row[1], 0));
}, [data]);
return h('b', {}, `Total: $${total.toLocaleString()}`);
}
注意点：
使用selection插件需要采用正确的引入，我因为引用的是umd格式的
组件的名称为 gridjs.plugins.selection.RowSelection
<!DOCTYPE html>
<html>
<head>
<title>grid simple</title>
<script type="text/javascript" src='js/gridjs.js'></script>
<script type="text/javascript" src='js/selection.umd.js'></script>
<link
href="css/mermaid.min.css"
rel="stylesheet"
/>
</head>
<body>
<div id="wrapper"></div>
<script type="text/javascript">
const grid = new gridjs.Grid({
columns: [
{
id: 'awesomeCheckbox',
name: 'Select',
plugin: {
component: gridjs.plugins.selection.RowSelection
}
},
'Name', 'Email', 'Phone Number'],
sort: true,
data: [
['John', 'john@example.com', '(353) 01 222 3333'],
['Mark', 'mark@gmail.com', '(01) 22 888 4444']
]
}).render(document.getElementById("wrapper"));
grid.config.store.subscribe(function (state) {
console.log('checkbox updated', state.rowSelection);
})
</script>
</body>
</html>
辅助功能(排序):
sort: true,
事件处理：
grid.config.store.subscribe(function (state) {
console.log('checkbox updated', state.rowSelection);
})
运行如下
887
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
