甘特图的DHTMLX Multiselect下拉复选框过滤器

Question

我正在尝试使用下拉复选框列表筛选甘特图。这是我的密码

指数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处理程序，而当选项未选中/未选择时，永远不会删除以前添加的处理程序。我建议将组合框选择存储在某个范围变量中，并仅声明一个onBeforeTaskDisplay处理程序，该处理程序将根据该变量的值过滤gantt。

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

您的代码可能如下所示：

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];
    });
}