如何在Webix DataTable表头的dateRangeFilter内添加N/A过滤按钮

实现步骤 #

1. 自定义日期范围过滤器组件：继承原生dateRangeFilter，添加N/A按钮并绑定匹配显示逻辑的过滤规则
2. 替换原有过滤器：在列配置中使用自定义过滤器，传递对应列ID
3. 同步状态管理：处理按钮激活状态与日期输入框的联动，避免状态混乱

修改后的完整代码 #

webix.ready(function(){
    // 自定义带N/A按钮的日期范围过滤器
    webix.ui.datafilter.naDateRangeFilter = webix.extend({
        init:function(view, config){
            // 调用原生过滤器初始化逻辑
            webix.ui.datafilter.dateRangeFilter.init.call(this, view, config);
            
            // 创建N/A按钮
            var naBtn = webix.ui({
                view:"button",
                value:"N/A",
                width:55,
                css:"webix_transparent",
                click:function(){
                    var columnId = this.config.columnId;
                    var grid = view;
                    
                    // 清除该列现有过滤规则
                    grid.filterByAll();
                    
                    // 应用N/A过滤规则：匹配空值、null或小于1901年1月1日的日期
                    grid.filter(function(obj){
                        const cellValue = obj[columnId];
                        return (cellValue === null || cellValue === "") || 
                               (cellValue && new Date(cellValue) < new Date(1901, 0, 1));
                    }, columnId);
                    
                    // 高亮激活按钮
                    naBtn.addCss("webix_button_active");
                    
                    // 清空日期输入框内容
                    const datePickers = this.getParentView().queryView("datepicker");
                    datePickers.forEach(picker => picker.setValue(""));
                }
            });
            
            // 将按钮插入过滤器容器
            this.getNode().appendChild(naBtn.getNode());
            naBtn.config.columnId = config.columnId;
            
            // 监听日期输入框变化，移除按钮激活状态
            const datePickers = this.getParentView().queryView("datepicker");
            datePickers.forEach(picker => {
                picker.attachEvent("onChange", function(){
                    naBtn.removeCss("webix_button_active");
                });
            });
        }
    }, webix.ui.datafilter.dateRangeFilter);

    grid = webix.ui({
        container:"tracker",
        editaction:"click",
        editable:true,
        view:"datatable",
        css:"webix_header_border", 
        leftSplit:1,
        columns:[
            {% for column in program_fields %}
                { 
                    id:"{{ column }}", 
                    header:[
                        { text:"{{ column|external_name }}",  css:"multiline" }, 
                        {% if column in program_date_fields %}
                            // 替换为自定义过滤器，传递当前列ID
                            { content:"naDateRangeFilter", columnId:"{{ column }}" }
                        {% endif %}
                    ],
                    sort:"date",
                    {% if column in editable_fields %}
                        editor:"date",  
                        fixed: true,
                    {% endif %}
                    template: function (obj, common) {
                        if (obj.{{ column }} === null || obj.{{ column }} === "") {
                            {% if column in program_na_fields %}
                                return `<div class="date-cell" >
                                            ${webix.i18n.dateFormatStr(obj.{{ column }})}
                                            {% if column in editable_fields %}
                                                <span class="webix_icon wxi-pencil">
                                                    - 
                                                    <input class='nabtn' type='button' value='N/A' na-date-column='{{ column }}' style='font-size: small;'>
                                                </span>
                                            {% endif %}
                                        </div>`;
                            {% else %}
                                {% if column in editable_fields %}
                                    return common.editIcon(obj, common);
                                {% else %}
                                    return "";
                                {% endif %}
                            {% endif %}
                        } else if (obj.{{ column }} < new Date(1901, 0, 1)) {
                            return "N/A";
                        } else {
                            return `<div class="date-cell">
                                        ${webix.i18n.dateFormatStr(obj.{{ column }})}
                                    </div>`;
                        }
                    }
                },
            {% endfor %}
        ],
        select:"row",
        scroll:"xy",
        hidden:false,
        resizeColumn:true,
        headermenu:true,
        data: data,
    });
});

关键说明 #

• 过滤器继承：基于原生dateRangeFilter扩展，保留原有日期范围过滤功能，仅新增N/A按钮
• 逻辑一致性：过滤规则与单元格模板中的N/A判断完全对齐，确保显示内容和过滤结果一致
• 状态同步：点击N/A按钮后自动清空日期输入框并高亮按钮；手动修改日期时移除按钮高亮，避免状态冲突
• 列ID传递：通过columnId配置项传递当前列标识，保证按钮能精准定位目标列

内容的提问来源于stack exchange，提问作者Rashmi