如何使用条件过滤javascript甘特图并处理空输入?

时间:2019-03-20 10:19:40

标签: javascript jquery dhtmlx

我最近开始使用DHTMLX javascript based Gantt chart。我的过滤器出现了一些问题,我认为这些问题并不完全与图表本身有关,而与javascript有关。

因此,甘特语chart can be filtered通过通过if语句传递某些条件,并在满足这些条件时返回true。我所有的条件值都来自选择的输入,这些输入代表范围。

<input type="text" class="k-textbox" id="bedsStart" />
<input type="text" class="k-textbox" id="bedsEnd" />

<input type="text" class="k-textbox" id="deckStart" />
<input type="text" class="k-textbox" id="deckEnd" />

<button type="button" id="filterSort">Set Filters</button>

当您单击过滤器按钮时,将触发点击事件,并从输入字段中收集值。

$("#filterSort").on("click", function (e) {        
    let bedsStart = $('#bedsStart').val();
    let bedsEnd = $('#bedsEnd').val();
    let deckStart = $('#deckStart').val();
    let deckEnd = $('#deckEnd').val();

然后根据DHTMLX的文档将这些值作为条件传递给过滤器:

    gantt.attachEvent("onBeforeTaskDisplay", function (id, task) {
        if (task.crane >= craneStart && task.crane <= craneEnd) {
            return true
        }        
        return false;
    });
    gantt.init("ganttReport");
}

问题是,如果任何文本输入为空/空,则过滤器将失败并且不返回任何内容。是否可以通过不包含这些null值或动态指定要使用的过滤器来处理这些null值?

该过滤器似乎只能返回truefalse,因此具有多个if语句不起作用,因为它始终是最后一个与前一个语句一起提供结果的语句迭代被覆盖,即

if(condition1)
{
    return true
}
if(condition2)
{
    return true
}
return false

上面的代码将不起作用,只有condition2会被使用,因为condition1将被覆盖。因此,我不能只是以这种方式或使用if else来设定条件。

任何人都可以提供一种解决方案,以解决我如何将所有这些条件传递给该单个语句却处理空值的问题吗?

1 个答案:

答案 0 :(得分:1)

这是一个有效的示例,您可以尝试仅使用startDate / endDate或同时使用这两者: https://codesandbox.io/s/7qz1kw9vq

相关问题