javascript - Bootstrap-table2 如何在字符串月份和日期上进行自定义文本搜索过滤器？

Question

我目前正在制作一个 BootstrapTable，其中有一列的 dataField 为生日，例如 10 月 3 日的“日/月”或“3/10”格式的字符串。我成功地制作了一个格式化程序，它将像“3/10”这样的每个字符串转换为在桌子上显示为像“October 3rd”这样的字符串。我想添加一个过滤器： textFilter 并且当前使用默认值。问题是，如果用户输入“October”，什么也没有出现。您在 10 月 3 日输入“10”以显示。我正在尝试实现一个自定义过滤器，这样如果用户输入像“Octo”这样的子字符串，则会显示 10 月生日的所有示例，并且将过滤非 10 月的日期。我怎样才能实现这样的事情？这是我第一次尝试在下面实现类似的东西。

filterByPrice = (filterVal, data) => {
        if (filterVal) {
            var fields = data.birthday.split('/');
            var month = parseInt(fields[1]);
            var day = parseInt(fields[0]);
            
            switch(month){
                case 1:
                    month = "January";
                    break;
                case 2:
                    month = "February";
                    break;
                case 3:
                    month = "March";
                    break;
                case 4:
                    month = "April";
                    break;
                case 5:
                    month = "May";
                    break;
                case 6:
                    month = "June";
                    break;
                case 7:
                    month = "July";
                    break;
                case 8:
                    month = "August";
                    break;
                case 9:
                    month = "September";
                    break;
                case 10:
                    month = "October";
                    break;
                case 11:
                    month = "November";
                    break;
                case 12:
                    month = "December";
            }
            var dateString = month + " " + day
            data.filter(dateString.includes(filterVal));
        }
        return data;

const {columns} = {
            columns: [{
                dataField: 'birthday',
                text: 'Birthday',
                filter: textFilter({
                    onFilter: this.birthdayFilter
                }),
                formatter: birthdayFormatter, //successfuly transforms "10/3" into "October 3rd" function.
            }]
        }

标签： javascriptbootstrap-4react-bootstrap

Answer 1

我想到了。原来有一个名为 filterValue 的参数可以根据格式化程序进行搜索。

{
    dataField: 'birthday',
    text: 'Birthday',          
    filter: textFilter(),
    filterValue: birthdayFormatter,
    formatter: birthdayFormatter
}