选择资格不适用于制表符上的标题复选框

Question

我正在制表器中使用选择资格。

运行下面的代码片段，单击标题复选框，无论资格条件如何，它都会选择所有行。我该如何解决这个问题？

• 5.6.1

  使用

  selectableRows

  和

  selectableRowsCheck

进行演示

var tableDiv = document.querySelector("#tableDiv");

var tableData = [
    {id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
    {id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
    {id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
    {id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
    {id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"},
];

var columnConfig = [ //Define Table Columns
    //my checkbox selection column
   {
        title: "",
        formatter: "rowSelection",
        titleFormatter: "rowSelection",
        hozAlign: "center",
        headerSort: false,
       
    },

    {title:"Name", field:"name", width:150},
    {title:"Age", field:"age", hozAlign:"left"},
    {title:"Favourite Color", field:"col"},
    {title:"Date Of Birth", field:"dob", sorter:"date", hozAlign:"center"},
];

var myTable = new Tabulator(tableDiv, {
    data: tableData,
    columns: columnConfig,
    selectableRows: true,
    selectableRowsCheck:function(row){
          return row.getData().age > 18; //allow selection of rows where the age is greater than 18
      }
});

div.tabulator-unselectable > div:first-child > input {
    display: none;
}

<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
<div id="tableDiv"></div>

Answer 1

解决方法是监听 rowSelected 事件，如果该行不可选择，则在选择后取消选择该行。

myTable.on("rowSelected",(row)=>{
if (row.getData().age <= 18) {
  row.deselect();
}

});

• 5.6.1

  使用

  selectableRows

  和

  selectableRowsCheck

进行演示

var tableDiv = document.querySelector("#tableDiv");

var tableData = [
    {id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
    {id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
    {id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
    {id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
    {id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"},
];

var columnConfig = [ //Define Table Columns
    //my checkbox selection column
   {
        title: "",
        formatter: "rowSelection",
        titleFormatter: "rowSelection",
        hozAlign: "center",
        headerSort: false,
       
    },

    {title:"Name", field:"name", width:150},
    {title:"Age", field:"age", hozAlign:"left"},
    {title:"Favourite Color", field:"col"},
    {title:"Date Of Birth", field:"dob", sorter:"date", hozAlign:"center"},
];

var myTable = new Tabulator(tableDiv, {
    data: tableData,
    columns: columnConfig,
    selectableRows: true,
    selectableRowsCheck:function(row){
          return row.getData().age > 18; //allow selection of rows where the age is greater than 18
      }
});

myTable.on("rowSelected",(row)=>{
if (row.getData().age <= 18) {
  row.deselect();
}

});

div.tabulator-unselectable > div:first-child > input {
    display: none;
}

<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
<div id="tableDiv"></div>