你的位置:首页 > 软件开发 > Java > JQuery.Gantt(甘特图)开发

JQuery.Gantt(甘特图)开发

发布时间:2015-06-09 00:00:07
一、简介JQuery.Gantt是一个开源的基于JQuery库的用于实现甘特图效果的可扩展功能的JS组件库。 二、前端页面 2.1 资源引用 首先需要将下载到的源码中的CSS、IMG、JS等资源放入我们自己的项目中,然后在我们自己的页面中引 ...

JQuery.Gantt(甘特图)开发

一、简介

JQuery.Gantt是一个开源的基于JQuery库的用于实现甘特图效果的可扩展功能的JS组件库。

 JQuery.Gantt(甘特图)开发

 二、前端页面

 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 (#换成@)。

可能感兴趣文章

我的浏览记录