DhtmlGantt案例-弹窗lightbox自定义字段

<!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>&nbsp;查询</button><button class="solex-btn-submit" id="btnSave" onclick="javascript:btn_save();"><iclass="fas fa-save"></i>&nbsp;保存</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甘特图的初始化，一些常见的设置。特别是一些自定义字段，像被指派人、开始日期、结束日期、周期等

DhtmlGantt案例-弹窗lightbox自定义字段相关推荐

Sharepoint 自定义字段类型
Moss2007默认有许多常见类型,如:文本,日期,数字,选项- ,有时我们需要根据需求自定义一个类型!在WSS3.0中可以通过C#或者VB来编写扩展字段,所有的自动需要继承内置的Sharepoint ...
wordpress 自定义字段使用---实现推荐文章
1.下载-安装-启用 Advanced Custom Fields 插件 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EGaHasaQ-1601445239981)( ...
织梦新建 php arclist,织梦arclist按照自定义字段来调用相关文章
织梦arclist按照自定义字段来调用相关文章,这对于想要在首页调用某个自定义字段的文章的同学来讲,非常不错,接下来看教程打开 include aglibrclist.lib.php 找到: //时 ...
最新版火车头织梦内容发布规则_火车头采集器V8.6发布dedecms自定义字段解决方案...
在使用火车头进行dede采集发布的时候,很多人会遇到如果自己增加了自定义字段该如何采集呢,之前本人也遇到了这种问题,搜索了很多百度文章最后完美解决的自定义字段如何发布成功的问题. 1.首先打开你要使用 ...
php sku添加,php – 在单个产品页面中显示SKU下的自定义字段值
我正在定制WooCommerce,我想在产品页面中添加和显示自定义文本(条件和品牌). 该头寸位于"库存"或"SKU"元下.我已设法创建并保存自定义字段,但如何 ...
leangoo自由配置任务卡片（需求、迭代、bug）自定义字段
做产品,最希望的是我的任务卡片可以灵活自定义,可以记录我想记录的所有信息.把重点信息画出来,一目了然.为了满足每个人不同的需求,Leangoo推出了自定义字段... 自定义字段可以为任务卡片添加扩展字 ...
Leangoo自定义字段
做产品,最希望的是我的任务卡片可以灵活自定义,可以记录我想记录的所有信息.把重点信息画出来,一目了然.为了满足每个人不同的需求,Leangoo推出了自定义字段... 自定义字段可以为任务卡片添加扩展字 ...
isodate php 时间转换,为ACF自定义字段查询将ISOdate转换为phpdate
我已经构建了一个自定义的beaver builder(wordpress)模块.我正在通过Ajax获取帖子.我需要根据ACF自定义字段日期查询帖子. 我用ISO8601格式发布日期(如2013-12- ...
dede php 调用自定义字段,在dedecms搜索结果列表页调用自定义字段的方法(绝对可用)...
关于在dedecms搜索结果列表页调用自定义字段的方法比较多有些教程都写得比较含糊,经过织梦者的测试今天推荐一个比较有效的方法给大家,方法是从网络中搜到的,但是绝对可用打开 include/exte ...
编写MOSS自定义字段类型的小意外
这段时间手头要做一个KM系统,在发表新知识文章时需要选择一个或多个维度下的知识分类.其实实现方法有很多,例如说再做一个专门用于设置知识分类的页面,让了发表完知识时或者在了表知识前让用户选择:又或者扩展 ...

DhtmlGantt案例-弹窗lightbox自定义字段

DhtmlGantt案例-弹窗lightbox自定义字段相关推荐

最新文章

热门文章