这篇文章主要介绍了springboot+thymeleaf+mybatis实现甘特图的详细过程,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
首先我们要明白:这个甘特图需要哪些动态数据。
(1)需要:ID,tName,number,计划开始时间,开始时间,计划结束时间,结束时间,项目负责人,参与人,知情人ID,计划时长(可以计算得出的,不必在数据库中);前置任务;项目进度,该任务属于哪个任务
(2)然后利用easycode插件生成实体类,映射类,服务类,ontCroller等
(3)利用bootstrap框架做出甘特图的样式,写好JS。
<title>ganttu.html</title><!-- 只引用了这些,其余的并没有引用 --> #ganttu-head { height: 70px; background-color: #dddddd; padding: 10px 20px; } #ganttu-body { min-height: 780px; background-color: #eeeeee; padding: 10px 20px; font-size: 20px; } #ganttu-index-projectName { display: inline; padding: 5px 15px; background-image: linear-gradient(to left, #222222 0%, #222222 75%, #000000 100%); color: white; border-radius: 18px; } #ganttu-index-projectDesc { display: inline; padding: 5px 15px; background-image: linear-gradient(to left, #777777 0%, #777777 75%, #333333 100%); color: white; border-radius: 18px; } td { white-space: nowrap } <div id='ganttu-head' class='col-lg-12 col-md-12 col-sm-12 col-xs-12' style="height:100px"> <div style='font-size: 30px;font-weight: normal;padding: 5px 15px'>甘特图面板</div><div id='ganttu-index-projectName'>此项目 名称...</div><div id='ganttu-index-projectDesc'>此项目描述...</div></div><div id='ganttu-body' class='col-lg-12 col-md-12 col-sm-12 col-xs-12' style='font-size:14px'> <!-- 甘特图放到了这个div中 --><div id="lyh-ganttu" class='col-lg-12 col-md-12 col-sm-12 col-xs-12' style='padding:0px;height:700px'></div></div>
(4)在Controller层中利用Http请求传参
@RequestMapping(value = "/gantee",method = RequestMethod.GET) public String gantee(Model model) throws JSONException { Renwu renwu = renwuService.queryById(new Integer("1")); Map jsonDa<p style="color:transparent">来源gao!%daima.com搞$代*!码$网</p>ta = new HashMap(); List<map> jsonArray = new ArrayList(); Map jsonObject = new HashMap(); Integer id = renwu.getProjectid(); Integer pid = renwu.getPid(); String projectName = renwu.getProjectname(); String projectCode = renwu.getProjectcode(); SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy/MM/dd"); Date planStartDate = renwu.getPlanstartat(); Date planEndDate = renwu.getPlanendat(); Date startDate = renwu.getStartat(); Date endDate = renwu.getEndat(); String planStartStr = dateFormat.format(planStartDate); String planEndStr = dateFormat.format(planEndDate); String startStr = dateFormat.format(startDate); String endStr = dateFormat.format(endDate); String persent = renwu.getPersent(); String resps = renwu.getResps(); String actors = renwu.getActors(); String insiders = renwu.getInsiders(); Integer dur = renwu.getDur(); Integer before = renwu.getBefore(); jsonObject.put("id",id); jsonObject.put("pid",pid); jsonObject.put("projectName",projectName); jsonObject.put("projectCode",projectCode); jsonObject.put("planStartAt",planStartStr); jsonObject.put("planEndAt",planEndStr); jsonObject.put("startAt",startStr); jsonObject.put("endAt",endStr); jsonObject.put("persent",persent); jsonObject.put("resps",resps); jsonObject.put("actors",actors); jsonObject.put("insiders",insiders); jsonObject.put("dur",dur); jsonObject.put("before",new Object[]{before}); jsonArray.add(jsonObject); jsonData.put("data",jsonArray); model.addAttribute("lyhGanttuData",jsonData); return "ganttu"; }
(5)直接启动SpringBoot项目即可。
这个是Springboot项目,自然也是可以转到SpringCloud的子项目中。
注意:HTML并不是我原创没我只是在其基础上改了一下JS。在这个开放的时代,我觉得大家应该把学到的东西开放出来,不管多好或是很差。
到此这篇关于springboot+thymeleaf+mybatis实现甘特图的详细过程的文章就介绍到这了,更多相关springboot+thymeleaf+mybatis实现甘特图内容请搜索gaodaima搞代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持gaodaima搞代码网!
以上就是springboot+thymeleaf+mybatis实现甘特图的详细过程的详细内容,更多请关注gaodaima搞代码网其它相关文章!