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处理程序，而在取消选中/取消选中某个选项时，永远不会删除以前添加的处理程序。我建议在一些范围变量中存储组合框选择，并且只声明一个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 Multiselect下拉式复选框过滤器

1 个答案: