最近在修改公司的PMS系统。最后一个task是增加项目任务的甘特图。 用的是[jQuery.Gantt](http://taitems.github.io/jQuery.Gantt/)。| [Github](https://github.com/mbielanczuk/jQuery.Gantt) ## 引入 ```html ``` 本来项目中是引入了jQuery的,但是可能是在底部layout加入的,插件js各种报错,所以在页面中又单独引入了一次。 防止中文乱码所以设置了charset=“gb2312”。[参照](https://www.uedsc.com/jquery-gantt.html) ## Gantt初始化 ```javascript $(".gantt").gantt({ source: taskData, months: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], dow: ["日", "一", "二", "三", "四", "五", "六"], navigate: "scroll", maxScale: "months", minScale: "hours", waitText: "pls waiting...", itemsPerPage: 10, }); ``` ## 关于source的json数据处理 关于source的接受数据遇到了一些麻烦,后台是直接拼装好json_encode,前台用smarty取出。 ```javascript var taskData = ‘{{$taskData}}'; var taskData=eval("("+taskData+")"); ``` 文档给的source例子: ```javascript source: [{ name: "task1", desc: "Analysis", values: [{ from: "/Date(1320192000000)/", to: "/Date(1322401600000)/", label: "Requirement Gathering", customClass: "ganttRed" }] }] ``` 直接用for(var j in taskData)把prototype也for进去,会报错,所以还是老实用j++循环。 到了这里,values值无法取出,返回的是NaN。试着拼装了一下就成功显示了: ```javascript taskData[j].values = [{ from: taskData[j].values.from, to: taskData[j].values.to, }]; ``` 分别在拼装前后console.log,一个是Object,一个是套了层Array的Object。因此调整一下后台拼装的数据。 ```php $taskData[$k]['values'][0] = array('from'=\>....); ``` ## some bugs values.customClass显示为了values.desc,values.desc显示为了values.label,奇妙的错位。 然后是PHP用strtime生成的unix时间戳是标准10位,而js插件接受的是13位,还有3位的毫秒位,因为用不了那么精确就直接补0。需要精确获取的情况: ```php function getMillisecond() { list($t1, $t2) = explode(' ', microtime()); return $t2 . '.' . ceil( ($t1 * 1000) ); } ```