用于甘特图的 DHTMLX 多选下拉复选框过滤器

Question

我正在尝试使用下拉复选框列表来过滤我的甘特图。这是我的代码

index.html

<label class="text-primary" for="department">Select by Departments: </label>
    <select id="department" style="width:200px; height:20px; " mode="checkbox">
                            <option value="ALL" selected="1" >ALL</option>
                            <option value="ARTIST">ARTIST</option>
                            <option value="ADMIN">ADMIN</option>
                            <option value="LEAD">LEAD</option>
                            <option value="HR">HR</option>
                            <option value="PRODUCTION">PRODUCTION</option>
                            <option value="MANAGEMENT">MANAGEMENT</option>
                            <option value="TECHNOLOGY">TECHNOLOGY</option>
                        </select>

函数

<script>
            var myCombo;
            function checkbox_department() {
            myCombo = dhtmlXComboFromSelect("department");
            myCombo.attachEvent("onCheck", function(value, state){
                gantt.attachEvent("onBeforeTaskDisplay", function (id, task) {
                    var department_value = value

                     if (task.job_category == department_value || department_value == 'ALL') {
                     console.log(value);
                         return true;
                    }
                 });
                 gantt.render();
            });

            }

        </script>

job_category 来自 JSON 文件。

到目前为止，我设法使用我选中的任何第一个复选框来过滤甘特图，但是当我选中另一个复选框时，假设我选中了艺术家和制作，一切都消失了，它会在控制台日志中显示

3PRODUCTION
7ARTIST
2PRODUCTION
52ARTIST
PRODUCTION
51ARTIST
2PRODUCTION
3ARTIST
PRODUCTION
22ARTIST

结果会是这样，如果我只在此处打印屏幕会更容易，但我正在使用我的办公室桌面并且文件上传被阻止。谁能帮我解决这个问题，在此先感谢

Answer 1

每次用户检查组合值时，您的组合都会添加一个 onBeforeTaskDisplay 处理程序，而不会在选项变为 unchecked/unselected 时删除之前添加的处理程序。我建议将组合框选择存储在某个范围变量中，并仅声明一个 onBeforeTaskDisplay 处理程序，该处理程序将按该变量的值过滤甘特图。

然后，在组合的 onCheck 处理程序中，您使用组合的选择状态更新范围变量并调用甘特图重绘以调用过滤

您的代码可能如下所示：

var myCombo;
function checkbox_department() {
    var department_value = 'ALL';

    myCombo = dhtmlXComboFromSelect("department");
    myCombo.attachEvent("onCheck", function(value, state){
        department_value = value;// put combo value into scope variable
        gantt.render();// and repaint gantt
    });

    // filter gantt by value of the scope variable
    gantt.attachEvent("onBeforeTaskDisplay", function (id, task) {
        if (task.job_category == department_value || department_value == 'ALL') {
            console.log(value);
            return true;
        }
    });
}

这是一个简化的演示，以防我对解释和代码示例有误 http://docs.dhtmlx.com/gantt/snippet/b6053d50

更新：

如果您有一个多选组合，您可能需要一些不同的代码。以下内容应该有效：

var myCombo;
function checkbox_department() {
    var department_value = {'ALL': true};

    myCombo = dhtmlXComboFromSelect("department");
    myCombo.attachEvent("onCheck", function(value, state){
        var values = myCombo.getChecked();
        department_value = {};// put combo value into scope variable
        for(var i = 0; i < values.length; i++){
            department_value[values[i]] = true;// build hash for easy check later
        }
        gantt.render();// and repaint gantt
    });

    // filter gantt by value of the scope variable
    gantt.attachEvent("onBeforeTaskDisplay", function (id, task) {
        if(department_value['ALL'])
            return true;

        return !!department_value[task.job_category];
    });
}

用于甘特图的 DHTMLX 多选下拉复选框过滤器

DHTMLX Multiselect Drop-down Checkbox filter for Gantt Chart

javascript

html

checkbox

dhtmlx

gantt-chart