免费JS甘特图组件dhtmlxgantt

加载中

完全免费JS网络计划图部件dhtmlxgantt

安裝

参照：https://docs.dhtmlx.com/gantt/desktop__install_with_bower.html

可应用NuGet、Bower、npm包管理工具安裝（运用在asp.net、nodejs等新项目上）。

Nuget

nuget install DHTMLX.Gantt

npm

npm install dhtmlx-gantt

或应用CDN、免费下载JS库引进（简易HTML运用）。

CDN

<link rel="stylesheet" href="http://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.css" 
    type="text/css"> 
<script src="http://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js"></script>

js

<script type="text/javascript" src="codebase/dhtmlxgantt.js"></script>  
<link rel="stylesheet" href="codebase/dhtmlxgantt.css">

复位

https://docs.dhtmlx.com/gantt/desktop__initializing_gantt_chart.html

<!DOCTYPE html>
<html>
<head>
   <script src="codebase/dhtmlxgantt.js"></script>
   <link href="codebase/dhtmlxgantt.css" rel="stylesheet">
</head>
<body>
    <div id="gantt_here" style='width:1001080x; height:401080x;'></div>
    <script type="text/javascript">
        gantt.init("gantt_here");
    </script>
</body>
</html>

复位流程

引入js
引入css
界定器皿div
js启用gantt.init复位

特性、模版、配备

参照：https://docs.dhtmlx.com/gantt/desktop__common_configuration.html
自定网络计划图，可完成自定展现（根据config和templates），自定互动（根据method和event）及其自定部件合理布局（layout）。
2个环境变量

gantt.config - 配备dates数据信息, scale标尺（本年度、月度等）, controls控制等的选择项
gantt.templates - 网络计划图中应用的dates数据信息 and labels标识的恢复出厂设置模版.

配备

API：https://docs.dhtmlx.com/gantt/apirefsgantt_props.html

实例

在API中搜索到该特性的各元素定义，参考应用。

gantt.scales = [
    { unit: "year", step: 1, format: "%Y" }
];
gantt.init("gantt_here");

常见问题

配备选择项（gantt.xxx）要在复位（gantt.init）前。

模版

API：https://docs.dhtmlx.com/gantt/apirefsgantt_templates.html

实例

比如应用模版恢复出厂设置每日任务名字，最先搜索到其原形界定。

gantt.templates.task_text=function(start, end, task){
    return task.text;
};

随后参照原形方式，改动。

gantt.templates.task_text=function(start,end,task){
    return "<b>名字:</b> " task.text ",<b> 责任人:</b> " task.users;
};
gantt.init("gantt_here");

常见问题：

模版的界定（gantt.templates.xxx）要在复位（gantt.init）前。

自定合理布局

https://docs.dhtmlx.com/gantt/desktop__layout_config.html

5.0及之上适用该配备。
默认设置合理布局为左边是每日任务信息内容目录，右边是网络计划图时间轴，自定合理布局可在右边、下边表明其他信息。
自定合理布局可表明資源目录和資源的网络计划图时间轴，但仅Pro版本号可以用。

默认设置合理布局为：

gantt.config.layout = {
    css: "gantt_container",
    rows:[
        {
           cols: [
            {
              // 默认设置任务列表  
              view: "grid",  
              scrollX:"scrollHor", 
              scrollY:"scrollVer"
            },
            { resizer: true, width: 1 },
            {
              // 默认设置网络计划图（时间轴）
              view: "timeline", 
              scrollX:"scrollHor", 
              scrollY:"scrollVer"
            },
            {
              view: "scrollbar", 
              id:"scrollVer"
            }
        ]},
        {
            view: "scrollbar", 
            id:"scrollHor"
        }
    ]
}

自定合理布局，改动gantt.config.layout就可以。

grid - 界定网络计划图的报表，表明每日任务的报表ID为grid;
timeline - 界定时间轴，表明每日任务时间轴ID为"timeline";
scrollbar - 下拉列表（报表和时间轴）.

事故处理

https://docs.dhtmlx.com/gantt/desktop__handling_events.html

客户拖动时间轴、加上每日任务等事情的解决。
假如仅作为网络计划图的展现，则可忽视该一部分，而且根据template、config配备屏蔽加上每日任务等作用。
但能够根据配备event，完成数据可视化排程表，在网络计划图时间轴和每日任务grid中加上每日任务、加上每日任务连接、改动每日任务特性，可拖动来升级任务时间等。
在网络计划图上所做实际操作，必须根据event的相对应方式，融合ajax递交到后台管理变更数据信息，不然页面刷新后内容丢失。

额外事情

gantt.attachEvent("onTaskClick", function(id, e) {
    alert("You've just clicked an item with id=" id);
});

清除

额外事情后回到事情ID，应用该ID可清除

//额外事情，回到事情ID
var eventId = gantt.attachEvent("onTaskClick", function(id, e) {
    alert("You've just clicked an item with id=" id);
});
//应用某一ID清除
gantt.detachEvent(eventId);

加上并清除全部

界定事情ID二维数组，加上时纪录ID，清除时循环系统解决。

// save handler ids when attaching events
var events = [];
events.push(gantt.attachEvent("onTaskClick", function(id, e) {
    alert("You've just clicked an item with id=" id);
});
events.push(gantt.attachEvent("onTaskDblClick", function(id, e) {
    alert("You've just double clicked an item with id=" id);
});
// detach all saved events
while (events.length)
   gantt.detachEvent(events.pop());

查验是不是有事情回应

gantt.attachEvent("onTaskClick", function(id, e) {
    alert("You've just clicked a task with id=" id);
});
gantt.checkEvent("onTaskClick"); //returns 'true'

事故处理涵数中撤销事情回应

回到false，则终断事情回应链。

gantt.attachEvent("onBeforeTaskChanged", function(id, mode, old_task){
    var task = gantt.getTask(id);
    if(mode == gantt.config.drag_mode.progress){
        if(task.progress < old_task.progress){
            dhtmlx.message(task.text   " progress can't be undone!");
            return false; 
        }
    }
    return true;
});

事情响应函数中浏览网络计划图目标

gantt.attachEvent("onTaskClick", function(id, e){
    parentId = this.getTask(id).parent;
});

this.getTask(id) 等方式参照方式 API。
https://docs.dhtmlx.com/gantt/api__refs__gantt_methods.html

方式

https://docs.dhtmlx.com/gantt/api__refs__gantt_methods.html

别的

Ajax等。

ajax

i18N多语言表达

gantt.i18n.setLocale({
   labels: {
      gantt_save_btn: "New Label",
      gantt_cancel_btn: "New Label"
   }
});

特性配备常见API

Ajax等。

autofit 报表列响应式

默认设置为false，若设定为true则均值遍布。
比如每日任务名字列內容较多，设定为true后则很有可能表明不全，设定为false后每日任务名字列会宽一些。

gantt.config.autofit = true;
gantt.config.grid_width = 500;

autoscroll 实际操作的每日任务或连接超过显示屏后全自动翻转到该部位

默认设置为true。

autoscroll_speed 全自动翻转的速率

默认设置为30ms。

gantt.config.autoscroll = true;
gantt.config.autoscroll_speed = 50;
gantt.init("gantt_here");

autosize 全自动调节网络计划图尺寸以融入显示屏

默认设置为false，即网络计划图可超过屏幕大小，超过后有下拉列表可拖动。
假如设定为xy，则垂直內容不够显示屏，则控制面板将变小至其高宽比，水准內容超出显示屏，则断开无下拉列表。

可取值："y" ( or true),"x", "xy"

gantt.config.autosize = "xy";
gantt.init("gantt_here");

autosize_min_width 水准全自动放缩时的最小宽度

初始值0.

gantt.config.autosize = "xy";
gantt.config.autosize_min_width = 800;
gantt.init("gantt_here");

bar_height 时间轴中的每日任务条的高宽比

初始值full。

gantt.config.bar_height = 30;
gantt.init("gantt_here");

buttons_left 任务详情弹出窗口中左下方的按键界定

默认设置 ["gantt_save_btn", "gantt_cancel_btn"]，储存和撤销

可自定按键，并界定该按键的事情响应函数。

<style>
    .complete_button{
        margin-top: 2px;
        background-image:url("common/v_complete.png");
        width: 20px;
    }
</style>
<script>
    gantt.locale.labels["complete_button"] = "Complete";
    gantt.attachEvent("onGanttReady", function(){                               
        gantt.config.buttons_left = ["gantt_save_btn","gantt_cancel_btn",           
            "complete_button"];                                                 
    });                                                                         
    gantt.init("gantt_here");
    gantt.attachEvent("onLightboxButton", function(button_id, node, e){
        if(button_id == "complete_button"){
            var id = gantt.getState().lightbox;
            gantt.getTask(id).progress = 1;
            gantt.updateTask(id);
            gantt.hideLightbox();
        }
    });
</script>

也可改动默认设置的按键

gantt.locale.labels.icon_save = "New Label";
gantt.locale.labels.icon_cancel = "New Label";
gantt.init("gantt_here");

buttons_right 弹出窗口的右下方按键

初始值：["gantt_delete_btn"]; 删掉

calendar_property 每日任务关联的日历

cascade_delete 联级删掉每日任务和关系

初始值为true

gantt.config.cascade_delete = false;
gantt.init("gantt_here");

click_drag 开启拖动作用

gantt.config.click_drag = {
    callback: function(
        startPosition,
        endPosition,
        startDate,
        endDate,
        tasksBetween,
        rowsBetween
    ){
        var parentId = gantt.config.root_id;
        if(rowsBetween.length){
            parentId = rowsBetween[0].id;
        }
        gantt.createTask({
            text: "新每日任务",
            start_date: gantt.roundDate(startDate),
            end_date: gantt.roundDate(endDate)
        }, parentId);
    },
    singleRow: true
};

columns 配备每日任务报表的列

默认设置列界定为：

// default columns definition
gantt.config.columns=[
    {name:"text",       label:"每日任务名字",  tree:true, width:'*' },
    {name:"start_date", label:"开始时间", align: "center" },
    {name:"duration",   label:"施工期",   align: "center" },
    {name:"add",        label:"" }
];
gantt.init("gantt_here");

软件

应用软件可拓展网络计划图的基本要素。
应用时，先引进软件，随后依照软件的应用配备网络计划图（config特性配备）。
https://docs.dhtmlx.com/gantt/api__gantt_plugins.html

gantt.plugins({
    quick_info: true,
    keyboard_navigation: true,
    undo: true
});

click_drag: true 根据拖动来建立和挑选每日任务
auto_scheduling: true 全自动排程表，依据每日任务的连接全自动摆列時间
critical_path: true 最短路径算法，Pro版适用
drag_timeline: true 拖动时间轴
overlay: true 在网络计划图上提升一个客户自定的层来显示
fullscreen: true 全屏幕
grouping: true 按每日任务的一切特性来排序每日任务
keyboard_navigation: true 应用快捷键来导航栏，建立每日任务、选定网络计划图等.
gantt.config.keyboard_navigation_cells = true;
multiselect: true 容许挑选好几个每日任务
quick_info: true 点一下每日任务或时间轴中的每日任务条后，表明一个任务详细并含有删掉和编写按键的浮窗
tooltip: true 提醒
undo: true 撤销、改版
marker: true 垂直标识线，高亮度当今日期或特殊日期

普遍模版API

date_grid 每日任务报表的开始时间列的內容

gantt.templates.date_grid = function(date, task, column){
   if(task && gantt.isUnscheduled(task) && gantt.config.show_unscheduled){
        return gantt.templates.task_unscheduled_time(task);
    }else{
        return gantt.templates.grid_date_format(date);
   }
}

drag_link 客户建立一个新每日任务连接时表明的tooltip提醒文字

gantt.templates.drag_link = function(from, from_start, to, to_start) {
    from = gantt.getTask(from);
    var text = "From:<b> "  from.text   "</b> "  (from_start?"Start":"End") "<br/>";
    if(to){
        to = gantt.getTask(to);
        text  = "To:<b> "   to.text   "</b> "  (to_start?"Start":"End") "<br/>";
    }
    return text;
};

drag_link_class 当客户拖动每日任务连接时运用在弹出窗口的css样式表

gantt.templates.drag_link_class = function(from, from_start, to, to_start) {
    var add = "";
    if(from && to){
        var allowed = gantt.isLinkAllowed(from, to, from_start, to_start);
        add = " "   (allowed ? "gantt_link_allow" : "gantt_link_deny");
    }
    return "gantt_link_tooltip"   add;
};

format_date 变换日期目标为日期字符串数组，以发给服务端

var dateToStr = gantt.date.date_to_str("%Y-%m-%d %H:%i");
gantt.templates.format_date = function(date){
    return dateToStr (date);
};

grid_blank 在树型列中子项的自定內容

gantt.templates.grid_blank = function(item) {
    return "<div class='gantt_tree_icon gantt_blank'></div>";
};

grid_file 设定树型列的子项目标志

gantt.templates.grid_file = function(item) {
    return "<div class='gantt_tree_icon gantt_file'></div>";
};

grid_folder 设定树型列的父项标志

link_class 每日任务连接线的款式

gantt.templates.link_class = function(link){
    return "";
};

progress_text 时间轴上每日任务条的进行一部分的文字

默认设置无法显示。默认设置尽在中间表明每日任务名字。

gantt.templates.progress_text=function(start, end, task){return "";};

改动提升在进行一部分表明进行的进展。

gantt.templates.progress_text = function (start, end, task) {
    return "<span style='text-align:left;'>"   Math.round(task.progress * 100)   "% </span>";
};

task_class 时间轴每日任务条的CSS

gantt.templates.task_class = function(start, end, task){return "";};

task_unscheduled_time 未定义時间的每日任务

时间轴每日任务条款式自定

https://docs.dhtmlx.com/gantt/samples/04_customization/04_task_styles.html

实例中界定了高中低档三个优先的每日任务，依据不一样的优先运用不一样的款式，优先高的运用为鲜红色。

还可以依据每日任务是不是逾期等运用不一样的款式，比如逾期为鲜红色，一般为翠绿色。

时间轴时间线的放缩（根据按键或鼠标中键）

融入显示屏、变大、变小：
https://docs.dhtmlx.com/gantt/samples/03_scales/13_zoom_to_fit.html

滚动鼠标放缩：
https://docs.dhtmlx.com/gantt/samples/03_scales/14_scale_zoom_by_wheelmouse.html

完成多语言表达（简体中文版）

https://docs.dhtmlx.com/gantt/desktop__localization.html

i18n 多语言表达 API：
https://docs.dhtmlx.com/gantt/api__gantt_i18n_other.html

方式一，立即设定

gantt.i18n.setLocale({
    labels: {
        new_task: "New task"
    }
});

方式二，界定随后设定

var localObject = {
    labels: {
        new_task: "New task"
    }
};
gantt.i18n.addLocale("lang", localeObject); 
gantt.i18n.setLocale("lang");

方式三，引入js后置放（强烈推荐）

gantt.i18n.addLocale("lang", localeObject); 
gantt.i18n.setLocale("lang");

完成全屏幕转换

https://docs.dhtmlx.com/gantt/desktop__fullscreen_mode.html

应用全屏幕软件

gantt.plugins({
    fullscreen: true
});

界定全屏幕按键并转换

gantt.expand(); 全屏幕方式
gantt.collapse(); 一般方式

<input id="fullscreen_button" type="button" value="全屏幕"/>
<script>
var button = document.getElementById("fullscreen_button");
    button.addEventListener("click", function(){
        if (!gantt.getState().fullscreen) { 
            gantt.expand();
        }
        else { 
            gantt.collapse();
        }
    }, false);
</script>

加上特殊日期的时间轴

比如标明当今日期，或标明某一特殊日期（deadline）。

引进软件

gantt.plugins({
		marker: true
	});

加上一条线

var dateToStr = gantt.date.date_to_str(gantt.config.task_date);
	var today = new Date();
	gantt.addMarker({
		start_date: today,
		css: "today",
		text: "今日",
		title: "今日: "   dateToStr(today)
	});

撤消、改版

<input value="撤消" type="button" onclick='gantt.undo()' style='margin:0 5px;'>
<input value="改版" type="button" onclick='gantt.redo()' style='margin:0 5px;'>

提醒

参照：https://docs.dhtmlx.com/gantt/desktop__tooltips.html
点一下每日任务grid或时间轴中的每日任务条后，在每日任务条上弹出来（悬架）弹出框。

开启软件

gantt.plugins({ 
        tooltip: true 
    });

应用template人性化內容

gantt.templates.tooltip_text = function(start,end,task){
		return "<b>每日任务:</b> " task.text "<br/><b>开始时间:</b> " dateToStr(task.start_date) "<br/><b>施工期:</b> "   task.duration;
	};

每日任务grid排序

默认设置依照每日任务的等级排序，也可自定依照每日任务的责任者、隶属类型等排序。

<input class="action" id="default" value="默认设置树排序" type="button" onclick="showGroups()" style='margin:0 5px;'>
<input class="action" id="user" value="默认设置树排序" type="button" onclick="showGroups('user')" style='margin:0 5px;'>

每日任务的三种种类

默认设置的三种每日任务种类：

一般每日任务（初始值），能够了解为每日任务，新项目的每日任务 type:gantt.config.types.task
新项目型每日任务，能够了解为新项目或每日任务组 type:gantt.config.types.project
里程碑式 type:gantt.config.types.milestone
project，每日任务的逐渐或完毕時间为自每日任务的最开始开始时间和最迟完毕時间，其本身界定的 start_date, end_date, duration 将被忽视。progress自定，不由自主子每日任务决策。
milestone 里程碑式，施工期为0.

本文由 发布，转载请注明出处，如有问题请联系我们！ 发布时间: 2021-05-18免费JS甘特图组件dhtmlxgantt