springboot+thymeleaf+mybatis实现甘特图的详细过程 springboot+thymeleaf+mybatis实现甘特

首先我们要明白：这个甘特图需要哪些动态数据。
（1）需要：ID，tName，number，计划开始时间，开始时间，计划结束时间，结束时间，项目负责人，参与人，知情人ID，计划时长（可以计算得出的，不必在数据库中）；前置任务；项目进度，该任务属于哪个任务

文章图片

（2）然后利用easycode插件生成实体类，映射类，服务类，ontCroller等
(3)利用bootstrap框架做出甘特图的样式，写好JS。

ganttu.html - 锐客网#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}甘特图面板此项目名称...此项目描述...

(4)在Controller层中利用Http请求传参

@RequestMapping(value = "https://www.it610.com/gantee",method = RequestMethod.GET)public String gantee(Model model) throws JSONException {Renwu renwu = renwuService.queryById(new Integer("1")); Map jsonData = https://www.it610.com/article/new HashMap(); List jsonArray = new ArrayList<>(); Map jsonObject = new HashMap(); Integer id = renwu.getProjectid(); Integerpid = 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实现甘特图的详细过程的文章就介绍到这了,更多相关springboot+thymeleaf+mybatis实现甘特图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！