永利最大(官方)网站

这篇文章给大家讲解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?1:(a<b?-1:0);
         } else {
            return a>b?-1:(a<b?1: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    欢迎进群交流讨论

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