如何在 webix 数据表标题的 dateRangeFilter 内添加 N/A 按钮,以过滤掉该列中的 N/A 值?

问题描述 投票:0回答:1
`webix.ready(function(){
    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 %}
                            { content:"dateRangeFilter" }
                        ],
                        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>`;
                            }
                        }
                    {% endif %}
                },
            {% endfor %}
        ],
        select:"row",
        scroll:"xy",
        hidden:false,
        resizeColumn:true,
        headermenu:true,
        data: data,
    });
});
`

我的数据表正在使用 webix 库,我想在每个列特定数据范围过滤器中添加一个自定义 N/A 按钮,该按钮将过滤掉该列中的所有 N/A 值。目前,1900 年 1 月日期过滤掉了这些 N/A 值,但我们需要一个按钮(或任何其他直接方式)来执行此操作,而必须选择 1900 年 1 月的日期来查找 N/A 列值。`

javascript webix
1个回答
0
投票

尝试更改标题部分

                    header:[
                    { text:"{{ column|external_name }}",  css:"multiline" }, 
                    {% if column in program_date_fields %}
                        { content:"dateRangeFilter" },
                        { 
                            template: function(){ 
                                return "<button class='nabtn'>N/A</button>"; 
                            },
                            width: 50,
                            css: "webix_header_button",
                            click: function(){
                                var columnId = this.config.id;
                                grid.filter(function(obj){
                                    return obj[columnId] !== "N/A";
                                },{ column: columnId });
                            }
                        }
                    {% endif %}
                ],
© www.soinside.com 2019 - 2024. All rights reserved.