<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>OA课项目开发管理</title>
<link rel="stylesheet" href="/wui/theme/solex/public.css">
<link rel="stylesheet" href="/solexProjects/gongyong/dhtmlx/dhtmlxGantt/dhtmlxgantt.css?v=20180227">
<style>
html, body {
height: 100%;
padding: 0px;
margin: 0px;
overflow: hidden;
}
/*按周显示*/
.gantt_task_cell.week_end {
background-color: #F5F5F5;
}
.gantt_task_row.gantt_selected .gantt_task_cell.week_end {
background-color: #F8EC9C;
}
/*未开始的样式*/
.nobegin .gantt_cell, .odd.nobegin .gantt_cell,
.nobegin .gantt_task_cell, .odd.nobegin .gantt_task_cell {
background-color: #FDE0E0;
}
/*已完成的样式*/
.green .gantt_cell, .odd.green .gantt_cell,
.green .gantt_task_cell, .odd.green .gantt_task_cell {
background-color: #BEE4BE;
}
/*用来区分人员:标识浅烟色*/
.WhiteSmoke .gantt_cell, .odd.WhiteSmoke .gantt_cell,
.WhiteSmoke .gantt_task_cell, .odd.WhiteSmoke .gantt_task_cell {
background-color: #eceaea;
}
/*进度条图形*/
.gantt_task_line.gantt_solex .gantt_task_progress {
background-color: #BEE4BE;
}
/*任务条形图*/
.gantt_task_line.gantt_solex {
background-color: #FDE0E0;
border: 1px solid #96cafd;
}
.gantt_task_line {
border-radius: 0px !important;
}
/*任务条形图内容*/
.gantt_task_content {
text-align: left;
color: #454545;
padding-left: 20px;
}
</style>
</head>
<body class="main-box-search">
<!-- 目录及按钮区域 -->
<div id="solex_loading"></div>
<div id="toolBar" class="title-block">
<table cellspacing="1">
<tr>
<td class="titleName">OA课项目开发管理</td>
<td class="countSpan"><span id="totalSize"></span></td>
<td>
<button class="solex-btn-search" id="btn_search" onclick="javascript:btn_search()">
<i class="fas fa-search fa-lg"></i> 查询
</button>
<button class="solex-btn-submit" id="btnSave" onclick="javascript:btn_save();"><i
class="fas fa-save"></i> 保存
</button>
</td>
<td><a id="showText" class="show-hide-bar" href="javascript:void(0)" onclick="Solex.showSearch()">
收起<img src="/solexProjects/gongyong/img/icon_hide.png"></a></td>
</tr>
</table>
</div>
<!-- 搜索框 -->
<div id="searchBar" class="search-block">
<form id="searchForm" name="searchForm" class="form-group">
<table class="search-tab" style="width:98%;">
<!-- 第1行 -->
<tr>
<td><label class="form-label-search">已完成</label></td>
<td>
<div class="form-input-inline-search">
<select id="complete" name="complete" class="form-control cursor">
<option value="">全部</option>
<option value="1">是</option>
<option value="0" selected>否</option>
</select>
</div>
</td>
<td><label class="form-label-search">姓名</label></td>
<td>
<div class="form-input-inline-search">
<input type="text" class="form-control" name="userName" id="userName" placeholder="请输入用户名">
<img src="/solexProjects/gongyong/img/icon_xz.png" class="multi-icon"
onclick="javascript:Solex.multiValue('userName')" border=0>
</div>
</td>
<!--<td><label class="form-label-search">部门</label></td>
<td>
<div class="form-input-inline-search">
<select id="department" name="department" class="form-control cursor"></select>
</div>
</td>-->
<td><label class="form-label-search">开始日期</label></td>
<td>
<div class="form-input-inline-search">
<input type="text" class="form-control-date cursor" name="ksrqb" id="ksrqb" class="Wdate"
onclick="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd'})"/>
<span class="data-line">-</span>
<input type="text" class="form-control-date cursor" name="ksrqe" id="ksrqe" class="Wdate"
onclick="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd'})"/>
</div>
</td>
</tr>
</table>
</form>
</div>
<!--<div class="grid-block">-->
<div id="gantt_here" style='width:98%; height:600px;margin-top:10px;overflow:auto;'></div>
<!--</div>-->
<script src="/mobilemode/apps/solex/js/jquery/jquery-1.8.3.min.js"></script>
<script src="/solexProjects/gongyong/js/solex-public.js"></script>
<!--甘特图基本js文件-->
<script src="/solexProjects/gongyong/dhtmlx/dhtmlxGantt/dhtmlxgantt.js?v=20180227"></script>
<!--设置本地语言为中文-->
<script src="/solexProjects/gongyong/dhtmlx/dhtmlxGantt/locale/locale_cn.js" charset="utf-8"></script>
<script src="/solexProjects/ganttView/js/ganttViewBasic.js"></script>
</body>
// 设置宽度
// var pObj = $("#gantt_here").parent();
// var width = pObj.width() - 10;
// $("#gantt_here").width(width);
// 设置高度
var sumWidth = $("#toolBar").height() + $("#searchBar").height();
var height = document.documentElement.clientHeight - sumWidth - 100;
$("#gantt_here").height(height);
//1.0 全局变量
var executeDefault = "0";
var solex_config = {};
solex_config.saveUrl = "/solexProjects/ganttView/ganttViewAction.jsp?urlFlag=save";
solex_config.getDataUrl = "/solexProjects/ganttView/ganttViewAction.jsp?urlFlag=search";
//2.0.1、项目信息列的样式
gantt.config.grid_width = 500;
gantt.config.add_column = false;
gantt.templates.grid_row_class = function (start_date, end_date, item) {
if (item.lineNum == 2) return "WhiteSmoke";//偶数行,标浅黄色底色
// if (item.progress == 0) return "nobegin";/*未开始的*/
if (item.progress >= 1) return "green";/* 已完成的*/
};
//2.0.2、设置甘特图区域底色,需要配置自定义样式
// gantt.templates.task_row_class = function (start_date, end_date, item) {
// if (item.progress == 0) return "nobegin";/*未开始的*/
// if (item.progress >= 1) return "green";/* 已完成的*/
// };
//2.0.3、按周显示
// gantt.config.work_time = true;//开启周末模式
gantt.config.scale_unit = "day";
gantt.config.date_scale = "%d, %D";/*天,周*/
gantt.config.min_column_width = 60;
gantt.config.duration_unit = "day";
gantt.config.scale_height = 20 * 3;
gantt.config.row_height = 30;
//月和周的样式
var weekScaleTemplate = function (date) {
var dateToStr = gantt.date.date_to_str("%M%d");/*3月30*/
var weekNum = gantt.date.date_to_str("(week %W)");/*week 14*/
var endDate = gantt.date.add(gantt.date.add(date, 1, "week"), -1, "day");
return dateToStr(date) + " - " + dateToStr(endDate) + " " + weekNum(date);
};
gantt.config.subscales = [
{unit: "month", step: 1, date: "%Y,%F"},/*2020,四月*/
{unit: "week", step: 1, template: weekScaleTemplate}
];
//周末样式
gantt.templates.task_cell_class = function (task, date) {
if (!gantt.isWorkTime(date))
return "week_end";
return "";
};
//进度条样式
gantt.templates.task_class = function (st, end, item) {
return item.$level == 0 ? "gantt_solex" : ""
};
//2.1、自定义要展示的列:参考https://blog.csdn.net/CX_silent/article/details/83151415
gantt.config.columns = [
{
name: "userName", label: "被指派人", align: "center", width: 60,
template: function (item) {
if (!item.userName) return "未分配";
return item.userName;
}
},
{name: "text", label: "任务名称", tree: true, width: '*'},
{name: "start_date", label: "开始时间", align: "center", width: 70},
{name: "duration", label: "天数", align: "center", width: 40},
{
name: "progress", label: "进度", width: 80, align: "center",
template: function (item) {
if (item.progress >= 1)
return "完成";
if (item.progress == 0)
return "未开始";
return Math.round(item.progress * 100) + "%";
}
},
{name: "add", label: ""}];
//2.2、自定义提示文字:应该书写在甘特图初始化之前
gantt.templates.task_text = function (start, end, task) {
return task.text + "----" + task.userName;
};
//允许通过拖拽的方式新增任务依赖的线条
gantt.config.drag_links = false;
//允许用户推拽条形图上用来调整进度百分比的小按钮
gantt.config.drag_progress = false;
// 当task的长度改变时,自动调整图表坐标轴区间用于适配task的长度
gantt.config.fit_tasks = true;
// 定义lightbox弹出框
gantt.locale.labels.section_myuser = "被指派人";//自定义字段
gantt.config.lightbox.sections = [
{name: "description", height: 70, map_to: "text", type: "textarea", focus: true},
{name: "myuser", height: 40, map_to: "userName", type: "textarea", focus: true},
{name: "time", height: 40, type: "time", map_to: "auto", time_format: ["%Y", "%m", "%d"]}/*按开始日期-结束日期显示*/
// {name: "time", height: 40, type: "duration", map_to: "auto", time_format: ["%Y", "%m", "%d"]}/*按开始日期-周期长度显示*/
];
//3.1、加载数据
gantt.config.xml_date = "%Y-%m-%d";// 设置时间格式
gantt.init("gantt_here");//顺序很重要
//3.2、自动保存数据
var dp = new gantt.dataProcessor(solex_config.saveUrl);
dp.enableDataNames(true);
dp.setTransactionMode("POST", true);
dp.setUpdateMode("off");//是否自动保存
dp.init(gantt);
/**
* 源码中保存方法功能实现,我就此简单给介绍一下,首先设置lightbox弹框左下角按钮save的点击事件,
* 制定 _save_lightbox()方法,然后,在该方法中this.getLightboxValues();通过该方法可以获取该页面中修改的数据将其存储在 t中,
* 然后调用相应事件函数,制定为save的事件,后面的代码主要就是先去判断t是否为更改的数据,然后将更改的数据,替换原来的数据,
* 最后就this.refreshTask(t.id), this.updateTask(t.id)), this.refreshData(), this.hideLightbox()刷新然后隐藏弹框。
* 因为dhtmlxgantt.js是公共的JS所以我们最好不要对该JS做修改,尽可能的在JSP中重写你需要更改的方法,
* 这样当其他JSP调用dhtmlxgantt.js时,不会出现变动。
* 原文链接:https://blog.csdn.net/weixin_42803027/java/article/details/82495191
*/
//4、基本事件:放在gantt.init方法之后
//4.1 为任务save保存之后事件,点击+按钮即可添加数据
gantt.attachEvent('onBeforeTaskAdd', function (id, item) {
// alert("beforeAdd");
// console.log(JSON.stringify(item));
// 设置被指派人为当前用户
});
gantt.attachEvent('onAfterTaskAdd', function (id, item) {
// alert("afterAdd");
// console.log(JSON.stringify(item));
});
// 4.2、修改任务之后的事件
gantt.attachEvent("onAfterTaskUpdate", function (id, item) {
// alert("save");
// console.log(JSON.stringify(item));
});
// 4.3、删除任务事件
gantt.attachEvent("onAfterTaskDelete", function (id, item) {
// alert("delete");
// console.log(JSON.stringify(item));
});
$(function () {
btn_search("init");
});
// 5. 按钮事件:查询
function btn_search(flag) {
loading();
var searchStr = jQuery('#searchForm').serialize();
gantt.clearAll();
var url = solex_config.getDataUrl + "&" + searchStr + "&flag=" + flag;
gantt.load(url);
unloading();
}
function btn_save() {
loading();
dp.sendAllData();
unloading();
setTimeout(function () {
btn_search("init");
}, 100);
}
//遮罩层
function loading() {
Solex.loading();
};
//取消盖屏
function unloading() {
Solex.unloading();
}
以上是demo中的代码,主要包含了dhtmlx甘特图的初始化,一些常见的设置。特别是一些自定义字段,像被指派人、开始日期、结束日期、周期等