jQuery.Gantt-甘特图篇(二)

jQuery.Gantt-甘特图篇(二)


本篇来看一下数据源的数据结构:

[{

    "desc": "1",

    "name": "Q0918线",    

   "values": [

       { "customClass": "ganttRed", "from": "/Date(1302203200000)/", "to": "/Date(1310508000000)/", "desc": "工单: 20170526 &nbsp;&nbsp;品号: 9534861<br/>完成度: 60% &nbsp;&nbsp;总数: 60<br/>已完成: 36.&nbsp;&nbsp;超期预警:10%<br/>超前完成:", "per": "60%", "warnPer": "", "excPer":"10%"}

     ]

},

{ "name": "Jan Nowak",

   "desc": "Technik",

   "values": [

       {"from": "/Date(1309903200000)/", "to": "/Date(1310508000000)/", "desc": "<b>Type</b>: Task<br/><b>name</b>: Task 3<br/><b>Description</b>: Task desc.", "customClass": "ganttRed"},

       {"from": "/Date(1312495200000)/", "to": "/Date(1313100000000)/", "desc": "<b>Type</b>: Task<br/><b>name</b>: Task 4<br/><b>Description</b>: Task desc."}

     ]

}]


要想往控件上绑数据,当然要先了解它所能接受的数据结构啦~

不由着它的性子来,它是不会给你办事滴~

先来看外面一层


  [{},{}]   


这不是颜文字 =.=#

是一个对象的数组

拿出一个对象来看看

{

                        name:

                         desc:

                         values:[{}]

}

有三个参数,name,desc,values

前面两个是每行的最前面两列在上一篇中也介绍到了,不明白的同学和没看上一篇的同学出去罚站,顺便去历史记录再仔细看一遍上一篇笔记!

第三个参数values又是一个对象,是包含在本层对象里的一个对象

这里需要好好理解并牢记,因为在后台拼接字符串的时候这个地方最容易搞错

这里三个参数顺序不影响数据的绑定,在上面的代码中也展示了。


再看一下第三个参数 values

这个对象里还有几个参数

values:[{

        "customClass": "",

        "from": "/Date()/",

        "to": "/Date()/",

        "desc": "",

        "per":"",

        "warnPer": "",

        "excPer":""

}]


来挨个认识一下这几个参数




  1. customClass:后面跟一个css样式,这个样式是定义在我们下载的gantt包里的style样式表里的,这里控制的是这个进度条的颜色,可以在后台写死给个默认的颜色

    可以在这个style里添加自己需要的颜色



  2.   from:"/Date()/"

         to:"/Date()/"

    from是进度条开始时间

    to是进度条结束时间

    划重点~

    这里面这个date是需要着重讲一下,这里date是将括号里的字符串转换为时间,里面的一串数字是时间戳,是从1970年一月一日到现在为止的毫秒数,记住,这里只识别毫秒数,如果你填进去的是秒数也不行,C#里将时间转换为时间戳是秒级的,需要在得到的时间戳后面再拼接上3个0,也就是变成毫秒级,这里才会识别(因为Gantt.js里需要用这个字符串来进行运算,如果毫秒变成了秒,结果将会天差地别!!!)。


  3.   
             "desc": ""

    上面的例子中可以看到这个参数里面还有一大串参数:

        工单: 20170526 &nbsp;&nbsp;

        品号: 9534861<br/>

        完成度: 60% &nbsp;&nbsp;

        总数: 60<br/>

        已完成: 36.&nbsp;&nbsp;

        超期预警:10%<br/>

        超前完成:

    这么看可能会清楚一点,总之来说这里面写什么,页面上就会显示什么,这里面也可以写一些标记语言,为了显示的内容易读、清晰,就像上面写的&nbsp;<br/>等等类似的HTML标签,所以这个参数里的内容并不会影响数据绑定~


  4. 接下来几个还是重点,因为是小编在Gantt.js里自己加的参数,所以大家直接搬去用不会生效,说不定还会报错~


  5.   "per":"",
        这个是用来做进度条的完成度的,因为没找到在Gantt.js里有进度这个显示方法,所以就擅自加了个参数,有知道源代码里有这个方法的同学,还劳烦告知小编一声~
        这个参数后面是跟的百分数,就是在进度条上用另一个颜色标明此任务的完成进度。
        然后详细讲解一下具体在哪加的参数
        首先,看引用的是哪个gantt的js文件
        


    这里小编引用的是jquery.fn.gantt.js
    所以只需要找到这个文件,在这个文件里修改就好了


    在209行这里有个    createProgressBar     
    这个方法是用来创建我们看到的每一行的色块的,这就是最主要的东西了~
    加上我们新的这个参数     per


    然后在下面找到


    红色框框起来的就是显示任务条的主要色块了,长度为开始时间到结束时间


    我们可以看到下面直接return了,所以我们可以在它return前把我们需要的色块放上,我们需要显示的是他的完成进度,所以就是在bar的基础上截取一部分变色


    先判断一下我们传进来的参数里有没有值,外层If就是判断的有没有完成度,有的话就给加上一个完成的色块,这里设置div的百分比宽度,然后设置一个喜欢的颜色来跟原来的色块区分。
    在bar.append之后,我们这个完成度的色块就加上了~



    这个绿色的色块就是了!


  6.   "excPer":""
    这个参数是用来统计超出预期的程度,即已经提前完成的百分比。
    后面跟值同样是百分数。
    还是看一下怎么加
    首先,要明白这个超出预期比是在完成度里的,所以这个色块的div也要放在刚刚上一个我们加的参数(完成度per)的div里


    前提是有完成度才能有提前完成这一说呀~

    再看一下这个参数里有没有内容,即是否有提前完成,有的话就在per的div里再嵌套一个div,宽度设置为百分比宽度,设置一个不同的颜色,搞定啦~


    这里需要着重提一下的是这个百分比的计算
    首先超出预期的百分比是根据总量来得到的,但是这里我们把他放到了完成度的div里,这个百分比就肯定不准确了,因为它的百分比宽度到底有多宽是由它的父容器来决定的!




    图中代码均为小编纯手打,这大概是小编写代码最规整的一回了~
    因为我们最后需要的是在per这个div中占多少百分比,所以,必有一除啊!


  7.  "warnPer": "",
    超期预警,参数值也是百分数
    用来统计到现在位置还有多少没有按照计划完成,用特殊颜色标出



    还是在gantt.js里判断传进来的参数有没有值
    有值即在bar(总任务色块)里加入一个未完成色块,百分比宽度,根据bar决定具体多宽。
    这个是要跟在上个完成进度per(完成进度)后面的,所以需要一个左浮动


    这里需要注意的是在后台计算的未完成百分比的时候

    当然,如果有特殊需求除外。


最近在搞安卓开发,所以下面几篇要介绍安卓开发方面的知识了~

转发给朋友们~

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家可以留言交流,谢谢大家对【微信公众号:web前端开发大全】的支持。关注公众号在对话框发送 0 即可免费领取响应式网址开发视频教程。