项目管理软件dhtmlxGantt配置教程（五）：如何对列进行排序

这篇文章给大家讲解dhtmlxGantt如何实现列的排序。

dhtmlxGantt能实现对 格列中的数据进行排序（在客户端）。

有两种方法可以实现 格排序：

1. 通过单击具有启用排序属性的列的标题；
2. 由排序方法的API 调用（可以从一些事件或动作中调用，即按钮单击或页面加载）。

1、通过单击标题进行排序

一旦用户单击标题，甘特图就会显示一个特殊的控件，指示该表当前按哪一列排序以及该排序的方向（升序或降序）。下一次单击同一标题将反转排序方向。

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

gantt.config.sort = true;gantt.init("gantt_here");

2、程序化排序

要根据某些操作或事件（即按钮单击或页面加载）对 格进行排序，请调用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>

3、自定义排序功能

要将自定义排序函数应用于 格，请使用自定义函数的名称作为第一个（也是唯一的）参数调用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:(a<b1:0);         } else {            return a>b1:(a<b:0);         }    };</script>

4、每列 格排序

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

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

gantt.config.columns[1].sort = false;

2) 通过将sort设置为函数，根据提供的排序函数对列进行排序

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';

dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表，可满足项目管理控件应用程序的所有需求，是最完善的甘特图图表库。了解更多DhtmlxGantt相关内容和资讯，欢迎在线咨询或者私信我获取正版试用版及 价。

甘特图控件交流群：764148812    欢迎进群交流讨论

更多正版甘特图软件下载、购买、授权咨询，请点这里！

标签：