<!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甘特圖的初始化，一些常見的設置。特別是一些自定義字段，像被指派人、開始日期、結束日期、週期等