彩票走势图

dhtmlxGantt使用教程:如何在网格的列中对数据进行排序

翻译|使用教程|编辑:杨鹏连|2021-03-01 16:18:33.407|阅读 498 次

概述:在本文中,您将学习如何在dhtmlxGantt网格中(在客户端上)对数据进行排序。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求,是最完善的甘特图图表库。它允许你创建动态甘特图,并以一个方便的图形化方式可视化项目进度。有了dhtmlxGantt,你可以显示活动之间的依赖关系,显示具有完成百分比阴影的当前任务状态以及组织活动到树结构。

点击下载dhtmlxGantt试用版

dhtmlxGantt允许您在网格的列中(在客户端上)对数据进行排序。

您可以通过2种方式在网格中进行排序:

  1. 通过单击具有启用的sort属性的列的标题;
  2. 通过API的排序方法调用(可以从某些事件或操作(即单击按钮或加载页面)中调用)。
请注意,甘特只能按数据中的值对任务进行排序,而不能对列的模板属性所设置的值进行排序。

通过单击标题进行排序

一旦用户单击标题,甘特图就会开始显示一个特殊控件,该控件指示表当前被排序的列以及排序的方向(升序或降序)。下次单击同一标题将反转排序方向。

要在甘特图中启用排序,请将sort属性设置为true:

gantt.config.sort = true; 
gantt.init("gantt_here");
程序化排序

要对某些操作或事件(即按钮单击或页面加载)进行网格排序,请调用sort方法。

<input type='button' value='Sort by task name' onclick='gantt.sort("text", true);'>
 
<script type="text/javascript" charset="utf-8">
    gantt.init("gantt_here"); 
    gantt.parse(tasks);
</script>
自定义排序功能

要将自定义排序功能应用于网格,请使用您的自定义函数名称作为第一个(也是唯一一个)参数来调用sort方法。

为每对相邻值调用一个自定义排序函数,并返回1,-1或0:

  • 1-具有第一个值对的对象必须位于第二个对象之前;
  • -1-第二个对象在第一个对象之前;
  • 0-两个对象的顺序不变。
<input type='button' value='Sort by the number of holders' 
       onclick='sortByHolders(direction)'>
 
<script type="text/javascript" charset="utf-8">
    var direction = false;
 
    function sortByHolders(direction1){
        direction = !direction;
        gantt.sort(sortHolders);
    };
    function sortHolders(a,b){
         a = a.users.length;
         b = b.users.length;
 
         if (direction){
            return a>b?1:(a<b?-1:0);
         } else {
            return a>b?-1:(a<b?1:0);
         }
    };
</script>
每列网格排序

可以为每个特定的列指定自定义排序规则。每列有三种最常见的排序方案:

1)通过将sort设置为false来禁用对列的排序

gantt.config.columns[1].sort = false;
2)通过将排序功能设置为一个功能,根据提供的排序功能对列进行排序
gantt.config.columns[1].sort = function(a,b){
    return custom_function(a,b);
};
为一对任务对象(a和b)调用自定义排序功能,并返回1,-1或0:
  • 1-具有第一个值对的对象必须位于第二个对象之前;
  • -1-第二个对象在第一个对象之前;
  • 0-两个对象的顺序不变。
3)根据所述任务的不同字段的值通过设定排序的列的排序到该字段
gantt.config.columns[1].sort = 'other_field';

关产品推荐:

VARCHART XGantt支持ActiveX、.Net等平台的C#甘特图控件

AnyGantt构建复杂且内容丰富的甘特图的理想工具

jQuery Gantt Package基于HTML5 / jQuery的跨平台jQuery Gantt包

phGantt Time Package对任务和时间的分配管理的甘特图

APS帮助提升企业生产效率,真正实现生产排程可视化呈现与控制,快速有效响应不同场景的生产计划,提高准时交货能力,提高产能和资源利用率

想要购买dhtmlxGantt正版授权,或了解慧都APS系统请点击

标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP