Question

我使用制表器创建带有数据的表。通过自定义函数，我可以使用Moments.js按日期范围过滤此数据。

一切正常，但是我想在表外创建输入以控制此过滤器（我只是不喜欢它在列标题内的外观，而不是我的设计样子）。我已经看到了执行此操作的功能，但它们并不是我使用的那种过滤器，我的知识不足以编辑这些功能以使其起作用...

为此，我在表外创建了两个输入，并且使它们始终与自定义过滤器的输入（使用js）具有相同的值。问题在于，即使Tabulator具有相同的值，Tabulator也没有获得过滤器的更改，因此它只显示更改日期之前的数据。

我正在使用制表器v4.2.5

日期范围过滤器代码

var dateFilterEditor = function(cell, onRendered, success, cancel, editorParams){
    var container = $("<span></span>")
    //create and style input
    var start = $("<input id='inicio' type='date' placeholder='Start'/>");
    var end = $("<input id='fin' type='date' placeholder='End'/>");
    container.append(start).append(end);
    var inputs = $("input", container);
    inputs.css({
        "padding":"4px",
        "width":"50%",
        "box-sizing":"border-box",
    })
    .val(cell.getValue());
    function buildDateString(){
        return {
            start:start.val(),
            end:end.val(),
        };
    }
    //submit new value on blur
    inputs.on("change blur", function(e){
        success(buildDateString());
    });
    //submit new value on enter
    inputs.on("keydown", function(e){
        if(e.keyCode == 13){
            success(buildDateString());
        }
        if(e.keyCode == 27){
            cancel();
        }
    });
    return container[0];
}
//custom filter function
function dateFilterFunction(headerValue, rowValue, rowData, filterParams){
    //headerValue - the value of the header filter element
    //rowValue - the value of the column in this row
    //rowData - the data for the row being filtered
    //filterParams - params object passed to the headerFilterFuncParams property
    var format = filterParams.format || "DD/MM/YYYY";
    var start = moment(headerValue.start);
    var end = moment(headerValue.end);
    var value = moment(rowValue, format)
    if(rowValue){
        if(start.isValid()){
            if(end.isValid()){
                return value >= start && value <= end;
            }else{
                return value >= start;
            }
        }else{
            if(end.isValid()){
                return value <= end;
            }
        }
    }
    return false; //must return a boolean, true if it passes the filter.
}

这是保持具有相同值的输入的代码

document.getElementById("date-start").addEventListener("input", function(){
    document.getElementById("inicio").value = this.value;
});

document.getElementById("inicio").addEventListener("input", function(){
    document.getElementById("date-start").value = this.value;
});

document.getElementById("date-end").addEventListener("input", function(){
    document.getElementById("fin").value = this.value;
});

document.getElementById("fin").addEventListener("input", function(){
    document.getElementById("date-end").value = this.value;
});

如何创建更新日期范围过滤器的函数？

0 个答案: