表列可见，使用函数确定列的可见性
表列可见，使用函数确定列的可见性
提问于 2019-08-31 23:22:14
我试图通过一个函数来设置列的可见性，以检查单元格中的值是否为真，然后该列是可见的，否则它是隐藏的，
在使用制表器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>回答 1
Stack Overflow用户
发布于 2019-09-01 00:32:59
通过一个函数设置列的可见性
根据制表器文档，列定义上的visible属性不接受一个函数--只是一个布尔值。
使用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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57742218
复制相关文章
相似问题
腾讯云开发者
