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

标签 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");
}

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

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

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

上面的代码不起作用,只能使用条件 2,因为条件 1 会被覆盖。所以我不能仅仅以这种方式或使用 if else 来设置我的条件。

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

最佳答案

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

关于javascript - 如何使用条件过滤 javascript 甘特图并处理空输入?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55258386/

相关文章:

javascript - 从 Google 表格中删除行

jquery - 阿拉伯斜体字体

Jquery:选择除具有特定属性的特定子元素之外的所有元素

css - 使 dhtmlx 模态窗口的大小适应屏幕大小

javascript - Python、Flask - 如何使用 DHTML uploader 加载文件

javascript - Heroku 在 nodejs 应用程序上构建失败,我该如何解决?

javascript - Html 模式文本输入验证 ng-pattern ="/^-?[0-99]+(.[0-99]{0,2})?$/"

javascript - 用addEventListener添加一个元素并在下一次迭代中获取它

php - Laravel,使用jquery ajax返回响应400错误

javascript - Bootstrap 下拉菜单隐藏在 dhtmlx 布局后面