英文:
Keep selection when selected row is clicked with tabulator
问题
在Tabulator中，是否有一个选项，可以在点击行时保持行的选择状态？
例如 - 假设我们有一个包含3行的表格。当我点击第二行时，它会被选中。我希望再次点击第二行时不会取消选择它（但在使用selectable: 1时，点击其他行会取消选择它）。
英文:
Is there an option in tabulator to keep the selection of a row if it is clicked?
For example - assume we have a table of 3 rows. When I click the second row it selected. I would like that click on the second row again will not deselect it (but clicking other rows will deselect it when using selectable: 1).
答案1
得分: 1
您可以在rowClick事件上调用row.select()方法来实现您想要的功能。这将确保在单击时始终选择行，但仍然在单击另一行时取消选择。以下是一个示例：
const data = [
{ id: 1, name: 'Billy Bob', age: '12', gender: 'male', height: 1, col: 'red', dob: '', cheese: 1 },
{ id: 2, name: 'Mary May', age: '1', gender: 'female', height: 2, col: 'blue', dob: '14/05/1982', cheese: true },
{ id: 10, name: 'Margret Marmajuke', age: '16', gender: 'female', height: 5, col: 'yellow', dob: '31/01/1999' }
]
const table = new Tabulator('#example-table', {
data: data,
selectable: 1,
columns: [
{ title: 'Name', field: 'name' },
{ title: 'Age', field: 'age' },
{ title: 'Gender', field: 'gender' },
{ title: 'Height', field: 'height' },
{ title: 'Favourite Color', field: 'col' }
]
})
table.on('rowClick', (e, row) => {
row.select()
})
<link href="https://unpkg.com/tabulator-tables@5.5.0/dist/css/tabulator.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.5.0/dist/js/tabulator.min.js"></script>
<div id="example-table"></div>
这段代码允许您在单击表格行时选择行，并在单击另一行时取消选择行。
英文:
You can call row.select() method on the rowClick event to do what you are looking for. This will ensure the row is always selected on click but still deselected when another row is clicked. Here is an example:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const data = [
{ id: 1, name: 'Billy Bob', age: '12', gender: 'male', height: 1, col: 'red', dob: '', cheese: 1 },
{ id: 2, name: 'Mary May', age: '1', gender: 'female', height: 2, col: 'blue', dob: '14/05/1982', cheese: true },
{ id: 10, name: 'Margret Marmajuke', age: '16', gender: 'female', height: 5, col: 'yellow', dob: '31/01/1999' }
]
const table = new Tabulator('#example-table', {
data: data,
selectable: 1,
columns: [
{ title: 'Name', field: 'name' },
{ title: 'Age', field: 'age' },
{ title: 'Gender', field: 'gender' },
{ title: 'Height', field: 'height' },
{ title: 'Favourite Color', field: 'col' }
]
})
table.on('rowClick', (e, row) => {
row.select()
})
<!-- language: lang-html -->
<link href="https://unpkg.com/tabulator-tables@5.5.0/dist/css/tabulator.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.5.0/dist/js/tabulator.min.js"></script>
<div id="example-table"></div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论