kendo UI -gantt 甘特图

背景：公司最近开发得碧海项目，有个工程管理模块，希望能够看到项目进展，用于管理进度。开发这个功能有很多方法，比如第三方工具，百科上有介绍。本项目是一个web项目，希望在线编辑。首先看了jquery ui的，但功能不够强大。况且公司已购买kendo ui，因此便使用了该框架。由于没有中文api，网上使用者也太少，因此相关文献少之又少。但是官方英文版还是挺详尽的。

官方api:https://docs.telerik.com/kendo-ui/api/javascript/ui/splitter  各种详尽参数配置，并提供编辑功能，即可展示效果

官方demo:https://demos.telerik.com/kendo-ui/gantt/index  提供一个详尽功能例子。可以在线编辑即可查看更改情况

这里只提供本项目实际使用的参数说明：

1，dataSource ：提供任务数据，即数据源，可以写死，也可以是一个jsonp的数据类型。两种类型都可以在文档中看到区别。read：即请求数据接口。通过请求的数据可以不用和官方回传的字段一致，即 字段名首字母无须大写，根据普通的java字段命名规则即可，否则页面会取不到回传数据，如：ID 回传直接写id 就可以。update，即甘特图中所有的更新数据操作接口。destory：销毁、删除数据的接口。create：创建一个数据的接口。通过这些接口可以完成对任务数据的操作。如果页面提供数据源，可以使用 文档中 事件中 add/edit/remove绑定相关事件

2，dependencies：提供了任务数据的依赖关系，即任务流向。该数据可以页面写死，也可以请求jsonp接口，字段按照java命名规则即可。也提供了编辑接口，和任务数据源原理一样

3，views：提供了视图展示类型，selected值设定用于初始化类型。可以是年、月、周、日、天。可以自己拓展，官方提供了月周日得。这边拓展了年，还可以添加，扩展如下：

views: [
    {
        type: "day",
        dayHeaderTemplate: "#=dataformate(start,4)#",
        timeHeaderTemplate: "#=dataformate(start,3)#"
    },
    { type: "week",
        weekHeaderTemplate: "#=dataformate(start,4)#~#=dataformate(kendo.date.addDays(end, -1),4)#",
        dayHeaderTemplate: "#=dataformate(start,2)#"
    },
    {
        type: "month",
        monthHeaderTemplate: "#=dataformate(start,5)#",
        weekHeaderTemplate:"#=dataformate(start,2)#~#=dataformate(kendo.date.addDays(end, -1),2)#",
        selected: true
    },
    {
        type: "year",
        monthHeaderTemplate: "#=dataformate(start,1)#",
        yearHeaderTemplate:"#=dataformate(start,0)#"
    }
]
方法：时间得格式组装

function dataformate(a,k) {
    var timeArry=[];
    _dates = new Date(a);
    Seconds= _dates.getSeconds();
    Minutes=_dates.getMinutes()
    hours=_dates.getHours();
    day= _dates.getDate();
    month=_dates.getMonth() + 1;
    year= _dates.getFullYear();
    //年0
    datatime=year+'年';
    timeArry.push(datatime);
    //月1
    datatime=month+'月';
    timeArry.push(datatime);
    //日2
    datatime=day+'日';
    timeArry.push(datatime);
    //时3
    datatime=hours+'时';
    timeArry.push(datatime);
    //年月日4
    datatime=year+'年'+month+'月'+day+'日';
    timeArry.push(datatime);
    //月日5
    datatime=year+'年'+month+'月';
    timeArry.push(datatime);
    //年月日时分秒6
    datatime=year+'-'+month+'-'+day+' '+hours+':'+Minutes+':'+Seconds;
    timeArry.push(datatime);
    return timeArry[k];
}

4，tooltip：用于设定鼠标悬浮任务数据提示信息，可以更改展示日期的格式，如：

　　tooltip: {

    visible: true,
    template: function (data) {
        data=data.task;
        return '<div class="k-task-details"><strong>'+data.title+'</strong><div class="k-task-pct">'+data.percentComplete+'</div><ul class="k-reset"><li>开始时间：'+dataformate(data.start,6)+'</li><li>结束时间：'+dataformate(data.end,6)+'</li></ul></div>'
    }
}


5,toolbar：用于更改页面操作编辑功能

6，messages：用于更改页面展示文字内容，可用于提示中文

7，editable：用于设置页面功能的操作状态，可精确到细节功能是否只读。其中template可以直接覆盖原始页面内容，自定义自己的编辑页面，如：
参数设置：调用“edit”kendo模板，更新只读

editable: {
      template: $("#editor").html(),
       update:false
   }

kendo模板：

<script id="editor" type="text/x-kendo-template">
    <h3>Edit meeting</h3>
    <p>
        <label>Title: <input name="title" /></label>
    </p>
    <p>
        <label>dddddddddddddd: <input data-role="datetimepicker" name="start" /></label>
    </p>
    <p>
        <label>End: <input data-role="datetimepicker" name="end" /></label>
    </p>
</script>




本项目只用到这么多参数，其他的参数功能api文档有详尽解释，可结合例子自定义自己的内容