jquery：甘特图（gantt）使用总结

1.按照网上步骤引入js文件
2.将星期以及月份汉化
修改jquery.fn.gantt.js的settting配置
dow: [“日”, “一”, “二”, “三”, “四”, “五”, “六”],
months: [“一月”, “二月”, “三月”, “四月”, “五月”, “六月”, “七月”, “八月”, “九月”, “十 月”, “十一月”, “十二月”],
3.使用ajax读取后台数据并展示，代码如下所示：
$.ajax({
url: “/application/zzpt/project/getProjectGanttData”, //请求后台，并返回甘特图需要的json数据
type: “post”,
dataType: “json”,
cache: false, //关闭AJAX缓存
data: {“projectCode”: projectCode}, //传入的查询参数
success: function (data) {
//初始化gantt
$(".gantt").gantt({
source: data,
navigate: ‘scroll’,//// 底部使用拖拽的刻度尺还是按钮：scroll和buttons
scale: “days”,// 这里是设置默认比例。这里总共有四个参数：months weeks days hours.
maxScale: “months”, // 这里是设置最大比例。这里总共有四个参数：months weeks days hours.
minScale: “days”, // 这里是设置最小比例。这里总共有四个参数：months weeks days hours.
itemsPerPage: 20, //设置甘特图每页显示多少条
onItemClick: function (data) {//有数据范围内的点击事件

                },
                onAddClick: function (dt, rowId) {//无数据范围内的点击事件
                    // alert("Empty space clicked - add an item!");
                },
                onRender: function () {//渲染事件
                    if (window.console && typeof console.log === "function") {
                        // console.log("chart rendered");
                    }
                }
            });
        }
    });

4.后台组装ajax所需的json数据
根据自己需求后台读取所需数据放入list组合，代码示例
/**
* 获取项目任务信息甘特图数据
*
* @param request
* @param response
* @return
*/
@RequestMapping(“getProjectGanttData”)
@ResponseBody
private void getProjectGanttData(HttpServletRequest request, HttpServletResponse response, String projectCode) {
QueryHelper queryHelper = new QueryHelper(request);
ObjectMapper objMap = new ObjectMapper();
User user = null;
String sql = “”;
List<Map<String, String>> list = null;
List dataList = null;
try {
user = UserLoginHelper.getUserModel(request);
sql = " select ROW_NUMBER() over(order by t.plan_start_date)rownumber,te.employee_name,t.task_director,t.task_name,t.task_content,t.task_result,t.audit_flag,case when DATEDIFF(day,t.plan_start_date,GETDATE())<0 then ‘0’ else ‘1’ end isstart, "
+ " CAST(DATEDIFF(S,‘1970-01-01 00:00:00.0’,t.plan_start_date) as numeric)*1000 starttime,"
+ " CAST(DATEDIFF(S,‘1970-01-01 00:00:00.0’,t.plan_end_date) as numeric)*1000 endtime"
+ " from t_task t with(nolock) "
+ " left join td_employee te with(nolock) on t.company_id = t.company_id and t.task_director = te.employee_code"
+ " where t.company_id = ‘"+user.getCompanyId()+"’ and t.project_code = ‘"+projectCode+"’";
list = queryHelper.getMapList(sql);
if(!list.isEmpty()){
dataList = new ArrayList<>();
List planValueList = null;
SimpleDateFormat df = new SimpleDateFormat(“YYYY-MM-dd HH:mm:ss.SSS”);
for(int i=0;i<list.size();i++){
Map<String, Object> planItemMap = new HashMap<>();
//planItemMap.put(“name”, CommonUtil.getStrFrmMap(list.get(i), “task_code”));
planItemMap.put(“name”, CommonUtil.getStrFrmMap(list.get(i), “employee_name”));
planItemMap.put(“desc”, CommonUtil.getStrFrmMap(list.get(i), “task_name”));
Map<String, Object> valueMap = new HashMap<>();
valueMap.put(“from”, “/Date(” + CommonUtil.getStrFrmMap(list.get(i), “starttime”) + “)/”);
valueMap.put(“to”, “/Date(” + CommonUtil.getStrFrmMap(list.get(i), “endtime”) + “)/”);
// System.out.println(CommonUtil.getStrFrmMap(list.get(i), “plan_start_date”)+"-"+df.parse(CommonUtil.getStrFrmMap(list.get(i), “plan_start_date”)).getTime()
// +"-"+CommonUtil.getStrFrmMap(list.get(i), “plan_end_date”)+"-"+df.parse(CommonUtil.getStrFrmMap(list.get(i), “plan_end_date”)).getTime());
valueMap.put(“label”, CommonUtil.getStrFrmMap(list.get(i), “task_content”));

				 if("1".equals(CommonUtil.getStrFrmMap(list.get(i), "isstart"))){
					 //任务是否已结束
					 //
					 if("2".equals(CommonUtil.getStrFrmMap(list.get(i), "audit_flag"))){
						 if("C".equals(CommonUtil.getStrFrmMap(list.get(i), "task_result"))){
							 valueMap.put("customClass", "ganttGray1");//设置进度条样式
						 }else{
							 valueMap.put("customClass", "ganttGreen1"); 
						 }
					}else{
						 valueMap.put("customClass", "ganttRed1"); 
					}
				//计划还未开始执行，标识黄色
				}else if("0".equals(CommonUtil.getStrFrmMap(list.get(i), "isstart"))){
					valueMap.put("customClass", "ganttYellow1"); 
				 }
				 planValueList = new ArrayList<>();
	             planValueList.add(valueMap);
	             //将封装的value List集合添加到保存整个数据集的List里面去
	             planItemMap.put("values", planValueList);
	             dataList.add(planItemMap);
			}
		}
		 
		JSONArray jsonArr = JSONArray.fromObject(dataList);// json与对象的互换,list转换为json数据
		objMap.writeValue(response.getWriter(), jsonArr);
	} catch (Exception e2) {
		e2.printStackTrace();
		
	}
	
}

5.设置悬浮框：修改jquery.fn.gantt.js文件的createProgressBar函数
createProgressBar: function (label, desc, classNames, dataObj) {
label = label || “”;
var bar = $(’