一、简介JQuery.Gantt是一个开源的基于JQuery库的用于实现甘特图效果的可扩展功能的JS组件库。 二、前端页面 2.1 资源引用 首先需要将下载到的源码中的CSS、IMG、JS等资源放入我们自己的项目中,然后在我们自己的页面中引 ...
一、简介
JQuery.Gantt是一个开源的基于JQuery库的用于实现甘特图效果的可扩展功能的JS组件库。
二、前端页面
2.1 资源引用
首先需要将下载到的源码中的CSS、IMG、JS等资源放入我们自己的项目中,然后在我们自己的页面中引用需要的资源文件。
CSS样式文件
<link rel="stylesheet" href="css/style.css" /> |
JS脚本文件
<script src='/images/loading.gif' data-original="js/jquery-1.8.2.min.js"></script> <script src='/images/loading.gif' data-original="js/jquery.fn.gantt.js" charset ="GB2312"></script> <script src='/images/loading.gif' data-original="js/jquery.cookie.js"></script> //任务甘特图中没有使用cookies所以不需要引用jquery.cookie.js。 |
备注:
1.jquery.cookie.js 用于cookie管理,如果在甘特图中使用cookie则要在页面 中引用该js文件,否则不需要。任务甘特图中没有使用cookies所以不需要引用
2.jquery.fn.gantt.js JQuery.Gantt组件的核心脚本文件,所有的甘特图功能代码都在这个文件中。
3.如果需要甘特图中显示中文,则需要在js文件引用中加上charset特性并设置为GB2312,否则中文内容将显示为乱码。
2.2 页面布局
在需要显示甘特图的地方加入以下这个div。
<div ></div> //用于显示甘特图(如果不更改源码的话此div的class要为“gantt” 建议不要修改此calss名字,如果修改的话,css与js中都要做相应的修改。) |
三、组件配置
3.1 Gantt 配置
$(".selector").gantt({ source:"ajax/task.json", scale:"weeks", minScale:"weeks", maxScale:"months", onItemClick:function(data){ alert("Item clicked - show some details");}, onAddClick:function(dt, rowId){ alert("Empty space clicked - add an item!");}, onRender:function(){ console.log("chart rendered");}}); 参数 | 默认值 | 接收类型 | source | null | Array, String (url) | itemsPerPage | 7 | Number | months | ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"] | Array | dow | ["S", "M", "T", "W", "T", "F", "S"] | Array | navigate | "buttons" | String ("buttons","scroll") | scale | "days" | String | maxScale | "months" | String | minScale | "hours" | String | waitText | "Please Wait..." | String | onItemClick: | function (data) { return; } | 有数据范围内的点击事件 | onAddClick | function (dt, rowId) { return; } | 无数据范围内的点击事件 | onRender | function () { return; } | 渲染事件 | useCookie | false | 如果需要使用cookie则需要引用JS脚本文件:
原标题:JQuery.Gantt(甘特图)开发
关键词:jquery
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。
|
|