Question

下面是我的代码：

const data = [];
Object.keys(json).forEach(key => {
    const jobStr = json[key];
    console.log(`=== historicalJobCallback jobStr: ${jobStr}`);

    const jobItem = jobStr.split(',');
    data.push({
        jobId: <a href={Utils.getLungoEndpoint() + jobItem[0]} target="_blank" rel="noopener noreferrer"
                  className={classes.link}>{jobItem[0]}</a>,
        jobName: jobItem[1],
        submittedBy: jobItem[2],
        submittedTime: jobItem[3],
        tenant: jobItem[4],
        business: jobItem[5]
    })
});

setState({
    columns: [
        {
            title: 'Job ID',
            field: 'jobId',
            render: rowData => <a href={Utils.getLungoEndpoint() + jobItem[0]} target="_blank"
                                  className={classes.link}>{jobItem[0]}</a>
        },
        {title: 'Job Name', field: 'jobName'},
        {title: 'Submitted By', field: 'submittedBy'},
        {title: 'Submitted Time', field: 'submittedTime'},
        {title: 'Tenant', field: 'tenant'},
        {title: 'Business', field: 'business'},
    ],
    data: data
});

您可以看到jobId列是一个链接，搜索功能适用于job ID列以外的其他列，我怀疑是由于job id文本包裹在链接中，我如何使其可搜索？

Answer 1

感谢@Yatrix的建议，使我的代码如下所示，搜索现在可用于链接：

Object.keys(json).forEach(key => {
    const jobItem = json[key].split(',');
    data.push({
        jobId: {
            name: jobItem[0],
            url: Utils.getLungoEndpoint() + jobItem[0]
        },
        jobName: jobItem[1],
        submittedBy: jobItem[2],
        submittedTime: jobItem[3],
        tenant: jobItem[4],
        business: jobItem[5]
    })
});
console.log(`=== historicalJobCallback data: ${JSON.stringify(data)}`);

setState({
    columns: [
        {
            title: 'Job ID',
            field: 'jobId',
            customFilterAndSearch: (term, rowData) => (rowData.jobId.name).indexOf(term) != -1,
            render: rowData => <Link href={rowData.jobId.url} target='_blank'
                                     color='secondary'>{rowData.jobId.name}</Link>
        },
        {title: 'Job Name', field: 'jobName'},
        {title: 'Submitted By', field: 'submittedBy'},
        {title: 'Submitted Time', field: 'submittedTime'},
        {title: 'Tenant', field: 'tenant'},
        {title: 'Business', field: 'business'},
    ],
    data: data
});

搜索不适用于材料表中的链接文本

1 个答案: