制表符列可见，使用函数来决定列的可见性 [关闭]答案

【问题标题】：tabulator column visible, using function to decide column visibility [closed]制表符列可见，使用函数来决定列的可见性 [关闭]
【发布时间】：2020-01-04 14:55:20
【问题描述】：

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

我正在使用制表符 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>

【问题讨论】：

这不是代码，它只是一个包含函数的对象，一个永远不会被调用的函数，除非这个对象被放置在某种上下文中，它被其他东西使用.这是什么背景？

标签： javascript jquery tabulator

【解决方案1】：

通过函数设置列的可见性

根据Tabulator documentation，列定义上的visible 属性不带函数——只有布尔值。

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

请参阅此 sn-p 示例。

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

【讨论】：