javascript - 制表符列可见，使用函数决定列可见性

Question

已关闭。此问题需要 debugging details 。目前不接受答案。

---

编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem 。这将有助于其他人回答问题。

已关闭 3 年前。

Improve this question

我正在尝试通过函数设置列可见性，以检查单元格中的值是否为真，则该列可见，否则隐藏，

我正在使用 tabulator JS这部分基于行中的列值，如下所示我的计划是，如果ageRange的值> 25，则该列可见，但没有成功，我尝试了以下代码:

   



    const table = new Tabulator("#example-table", {
      data: tabledata,
      columns: [{
          title: "Name",
          field: "name",
          width: 200
        },
        {
          title: "Gender",
          field: "gender",
          visible: false
        },
     {
          title: "Age",
          formatter: AgeIcon,
          width: 40,
          headerSort: false,
          visible: function (e, cell) {
            return cell.getRow().getData().ageRange > 25;
          }
        },
    ```
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://unpkg.com/tabulator-tables@4.4.1/dist/css/tabulator.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.4.1/dist/js/tabulator.min.js"></script>
    <div id="example-table"></div>

Answer 1

set the column visibility though a function

根据Tabulator documentation ，列定义中的 visible 属性不采用函数，仅采用 bool 值。

使用hideColumn函数根据数据隐藏列。

请参阅此代码片段的示例。

//define data
const tabledata = [{
    id: 1,
    name: "Oli Bob",
    location: "United Kingdom",
    gender: "male",
    rating: 1,
    col: "red",
    dob: "14/04/1984"
  },
  {
    id: 2,
    name: "Mary May",
    location: "Germany",
    gender: "female",
    rating: 2,
    col: "blue",
    dob: "14/05/1982"
  },
  {
    id: 3,
    name: "Christine Lobowski",
    location: "France",
    gender: "female",
    rating: 0,
    col: "green",
    dob: "22/05/1982"
  },
  {
    id: 4,
    name: "Brendon Philips",
    location: "USA",
    gender: "male",
    rating: 1,
    col: "orange",
    dob: "01/08/1980"
  },
  {
    id: 5,
    name: "Margret Marmajuke",
    location: "Canada",
    gender: "female",
    rating: 5,
    col: "yellow",
    dob: "31/01/1999"
  },
  {
    id: 6,
    name: "Frank Harbours",
    location: "Russia",
    gender: "male",
    rating: 4,
    col: "red",
    dob: "12/05/1966"
  },
  {
    id: 7,
    name: "Jamie Newhart",
    location: "India",
    gender: "male",
    rating: 3,
    col: "green",
    dob: "14/05/1985"
  },
  {
    id: 8,
    name: "Gemma Jane",
    location: "China",
    gender: "female",
    rating: 0,
    col: "red",
    dob: "22/05/1982"
  },
  {
    id: 9,
    name: "Emily Sykes",
    location: "South Korea",
    gender: "female",
    rating: 1,
    col: "maroon",
    dob: "11/11/1970"
  },
  {
    id: 10,
    name: "James Newman",
    location: "Japan",
    gender: "male",
    rating: 5,
    col: "red",
    dob: "22/03/1998"
  },
];

//define table
const table = new Tabulator("#example-table", {
  data: tabledata,
  columns: [{
      title: "Name",
      field: "name",
      width: 200
    },
    {
      title: "Gender",
      field: "gender",
      visible: false
    },
    {
      title: "Rating",
      field: "rating",
      width: 80,
      bottomCalc: "avg",
      visible: true
    },
    {
      title: "Favourite Color",
      field: "col"
    },
    {
      title: "Date Of Birth",
      field: "dob",
      align: "center",
      sorter: "date"
    }
  ],
});
const ratings = tabledata.map(d => d.rating);
const averaveRating = ratings.reduce((p, c) => p + c) / ratings.length;

//hide the "rating" column if low average rating
if (averaveRating < 2.5) {
  table.hideColumn("rating");
  console.log(`Average rating is ${averaveRating}, column hidden`);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://unpkg.com/tabulator-tables@4.4.1/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.4.1/dist/js/tabulator.min.js"></script>
<div id="example-table"></div>