制表师选择资格

Question

我正在尝试使用复选框列在制表器上使用选择资格，但我无法让它工作

运行下面的代码片段，有些行应该是可选的，有些不是，但它们都是。

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,
    selectableRowsCheck:function(row){
    //row - row component
    return row.getData().age > 18; //allow selection of rows where the age is greater than 18
}
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/5.5.2/css/tabulator.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/5.5.2/js/tabulator.min.js"></script>
<div id="tableDiv"></div>

Answer 1

您正在使用版本

5.5.2

，在此版本中，禁用某些行选择的道具称为

selectableCheck

。

碰撞到

5.6.1

将

selectableCheck

更改为预期的

selectableRowsCheck

。

---

• 5.5.2

  与

  selectableCheck

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,
    selectableCheck:function(row){
    //row - row component
    return row.getData().age > 18; //allow selection of rows where the age is greater than 18
}
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/5.5.2/css/tabulator.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/5.5.2/js/tabulator.min.js"></script>
<div id="tableDiv"></div>

• 5.6.1

  与

  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,
    selectableRowsCheck:function(row){
          return row.getData().age > 18; //allow selection of rows where the age is greater than 18
      }
});

<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>