如何在gridjs中使用选择器自定义可搜索字段

Question

在gridjs中有一个在搜索字段中使用selector的示例。

const grid = new Grid({
columns: [
{
name: 'Name',
formatter: (cell) => cell.firstName
}, 
'Email',
'Phone Number'
],
search: {
selector: (cell, rowIndex, cellIndex) => cellIndex === 0 ? cell.firstName : cell
},
data: [
[{ firstName: 'John', lastName: 'MP' }, '[e-mail]', '(353) 01 222 3333'],
[{ firstName: 'Mark', lastName: 'Blue' }, '[e-mail]',   '(01) 22 888 4444'],
]
});

但是从这个例子中，不太清楚如何减少搜索到只有'Email'和'Phone Number'字段?

Answer 1

您必须指定搜索要运行的选择器。在本例中，只要搜索针对第一个单元格，即行cellIndex === 0，它就被指定为firstName。因此，如果希望针对特定的单元格/列进行搜索，则必须为其特定的单元格位置/索引编写条件。

下面是一个基于Email&Phone Number:

const grid = new Grid({
columns: [
{
name: 'Name',
formatter: (cell) => cell.firstName
}, 
'Email',
'Phone Number'
],
search: {
selector: (cell, rowIndex, cellIndex) => {
if (cellIndex === 1) return cell;

if (cellIndex === 2) return cell;
}
},
data: [
[{ firstName: 'John', lastName: 'MP' }, '[e-mail]', '(353) 01 222 3333'],
[{ firstName: 'Mark', lastName: 'Blue' }, '[e-mail]',   '(01) 22 888 4444'],
]
});

为简洁起见:

const grid = new Grid({
columns: [
{
name: 'Name',
formatter: (cell) => cell.firstName
}, 
'Email',
'Phone Number'
],
search: {
selector: (cell, rowIndex, cellIndex) => {
if (cellIndex !== 0) return cell;
}
},
data: [
[{ firstName: 'John', lastName: 'MP' }, '[e-mail]', '(353) 01 222 3333'],
[{ firstName: 'Mark', lastName: 'Blue' }, '[e-mail]',   '(01) 22 888 4444'],
]
});

在后一个示例中，我对除第一个单元格(Name字段)之外的所有单元格索引/字段匹配搜索选择器。希望这对你有帮助!:)