[dhtmlx]group task 失效问题解决

2024-03-30 19:51:33

1. 问题描述

使用了Gantt 的Group功能，但是在进行系统调优，开启smart_rendering的设置后却出现如下状况：
“Group by 时，总有部分task未group”
问题细部描述与解决如下：

2. Group 功能与效果

dhtmlx gantt 提供了对task根据属性进行分组的功能。效果类似:

实现方式的话，首先导入dhtmlxgantt_grouping.js；接下来在代码中处理如下：
gantt.groupBy({
groups: gantt.serverList(listname),
relation_property: listname,
group_id: "key",
group_text: "label"
});

serverList是Gantt自带的对象，仅需要往里插入需要排序的栏位的键值信息，例如：
gantt.serverList("priority", [
{key:"High", label: "High"},
{key:"Normal", label: "Normal"},
{key:"Low", label: "Low"}
]);
这里的key 和Label 可以一下，也可以不一样。 key 的值和gantt data的值保持一致， label就是页面中显示的值了。

3. 大数据性能调优

Gantt提供了数据量大时的调优方式，其中重要的一条是开始smart_rendering，描述如下：
enables the smart rendering mode for gantt's tasks and links rendering
也就是开启智能渲染。依据一般的规则，智能渲染也就是按需渲染，默认页面只渲染可以看到的部分，其他的部分跟前页面的操作动态的渲染，以加快页面访问和操作的速度。

4. 原因探求

追踪一下代码，发现：目前代码中serverList的值是通过前端的gantt的内部方法_get_tasks_data获取和初始化。

var ganttData = gantt._get_tasks_data();
var list = [];
if(ganttData != null && typeof(ganttData) != 'undefined'){
for(var i=0; i<ganttData.length; i++){
var task = ganttData[i];
var type = task.type;
if(type != null && typeof(type) != 'undefined' && typeof(type) != 'project'){
continue;
}
if(!checkIsExist(list,task[listname])){
list.push(task[listname]);
}
}
}
return list;

Debug时，会发现_get_tasks_data并不能取到所有的数据，举例来说，有1000笔Task, 这个方法只能获取14笔。导致分类的数据取不完整，也就导致group的功能失效。

5. 解决方案与经验教训

又要使用前端的性能调优，有要保持Group的功能可以继续运行。方法就是分组相关的信息必须要后台的方式获取，相对与Task的数据量，分组的信息毕竟很小。使用Ajax异步方式或是分组信息。问题完美解决

在使用Gantt以及其他前端组件是，内部的方法还是要慎用。

[dhtmlx]group task 失效问题解决相关推荐

Bootstrap模态框使用WebUploader点击失效问题解决
Bootstrap模态框使用WebUploader点击失效问题解决参考文章: (1)Bootstrap模态框使用WebUploader点击失效问题解决 (2)https://www.cnblogs. ...
Eclipse Ctrl+Alt+↓ 失效问题解决
Eclipse Ctrl+Alt+↓ 失效问题解决参考文章: (1)Eclipse Ctrl+Alt+↓ 失效问题解决 (2)https://www.cnblogs.com/zblwyj/p/108 ...
mysql union (all) 后order by的排序失效问题解决
mysql union (all) 后order by的排序失效问题解决参考文章: (1)mysql union (all) 后order by的排序失效问题解决 (2)https://www.cn ...
ThinkBook 14P 15P 笔记本结束休眠后触控板手势失效问题解决亲测可行
ThinkBook 14P 15P 笔记本结束休眠后触控板手势失效问题解决亲测可行发现这个问题以后在网上搜了很多,基本网上现有的方案无法彻底解决:比如重启.注销:我也咨询了联想官方客服,结果他们让 ...
Android Studio 线性布局Linearlayout的控件位置控制l属性Layout_margin失效问题解决
Android Studio 线性布局Linearlayout的控件位置控制l属性Layout_margin失效问题解决问题:如layout_marginRight ="50dp" ...
vue的SEO优化——预渲染后路由+点击事件失效问题解决
vue是单页面框架且前后端分离,不利于seo优化.针对这一点,还是有解决办法的. 预渲染后路由+点击事件失效问题解决--近期发现最近遇到了一个前台官网,由于时间比较紧,所以我选择了用vue框架去搭建 ...
Nomad 多job/group/task调度测试
目录 Nomad 多job/group/task调度测试 1 搭建nomad集群 2 测试driver=docker 2.1 多job测试 2.2 多group测试 2.3 多task测试 3 测试d ...
hp惠普笔记本idea alt+inset键失效问题解决
hp惠普笔记本idea alt+inset键失效问题解决不知道hp的笔记本内置键盘的机制是什么样的,目前找到的解决方法是用以下组合键 ALT + Fn + E
mysql group 索引失效_介绍mysql索引失效的情况
mysql视频教程栏目索引失效的情况. 索引对于MySQL而言,是非常重要的篇章.索引知识点也巨多,要想掌握透彻,需要逐个知识点一一击破,今天来先来聊聊哪些情况下会导致索引失效. 图片总结版相关免费 ...

最新文章

热门文章