下一场在我们友好的页面中引用必要的能源文件,    工作表达结构永利官方网站 (WBS)

① 、Twproject Gantt甘特图介绍

    Twproject Gantt 是一款基于 jQuery
开发的甘特图组件,也足以创制其余图表,例如任务树(Task
Trees)。内置编辑、缩放和 CSS 皮肤等作用。更主要的是,它是免费开源的。

    官网地址是:https://gantt.twproject.com/ 源码能够从github下载:

永利官方网站 1

JQuery.Gantt(甘特图)开发,jquery.gantt甘特图

一、简介

JQuery.Gantt是3个开源的依照JQuery库的用来落到实处甘特图效果的可扩展功效的JS组件库。

 永利官方网站 2

 贰 、前端页面

 2.1 财富引用

    首先供给将下载到的源码中的CSS、IMG、JS等能源放入我们温馨的档次中,然后在大家温馨的页面中引用需求的财富文件。

 CSS样式文件

<link rel="stylesheet" href="css/style.css" />

 JS脚本文件

<script src="js/jquery-1.8.2.min.js"></script>

<script src="js/jquery.fn.gantt.js" charset ="GB2312"></script>

<script src="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 class="gantt"></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.cookie.js 

scrollToToday

true

Boolean

 

 

 3.2 Source 配置

 

source:[{

        name:”Example”,

        desc:”Lorem ipsum dolor sit amet.”,

        values:[…]}]

参数

默认值

收纳类型

备注

name

null

String

每一行最左侧的一列以粗体展现

desc

null

String

每一行左边第3列

values

null

Array

甘特图日期范围项

 

 

 3.3 Value 配置

 

values:[{

        to:”/Date(1328832000000)/”,from:”/Date(1333411200000)/”,

        desc:”Something”,

        label:”Example Value”,

        customClass:”ganttRed”,

        dataObj: foo.bar[i]}]

参数

接到类型

备注

to

String (Date)

甘休时间,以阿秒为换算单位

from

String (Date)

始发时间,以微秒为换算单位

desc

String

鼠标悬停展现文本

label

String

甘特项彰显文本

customClass

String

甘特项的自定义class

dataObj

All

三个直接使用于甘特项的数额对象

 

 

3.4 代码结构解析:

 

 $.fn.gantt = function (options):甘特图部件对象

 基础设置项

 cookieKey:cookie的键

 scales:时间限定的级别 例如:[“hours”, “days”, “weeks”, “months”]

 settings:部件设置集

 source:数据源

 itemsPerPage:分页的每页数据行数

 months:列头处月份名称

 dow:列头处星期名称

 startPos:私下认可开首地方日期

 navigate:底部导航,buttons为按钮式的,scroll为滑块式的

 scale:甘特图每一列的时日限定

 use库克ie:是不是采用cookie,就算应用供给引用jquery.cookie.js

 maxScale:最大时间范围

 minScale:最刻钟间限定

 waitText:等待晋升文本

 onItemClick:有数量范围内点击事件

 onAddClick:无多少范围内点击事件

 onRender:渲染事件

 scrollToToday:设置是不是滚动到明天

 接纳器方法(a:成分,i:索引,m:值): $.extend($.expr[“:”], {});

 findday:以飞秒为时间单位合作一个钦命的日期

 findweek:以皮秒为时间单位合营二个钦命的周

 findmonth:以皮秒为时间单位同盟二个点名的月

 日期原型

 Date.prototype.getWeekId:获取weekid用于标识week的div的id特性,再次来到字符串,格式为dh-YYYY-WW,当中的ww是一年中的第几周

 Date.prototype.genRepDate:按部件设置属性中scale的值获取时间限定,以秒为时间单位

 Date.prototype.getDayOfYear:获取日期在一年中的第几天

 Date.prototype.getWeekOfYear:获取日期在一年中的第几周

 Date.prototype.getDaysInMonth:获取日期所在月份的运气

 Date.prototype.hasWeek:假若日期驻留在一周的边际,再次回到真

 Date.prototype.getDayForWeek:重返一周的启幕日期的日期对象

 Grid管理器(负责导航和渲染):core

 elementFromPoint:获取位于钦命点的最高处的因素

 create:创制图表

 init:开始化视图,计算行数、页数、可知的初阶时间与停止时间

 render:渲染grid

 leftPanel:创设左边Panel

 dataPanel:成立左边数据Panel

 rightPanel:创制右边底部Panel

 navigation:导航

 createProgressBar:创立进度条

 markNow:移除”wd“class添加”today“class到方今的scale形式

 fillData:填充图表,解析数据并填充到panel

 navigateTo:导航到

 navigatePage:导航到钦点的页面

 zoomInOut:变更空间轴级次(zoom)

 mouseScroll:通过鼠标移动图表

 wheelScroll:通过鼠标滚轮移动图表

 sliderScroll:通过滑块控制图表

 scrollPanel:更新滚动panel的margin

 synchronizeScroller:同步滚动

 repositionLabel:重新定位数据标签

 waitToggle:切换等待

 实用功用:tools

 get马克斯Date:重返最大可能的日期在scale值的正规化下

 getMinDate:再次来到最小或许的日期在scale值的正式下

 parseDateRange:重回3个日子对象数组介于from和to之间,时间单位为天

 parseTimeRange:重返3个日子对象数组介于from和to之间,时间单位为小时

 parseWeeksRange:重临一个日子对象数组介于from和to,时间单位为周

 parseMonthsRange:重临二个日子对象数组介于from和to,时间单位为月

 dateDeserialize:从字符串反系列化成日期

 genId:用日期成立ID

 getCellSize:获取当前单元格的轻重

 getRightPanelSize:获取当前右panel的轻重缓急

 getPageHeight:获取当前页面包车型地铁可观

 getProgressBarMargin:获取当前进程条的margin大小

分选扩充:this.each(function () {};);

http://www.bkjia.com/jQuery/1012929.htmlwww.bkjia.comtruehttp://www.bkjia.com/jQuery/1012929.htmlTechArticleJQuery.Gantt(甘特图)开发,jquery.gantt甘特图
① 、简介
JQuery.Gantt是2个开源的依照JQuery库的用来落到实处甘特图效果的可扩充功效的JS组件库。…

贰 、扩充成效一:code自动层级编码,知足wbs编码供给

    工作分解结构 (WBS)
代码是项指标辨认你的分别呈现结构中的各种任务的唯壹地点的假名数字代码。WBS
代码可用于报告日程和跟踪开支。在工程体系中,应用尤其常见,相关的编码还有OBS\RBS\PBS等等。

   在Microsoft Office
Project中的WBS代码有二种:大纲数字和自定义WBS代码。大纲数字是最简便的
WBS 编码类型。Microsoft Office Project
将自行总结每项职责大纲数字基础上的职务列表的纲要结构编号。例如,您的职分列表中的第一个职分的数码的
1。如果该职责具有八个子职务,子职务是编号 1.壹 、1.2 和
1.3。大纲数字只含有数字 (无号)
和无法对其进行编辑。他们实行操作,不过,自动移动时更改职务向上或向下在职务列表中,当降级或进步职务。例如,借使子任务当前有着的纲要数字为
3.5.4,并且移列表中的一行,大纲数字将自动更新为
3.5.3。借使下一场升级该相同的子义务,大纲数字将自动更新到 3.6。

   精晓WBS编码的概念,扩张Twproject
Gantt的code编码,选拔大纲数字。如下图:

永利官方网站 3

   
对ganttMaster.js进行增加,扩充质量:isLevelCode(bool类型),是不是自动对code举行编码。扩大扩充方法levelCode:

GanttMaster.prototype.levelCode = function () {
    if (this.tasks && this.tasks.length > 0) {
        var curCodeExt = 1;
        for (var i = 0; i < this.tasks.length; i++) {
            var tsk = this.tasks[i];
            if (tsk.level == 0) {
                tsk.code = curCodeExt;
                levelChildCode(tsk.getChildren(), tsk.code);
                curCodeExt++;
            }
        }
    }

    function levelChildCode(cTasks, prefix) {
        if (cTasks && cTasks.length > 0) {
            var curCodeExt = 1;
            for (var i = 0; i < cTasks.length; i++) {
                var tsk = cTasks[i];
                tsk.code = prefix + "." + curCodeExt;
                levelChildCode(tsk.getChildren(), tsk.code);
                curCodeExt++;
            }
        }
    }
}

    本函数接纳递归完结:

永利官方网站 4

    调用步骤:

    定义甘特图:var ge; //this is the hugly but very friendly global var
for the gantt editor

    加载甘特图模板: $(“#ganttemplates”).loadTemplates();

    开端化甘特图:

          // here starts gantt initialization
            ge = new GanttMaster();
            //TODO:是否自动显示bar
            ge.isBrowserTaskBar = true;
            //TODO:设置code是否自动编码
            ge.isLevelCode = true;
            var workSpace = $("#workSpace");
            workSpace.css({
                width: $(window).width() - 20,
                height: $(window).height() - 100
            });
            ge.init(workSpace)

    加载数据并调用层级方法:

         function loadFromLocalStorage() {
            var ret;
            if (localStorage) {
                if (localStorage.getObject("teamworkGantDemo")) {
                    ret = localStorage.getObject("teamworkGantDemo");
                }
            } else {
                $("#taZone").show();
            }
            if (!ret || !ret.tasks || ret.tasks.length == 0) {
                ret = JSON.parse($("#ta").val());
                //actualiza data
                var offset = new Date().getTime() - ret.tasks[0].start;
                for (var i = 0; i < ret.tasks.length; i++)
                    ret.tasks[i].start = ret.tasks[i].start + offset;
                //debugger;
            }
            ge.loadProject(ret);
            ge.checkpoint(); //empty the undo stack
            ge.levelCode();
        }

     可查看gantt213.html页面。

③ 、扩张成效二:让选用的task出今后显示窗口

3.1 效果图

    选用task对应的gantt bar突显出来,且在滑行窗口居中体现,效果如下图:

永利官方网站 5

3.2 ganttMaster修订

    经过dom之间关系分析,找到个中的内在联系,首要扩充如下方法:

GanttMaster.prototype.browserTaskBar = function (tsk) {
    if (tsk && tsk instanceof Task) {
        var id = tsk.id;
        //找到taskBar
        var taskBar = $("svg[taskid=\"" + id + "\"]");
        var taskBarX = parseInt($(taskBar).attr("x"));
        var taskBarWidth = parseInt($(taskBar).attr("width"));
        //获取svg最外层画布canvas
        var canvas = $(taskBar).parent().parent().parent();
        var canvasWidth = $(canvas).width();
        //获取滚动区域
        var scroll = $(taskBar).parent().parent().parent().parent();
        var scrollWidth = $(scroll).width();
        var scrollScrollWidth = canvasWidth - scrollWidth + 17;
        //获取水平滚动条要移动的位置
        var centerLeft = (taskBarX + taskBarWidth / 2);
        var scrollLeft = (centerLeft – scrollWidth/2) / canvasWidth * scrollScrollWidth;
        console.log("-------------------------------------------------------");
        console.log("canvas width:" + canvasWidth); //画布区域大小
        console.log("scroll width:" + scrollWidth); //滚动区域大小
        console.log("scroll scroll max width:" + scrollScrollWidth); //滚动区域最大滑动区域
        console.log("scroll left position(old):" + $(scroll).scrollLeft()); //滚动区域滑块位置(旧)
        $(scroll).scrollLeft(scrollLeft); //设置滑块位置
        console.log("scroll left position(new):" + $(scroll).scrollLeft()); //滚动区域滑块位置(新)
        console.log("-------------------------------------------------------");
    }
};

   
方法讲解:依照taskid找到bar,获取相应的div层与滚动窗口,设置滚动窗口的scrollLeft。

   
注意:芥末黄底纹17,是哪些获得的啊?那一个是滚动条宽度,3.4中有详细分析。

3.3 思路与模型

   
设置bar在滚动区域的骨干地方,就是什么设置滚动区域的scrollLeft值,那是缓解难题的关键。原甘特图如下:

永利官方网站 6

画布区域(品红部分)

永利官方网站 7

滚动区域(铅色部分)

    对应的dom层级结构如下:

永利官方网站 8

   
从Bar到展示区域,总共是4层嵌套。找到呼应的bar,分析上层的节点间的依靠关系,从以下多少个难点起头:

  • (1)怎样找到Bar?
  • (2)上层节点哪些起决定意义?
  • (3)画布区域与滚动区域的关联何以?
  • (4)滚动区域的最大scrollLeft是多少?

题材一:怎样找到Bar?

   
Bar与职分项是联合浮动的,两者是透过taskid进行关联的,比如找到taskid=-6的甘特图形:

        var id = -6;
        //找到taskBar
        var taskBar = $("svg[taskid=\"" + id + "\"]")

标题二:上层节点哪些起到控制意义?

   
上层节点唯有画布区域与滚动区域起到效能,bar在那四个区域的职分是怎么的?通过分析dom结构,建立以下模型:

永利官方网站 9

模型示意图1

    注意事项:(1)垂直滚动条暂不考虑。(2)task
bar相对于画布区域的坐标x是不变的。   

题材三:画布区域与滚动区域的涉嫌何以?

   
从模型示意图来看,滚动区域必须同时恰恰能够查阅画布区域,要保障那点,canvasWidth与scrollScrollWidth是自然的百分比关系,则比例周全为scale=canvasWidth/scrollScrollWidth,表示滑动区域的比例,例如滑动区域向左滑动1,则画布区域则向右滑动scale。

(1)当出现滚动条时,canvasWidth>scrollScrollWidth>scrollWidth,而scale>1

(2)当滚动区域上涨幅度增添时,scrollScrollWidth是在渐渐变小

(3)未出现滚动条时,scrollScrollWidth = 0

   
解惑,从模型来看,scrollWidth应该是出乎scrollScrollWidth的吗?怎么着把比自个儿更大的画布区域包含进去,正是借助滚动区域,那里可看作scrollScrollWidth是对scrollWidth的推广,其放置比例正是scale。

题材四:滚动区域最大scrollLeft是多少

   
怎么着获取某权且时,最大scollLeft。消除办法,通过chrome浏览器打开甘特图,将滚动区域的滑块拉到最左边,在console窗口输入$(“div[class=’splitElement
splitBox2′]”).scrollLeft();可得到。如下图:

永利官方网站 10

3.4 数字分析显然正视关系

   
遵照chrome调节和测试器,可取得canvasWidth、scrollWidth、scrollScrollWidth,甘特图原始状态下,使用七个浏览器记测试,数据记录如下:

永利官方网站 11

Excel分析图表1

  
对canvasWidth-scrollWidth与scrollScrollWidth相比较,相对值都为17,拿到结果为:

var scrollScrollWidth = canvasWidth - scrollWidth + 17

    假设甘特图处于放到、缩短状态,是还是不是创造呢?再度测试结果如下:

永利官方网站 12

Excel分析图表2

   
无论甘特图如何缩放,公式照旧创建。这就找到了滚动窗口最大滑动区域scrollScrollWidth,bar的呈现地方,对应的值就是scrollScrollWidth的一有的。把模型中的bar至于中央岗位,如下图:

永利官方网站 13

模型示意图2

    上海体育地方清晰的交由以下结论:left=centerLeft –
scrollWidth/2,总计滑块的职位,也等于找到left在滑块上的映射scrollLeft,结合scale周全,可总计出scrollLeft
= left * scale。

   
那样就贯彻了稳定scrollLeft,真的是那般啊?经过测试,发现bar在滚动区域,并不在大旨岗位。从分析方法来看,相比较臃肿、复杂,要简化处理,怎么办吧?上边将接二连三拓展分销模型并优化。

3.5 模型深刻解析与优化

    在模型分析中,没有对遮挡区域拓展解析,分析图表如下:

永利官方网站 14

模型示意图3

    遮挡区域上涨幅度maskWidth(maskWidth1+maskWidth2)=canvasWidth –
scrollWidth,与scrollScrollWidth相差17,也等于scrollScrollWidth≈maskWidth。而滚动条的留存,正是滑动遮挡区域,scrollLeft≈left,那样就格外简单化了。考虑17呢?为啥是固定值?而不是变量值呢?

    为了弄懂这几个标题,我们运用QQ截图滚动区域的垂直滚动条,如下图:

永利官方网站 15

   
估摸17是笔直滚动条的小幅度,对此可忽略不计,则scrollScrollWidth=maskWidth,能够看作scrollLeft=left=maskWidth1,实施也的确如此。

    修订后的js代码如下(也蕴涵获取svg相关属性的校对):

GanttMaster.prototype.browserTaskBar = function (tsk) {
    if (tsk && tsk instanceof Task) {
        var id = tsk.id;
        //找到taskBar
        var taskBar = $("svg[taskid=\"" + id + "\"]");
        //var taskBarX = $(taskBar)[0].getBoundingClientRect().left;
        var taskBarX = parseFloat($(taskBar)[0].getAttribute("x"));
        var taskBarWidth = parseFloat($(taskBar)[0].getBoundingClientRect().width);
        //获取svg最外层画布canvas
        var canvas = $(taskBar).parent().parent().parent();
        var canvasWidth = parseFloat($(canvas).width());
        //获取滚动区域
        var scroll = $(taskBar).parent().parent().parent().parent();
        var scrollWidth = parseFloat($(scroll).width());
        //获取水平滚动条要移动的位置
        var centerLeft = (taskBarX + taskBarWidth / 2.0);
        var scrollLeft = (centerLeft - scrollWidth / 2.0);
        var oldScrollLeft = $(scroll).scrollLeft();
        if (Math.abs(oldScrollLeft - scrollLeft) >= 1.0) {
            $(scroll).scrollLeft(scrollLeft); //设置滑块位置
        } else {
            return;
        }
        console.log("-------------------------------------------------------");
        console.log("task left:" + taskBarX);
        console.log("task width:" + taskBarWidth);
        console.log("canvas width:" + canvasWidth); //画布区域大小
        console.log("scroll width:" + scrollWidth); //滚动区域大小
        console.log("scroll left position(old):" + oldScrollLeft); //滚动区域滑块位置(旧)
        console.log("scroll left position(new):" + scrollLeft); //滚动区域滑块位置(新)
        console.log("-------------------------------------------------------");
    }
};

    运转后的效益图如下:

永利官方网站 16

    最后优化后的代码:http://files.cnblogs.com/files/zsy/gantt.rar

    温馨提示,如对您有援助,麻烦赞一下。~~

相关文章