在制表器中如何使用选定的数据进行下行计算
在制表器中如何使用选定的数据进行下行计算
提问于 2022-04-25 15:01:23
我有一个相当简单的表，目前正在使用底部计算器格式化程序：
export let myTable = new Tabulator("#my-table", {
columns:[
{title:"ID", field:"id", headerSort:false, visible:false, responsive:2},
{formatter:"rowSelection", titleFormatter:"rowSelection", align:"center", bottomCalc:"sum", hozAlign:"center", headerSort:false, cellClick:function(e, cell){
cell.getRow().toggleSelect();
}},
{title:"Name", field:"address", width:300, bottomCalc:"count"},
{title:"My Data", field:"mydata", bottomCalc:avNoOutsiders},
],
});export let avNoOutsiders = function(values, data, calcParams){
// filter outliers
let myArray = filterOutliers(values);
// filter any null or falsy values
let av = average(myArray);
return av
}代码并不是非常重要，但我想要做的是允许用户取消选择一行，以从计算中排除值。
问题是，我不知道如何在这里访问isSelected()函数，我认为这只是我可以访问的row()。我可以访问values (所有列值)，但是那里没有选择数据，我可以访问data --整个表，但是无法确定它是哪一行，或者它是否被选中。
我目前的思维方向是
- using
bottomCalcParams.我不明白我怎么会这么做。此函数返回一个getRow() is not a function错误：
function cellIsSelected(cell){
selected = cell.getRow().isSelected()
return {isSelected:selected};
}或
- Writing每个底部calc的单独函数。，这不工作，因为我不能调用表calcs内的表-如果我尝试将其放入列calc函数中，
var selectedRows = table.getSelectedRows()会导致一个循环错误。我可以引用表中的表。
有什么想法吗?如何访问行选择数据来进行列计算？
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-04-25 23:10:40
可能有一种更简单的方法，但实现这一目标的一种方法是创建一个隐藏的占位符列，该列可以在行选择/取消选择时更新为true/false。然后，可以在bottomCalc函数中使用此隐藏列的值来排除未选中的行。下面是一个示例，在这个示例中，选择一行将重新触发底部计算和所有选择的平均年龄：
const dataSet1 = [
{ id: 1, name: 'Billy Bob', age: '21', gender: 'male' },
{ id: 2, name: 'Mary May', age: '5', gender: 'female' },
{ id: 3, name: 'Christine Lobowski', age: '42', gender: 'female' },
{ id: 4, name: 'Brendon Philips', age: '80', gender: 'male' },
]
const calcAvg = (values, data, calcParams) => {
let selected = data.filter((row) => row.isSelected)
values = selected.map((i) => i.age)
let avg = values.reduce((a, b) => Number(a) + Number(b), 0) / values.length
return avg ? avg : ''
}
const table = new Tabulator('#table', {
data: dataSet1,
columns: [
{
formatter: 'rowSelection',
titleFormatter: 'rowSelection',
cellClick: (e, cell) => {
cell.getRow().toggleSelect()
}
},
{ title: 'Name', field: 'name' },
{ title: 'Age', field: 'age', bottomCalc: calcAvg },
{ title: 'Gender', field: 'gender' },
{ title: '', field: 'isSelected', visible: false } // Selection placeholder column
]
})
const selection = (row) => {
row.update({ isSelected: row.isSelected() })
table.recalc()
}
table.on('rowSelected', selection)
table.on('rowDeselected', selection)<html>
<head>
<link href="https://unpkg.com/tabulator-tables@5.2.2/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.2.2/dist/js/tabulator.min.js"></script>
</head>
<body>
<div id="table"></div>
</body>
<html>
Stack Overflow用户
发布于 2022-04-26 09:44:39
@Tim的回答给了我95%的机会。
请注意，他的一些答复在表V4.9上不起作用：
const selection = (row) => {
row.update({ isSelected: row.isSelected() })
table.recalc()
}
table.on('rowSelected', selection)
table.on('rowDeselected', selection)我想找出解决这个问题的方法可能比更新要花更长的时间，所以我投入并更新到5.2.2，这比预期的要少。我有多个列要计算，所以不是为每个列运行不同的函数，而是通过bottomCalcParams将字段名传递到函数中，因此：
const calcAvg = (values, data, calcParams) => {
let selected = data.filter((row) => row.isSelected)
// Add your calcParams here:
values = selected.map((i) => i[calcParams.field])
let avg = values.reduce((a, b) => Number(a) + Number(b), 0) / values.length
return avg ? avg : ''
}
const table = new Tabulator('#table', {
data: dataSet1,
columns: [
{
formatter: 'rowSelection',
titleFormatter: 'rowSelection',
cellClick: (e, cell) => {
cell.getRow().toggleSelect()
}
},
{ title: 'Name', field: 'name' },
{ title: 'Age', field: 'age', bottomCalc: calcAvg, bottomCalcParams:{field:"age"} },
{ title: 'Remaining Teeth', field: 'teeth', bottomCalc: calcAvg, bottomCalcParams:{field:"teeth"} },
{ title: 'Personality Quirks', field: 'quirks', bottomCalc: calcAvg, bottomCalcParams:{field:"quirks"} },
{ title: 'Gender', field: 'gender' },
{ title: '', field: 'isSelected', visible: false } // Selection placeholder column
]
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72001623
复制相关文章
相似问题
腾讯云开发者
