我需要可选择父行并禁用对子行的选择。我正在使用带有勾选框 formatter
选项的可选行来选择行。我尝试使用 selectableCheck
,但它不适用于 tick formatter
。
如能提供任何帮助,我们将不胜感激。 请找到类似的代码框链接:我想禁用子元素的行选择复选框。
JSX
class Home extends Component {
render() {
const columns = [
{
formatter: "rowSelection",
titleFormatter: "rowSelection",
align: "center",
headerSort: false,
cellClick: function(e, cell) {
cell.getRow().toggleSelect();
console.log(cell.getRow(), cell.getRow().getTreeParent());
}
},
{ title: "Name", field: "name", width: 200 },
{ title: "Location", field: "location", width: 150 },
{ title: "Gender", field: "gender", width: 150 },
{ title: "Favourite Color", field: "col", width: 150 },
{
title: "Date Of Birth",
field: "dob",
align: "center",
sorter: "date",
width: 150
}
];
let data = [
{
name: "Oli Bob",
location: "United Kingdom",
gender: "male",
col: "red",
dob: "14/04/1984",
_children: [
{
name: "Mary May",
location: "Germany",
gender: "female",
col: "blue",
dob: "14/05/1982"
},
{
name: "Brendon Philips",
location: "USA",
gender: "male",
col: "orange",
dob: "01/08/1980",
_children: [
{
name: "Margret Marmajuke",
location: "Canada",
gender: "female",
col: "yellow",
dob: "31/01/1999"
},
]
}
]
},
{
name: "James Newman",
location: "Japan",
gender: "male",
col: "red",
dob: "22/03/1998"
}
];
let options = {
layout: "fitColumns",
dataTree: true,
dataTreeStartExpanded: true,
dataTreeElementColumn: "name"
};
return (
<ReactTabulator
ref={ref => (this.ref = ref)}
data={data}
columns={columns}
tooltips={true}
options={options}
/>
);
}
}
export default Home;
最佳答案
我没有探索过 react-tabulator
的 API(因为我的时间限制),但我注意到
cell.getRow().getTreeParent()
如果所选节点没有父节点,则返回 false
。因此,基于此,您需要返回 cell.getRow().toggleSelect()
。
cellClick: (e, cell) => {
// console.log("obj: ", cell.getRow()._row.data);
// console.log("getTreeParent: ", cell.getRow().getTreeParent());
// if (cell.getRow()._row.data.hasOwnProperty("_children")) {
// return cell.getRow().toggleSelect();
// }
console.log("does this Row have children ? ", cell.getRow().getTreeParent());
if (!cell.getRow().getTreeParent()) {
return cell.getRow().toggleSelect();
}
}
关于javascript - 使_children在数据树中不可选择-Tabulator React,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58813599/