理解Tabulator的默认行选择行为
tabulator是一个功能强大的交互式表格库，提供了多种行选择模式。当设置selectable: 1时，表格将启用单行选择模式：用户点击一行时，该行会被选中；如果点击另一行，则之前的行会被取消选中，新点击的行被选中。然而，在这种默认行为下，如果用户再次点击已经选中的行，该行将会被取消选择。在某些应用场景中，这种行为可能不符合用户预期，用户可能希望点击已选中的行时，其选中状态保持不变。
目标：优化已选行的点击行为
我们的目标是修改Tabulator的默认行为，使其在selectable: 1模式下，当用户点击一个已选中的行时，该行仍然保持选中状态，而不会被取消选择。同时，点击其他行时，仍应保持单行选择的逻辑，即新点击的行被选中，而之前选中的行被取消选中。
解决方案：利用rowClick事件重申选中状态
Tabulator提供了丰富的事件回调机制，其中rowClick事件在用户点击表格行时触发。我们可以利用这个事件，在每次行点击发生时，显式地调用该行的select()方法。这样，即使Tabulator内部逻辑在处理重复点击时尝试取消选择，我们的事件处理器也会立即将其重新设置为选中状态，从而达到保持选中状态的目的。
示例代码
以下是实现这一功能的完整代码示例，包括HTML结构和JavaScript逻辑：
Tabulator保持行选择状态
代码解析
-
HTML结构:
- 引入了Tabulator的CSS样式文件和JavaScript库文件。
- 定义了一个div元素，其id为example-table，Tabulator表格将在此容器中渲染。
-
JavaScript逻辑:
- 数据定义: data数组包含了表格将显示的数据。
-
Tabulator初始化:
- new Tabulator('#example-table', {...}) 创建了一个Tabulator实例，并将其绑定到id为example-table的div上。
- selectable: 1：这是关键配置，它告诉Tabulator只允许单行选择。
- columns：定义了表格的列结构，包括标题和对应的字段名。
-
rowClick事件监听:
- table.on('rowClick', (e, row) => { ... }) 注册了一个事件监听器，当用户点击表格的任何一行时，这个回调函数就会被执行。
- 回调函数接收两个参数：e（原生事件对象）和 row（被点击行的Tabulator行组件对象）。
- row.select()：这是解决方案的核心。在rowClick事件中，我们直接调用被点击行的select()方法。这个方法会强制将该行设置为选中状态。
工作原理
当用户点击一行时，Tabulator会首先处理其内部的行选择逻辑。如果该行已经被选中，并且selectable: 1，Tabulator默认会尝试取消其选中状态。然而，紧接着我们的rowClick事件处理器会被触发，并且其中row.select()方法会立即重新将该行标记为选中。由于row.select()是同步执行的，它会覆盖Tabulator内部可能发生的取消选择操作，从而确保被点击的行始终保持选中状态。
对于点击未选中行的情况，Tabulator会先取消当前选中行的状态（如果有），然后选中被点击的行。我们的rowClick处理器中的row.select()调用只是再次确认了这一操作，并不会产生冲突。
注意事项
- selectable: 1是前提: 这个解决方案是针对单行选择模式（selectable: 1）设计的。如果使用多选模式（例如selectable: true或selectable: 2），则可能需要调整逻辑以适应不同的选择行为。
- 性能影响: 对于包含大量行和频繁点击操作的表格，每次点击都强制调用row.select()通常不会带来显著的性能问题，因为Tabulator内部已经优化了行状态管理。
- 用户体验: 这种行为改变符合许多用户对单选列表的直观预期，即重复点击已选项目不应取消其选中状态。
总结
通过在Tabulator的rowClick事件中简单地调用row.select()方法，我们可以有效地修改selectable: 1模式下的默认行选择行为，实现点击已选行不取消选择的用户体验优化。这个方法简洁而高效，能够提升Tabulator表格在特定应用场景下的可用性和用户满意度。
