dhtmlx甘特图中的日期范围过滤器

8iwquhpp  于 2021-09-13  发布在  Java
关注(0)|答案(0)|浏览(220)

我需要在dhtmlx甘特图中显示自定义日期范围过滤器。该过滤器的值如下所示:

Last Year
Current Year
Last 6 Months
Last 2 Quarters
Next Year

当用户单击任何选项时,图表将根据该选项过滤掉。
这是我的html:

<script src="https://docs.dhtmlx.com/gantt/codebase/dhtmlxgantt.js?v=6.0.0"></script>
<link rel="stylesheet" href="https://docs.dhtmlx.com/gantt/codebase/dhtmlxgantt.css?v=6.0.0">

        <div style='height:20px; padding:5px;'>
            <div class="filters_wrapper" id="filters_wrapper">

                Search Projects:
                <input type="text" name="a12" value="" id="a12" oninput='gantt.$doFilter(this.value)' style="width: 100px;"/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

            </div>
        </div>
        <style>

        </style>
        <div id="gantt_here" style="width:100%; height:100%;"></div>
        <style type="text/css" media="screen">
            html, body { margin:0px; padding:0px; height:100%; overflow:hidden; }
        </style>

javascript:

var tasks = {data:[
    {id:1, text: "Development", start_date: "01-05-2025", duration: 5, "progress": 0.5},
    {id:2, text: "Coding", start_date: "01-05-2025", duration: 2, parent: 1, "progress": 0.5},
    {id:3, text: "Bug fixing", start_date: "12-05-2023", duration: 2, parent: 1, "progress": 0.8},
    {id:4, text: "Feature development", start_date: "05-05-2025", duration: 5, parent: 1, "progress": 0.45}
]}; 

gantt.config.columns = [
    {name: "text", label:"Text" , tree: true, width: 100},
    {name: "start_date", label: "Start time", align: "center",  width: 160} ,
    {name: "end_date", label: "End time", align: "center",  width: 160} ,

];

gantt.config.open_tree_initially = true;
        gantt.plugins({ 
            tooltip: true 
        }); 
        var filterValue = "";
        var delay;
        gantt.$doFilter = function(value){
            filterValue = value;
            clearTimeout(delay);
            delay = setTimeout(function(){
                gantt.render();
                gantt.$root.querySelector("[data-text-filter]").focus();

            }, 200)
        };

        var dateToStr = gantt.date.date_to_str(gantt.config.task_date);
        var markerId = gantt.addMarker({  
            start_date: new Date(), 
            css: "today", 
            text: "Now", 
            title: dateToStr(new Date()) 
        });
        gantt.getMarker(markerId); //->{css:"today", text:"Now", id:...}

        gantt.attachEvent("onTaskLoading", function(task){
            task.$open = true;
            return true;
        }); 

        gantt.init("gantt_here");
        gantt.parse(tasks);

        gantt.attachEvent("onBeforeTaskDisplay", function(id, task){
            if(!filterValue) return true;

            var normalizedText = task.text.toLowerCase();
            var normalizedValue = filterValue.toLowerCase();
            return normalizedText.indexOf(normalizedValue) > -1;
            if (compare_input(id)) {
        return true;
    }
    return false;
        });

有人能告诉我如何在dhtmlx甘特图中获取上述自定义日期范围筛选器吗

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题