标签：return 配置 var dhtmlx date config gantt
一：搜索功能
上次文章里面没有写，这次提一下吧，其实dhtmlxGantt甘特图里面自带搜索功能的如图所示
下面是代码展示：第一部分里面是设置列的，这里只显示需要的列，只需要按照如下添加一个标签，就可展示搜索框，主要实现功能是下面的搜索任务那部分，可直接用
gantt.config.columns = [{//初始化列
名：“text”，
标签：“<div class ='searchEl'>任务名称<input id ='search'style ='height：40px'type ='text' “+”占位符='搜索任务...'> </ div>“，
树：true，
宽度：'*'
//编辑：textEditor
}var inputEl = document.getElementById（'search'）; //搜索任务
inputEl.oninput = function（）{
gantt.refreshData（）;
}
功能hasSubstr（parentId的）{
VAR任务= gantt.getTask（parentId的）;
if（task.text.toLowerCase（）。indexOf（inputEl.value.toLowerCase（））！== -1）
return true;var child = gantt.getChildren（parentId）;
for（var i = 0; i <child.length; i ++）{
if（hasSubstr（child [i]））
return true;
}
return false;
}
gantt.attachEvent（“onBeforeTaskDisplay”，function（id，task）{
if（hasSubstr（id））
return true;返回虚假;
}）;
二：新增，编辑，删除功能按钮实现
如图所示
其中右边的就是这些功能按钮，具体实现代码如下
//添加操作按钮标签
var colHeader ='<div class =“gantt_grid_head_cell gantt_grid_head_add”onclick =“gantt.createTask（）”> </ div>'，colContent = function（task）{
return（'<i class =“fa gantt_button_grid gantt_grid_edit fa-pencil”onclick =“clickGridButton（\'edit \'）”> </ i>'
+'<i class =“fa gantt_button_grid gantt_grid_add fa-plus”onclick =“ clickGridButton（\'add \'）“> </ i>'
+'<i class =”
以上是添加标签的方法，这里适用于平台，毕竟原先的JS与平台的js有点冲突（不能传参，可参考全局变量或其他方法），调用的onclick传不了值，想要看原代码的参考以下
功能按钮原文档地址：https：//docs.dhtmlx.com/gantt/desktop__styling_guide.html
继续刚刚的，只有上面的代码还不行，还必须引用
https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css这里引用的是网上的地址，可直接引用
实现CSS样式如下：
.fa {
cursor：pointer;
font-size：14px;
text-align：center;
不透明度：0.2;
填充：5px;
}.fa：hover {
opacity：1;
}.fa-pencil {
color：#ffa011;
}.fa-plus {
color：＃328EA0;
}.fa-times {
color：red;
}
三：设置具体时间格式
如图所示，代码如下：可直接引用
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 = 28;var weekScaleTemplate = function（date）{
var dateToStr = gantt.date.date_to_str（“％d％M”）;
var weekNum = gantt.date.date_to_str（“（周％W）”）;
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：“％F，％Y”
}，{
unit：“week”，
step：1，
template：weekScaleTemplate
}];
四：实现工作时间突出周末颜色
下面是具体代码
gantt.templates.scale_cell_class = function（date）{
//调试器;
if（date.getDay（）== 0 || date.getDay（）== 6）{
// alert（date.getDay（））;
返回“周末”;
}
};
gantt.templates.task_cell_class = function（item，date）{
// debugger;
if（date.getDay（）== 0 || date.getDay（）== 6）{
return“weekend”;
}
};//样式
.weekend {
background：＃f4f7f4;
}.gantt_selected .weekend {
background：＃f7eb91;
}
原地址：https：//docs.dhtmlx.com/gantt/desktop__highlighting_time_slots.html
五：实现任务移动拖拽功能
原地址：https：//docs.dhtmlx.com/gantt/api__gantt_order_branch_config.html
以下代码可实现移动，具体保存自己实现（有移动后的方法onAfterTaskMove）
gantt.config.order_branch = true; //实现拖
插gantt.config.order_branch_free = true;
六：工作时间设置为小时
如图所示为时间设置，原地址：https：//docs.dhtmlx.com/gantt/desktop__working_time.html#multipleworktimecalendars
设置之后默认为0-24小时都显示，只有购买的情况下，可以使用代码隐藏不需要的时间（如图8-16）
隐藏时间单位：https：//docs.dhtmlx.com/gantt/desktop__custom_scale.html
如图的参考网页地址：https：//docs.dhtmlx.com/gantt/samples/09_worktime/04_custom_workday_duration.html
标签：return,配置,var,dhtmlx,date,config,gantt 来源： https://www.cnblogs.com/ygunoil/p/14150090.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。