`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 列值。`
尝试更改标题部分
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 %}
],