对jquery-gantt的应用

对jquery-gantt的应用

由于在公司工作期间需要对甘特图的使用，在网上查询资料的时候找到了这个
所以记录一下自己的使用过程

在主页面引入文件时，发现了生成的时候产生许多的bug

<link rel="stylesheet" type="text/css" href="css/gantt.css">
  <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
  <script type="text/javascript" src="js/jQuery.Gantt-master/js/jquery.fn.gantt.js" charset ="GB2312"></script>
  <script type="text/javascript" src="js/jQuery.Gantt-master/js/jquery-migrate-1.2.1.min.js"></script>
  <script src="js/jQuery.Gantt-master/js/prettify.js"></script>

引入的文件是自己多次调试后，发现可行的方案，若有谁知道更好的请教一下我

自己对gantt.css进行过修改，主要是为了部分显示颜色的原因，
在引入文件最主要是对于数据的操作，在后台拿到的数据返回的是一个list
而且数据格式很乱，所以需要对数据进行一个处理，后来直接后台处理完成返回后台直接使用
在写甘特图期间要多谢以下链接的作者写的文章给予了很多帮助
http://www.yunnanhaoli.com/web/jquery/878.html

在引入之后，在页面上

<div id="gantt" class="gantt"></div>

在js页面上

$(".gantt").gantt({
                    source: source,
                    navigate: "scroll",
                    maxScale: "hours",
                    months:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
                    dow:["周日","周一","周二","周三","周四","周五","周六"],
                    itemsPerPage: 10,
                    onItemClick: function(data) {
                        alert("Item clicked - show some details");
                    },
                    onAddClick: function(dt, rowId) {
                        alert("Empty space clicked - add an item!");
                    },
                    onRender: function() {
                        if (window.console && typeof console.log === "function") {
                            console.log("chart rendered");
                        }
                    }
                });

        $(".gantt").popover({
            selector: ".bar",
            title: "I'm a popover",
            content: "And I'm the content of said popover.",
            trigger: "hover"
        });

        prettyPrint();

source则为数据源，具体每一个的意思参照官方文档
也可参照此链接，感觉链接博主写的文章
http://blog.csdn.net/z69183787/article/details/41477033

自己从后台拿取到的对数据的处理方式

var source = new Array();
    var tmpData = new Object();
    tmpData.values = new Array();
    var tmpValues = new Object();
    var all = 0;
    var fromDate = "";
    var toDate = "";
    var labelData = "";
    var customClassData = "";
    $.each(data,function(i,item){
        tmpData = {};
        tmpData.values = [];
        tmpValues = {};
        tmpData.name = item.name;
        tmpData.progress = Number(item.scale);
        fromDate = "/Date("+item.startDate+")/";
        if(item.endDate == null || item.endDate == ''){
            item.endDate = Date.parse(new Date());
            toDate = "/Date("+item.endDate+")/";
        }
        customClassData = "ganttRed";
        tmpValues.from = fromDate;
        tmpValues.to = toDate;
        tmpValues.label = item.name+","+Number(item.scale)+"%";
        tmpValues.customClass = customClassData;
        tmpData.values[0] = tmpValues;
        source[all] = tmpData;
        all++;
    });

具体需要注意tmpValues.label = item.name+”,”+Number(item.scale)+”%”;这一句
由于在需求中需要展示每个的进度，
自己在了解的文档中，传入的参数总是无法传入成功
若有人有更好的方法可请教下

createProgressBar: function (days, cls, desc, label, dataObj)

在jquery.fn.gantt.js大概800多行的位置有这个
由于在上面我把传入的label加了我的一个进度在里面
所以在这个添加色块的方法中对于传入的东西进行一个处理

var arr = label.split(",");
if(arr[1] == 'unfinded' || arr[1] == '0%'){
    arr[1] = '0%';
     var bar = $('<div class="bar">'+'<div style="float:left;">'+arr[1]+'&nbsp;&nbsp;&nbsp;&nbsp;'+arr[0]+'</div></div>')
        .addClass(cls)
        .css({
            width: ((cellWidth * days) - barMarg) + 5
        })
        .data("dataObj", dataObj);
}else{
     var bar = $('<div class="bar"><div style="width:'+arr[1]+';height:100%; float:left;background-color:#6F0;overflow:visible;white-space:nowrap">'+arr[1]+'&nbsp;&nbsp;&nbsp;&nbsp;'+arr[0]+'</div></div>')
        .addClass(cls)
        .css({
            width: ((cellWidth * days) - barMarg) + 5
        })
        .data("dataObj", dataObj);
}

在传入的label进行简单的拿取
然后根据一个判断去添加色块，
主要是修改了bar添加色块时的代码，其余部分未改变
效果并没有很好
所以有别的方法希望大家能指教下