VisJS时间轴:在时间轴中对项目进行排序

本文介绍了VisJS时间轴:在时间轴中对项目进行排序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在使用 vis-js时间轴库来构建时间轴. 我需要对每个组中的元素进行排序. 群组类似于示例此处. 我看到我可以使用此处的"order选项"来完成此操作 但我不明白它是如何工作的.

I'm using vis-js timeline library for building a timeline. I need to sort the elements in each group. Groups are like in example here. I saw that I can do this using the "order option in the item" like here but I cannot understand how it works.

我尝试过这种方式:

var groups = new vis.DataSet([ {id: 0, content: 'First', value: 1}, {id: 1, content: 'Third', value: 3}, {id: 2, content: 'Second', value: 2} ]); // create a dataset with items var items = new vis.DataSet([ {id: 0, group: 0, content: 'item 0', start: new Date(2014, 3, 17), end: new Date(2014, 3, 21)}, {id: 1, group: 0, content: 'item 1', start: new Date(2014, 3, 19), end: new Date(2014, 3, 20)}, {id: 2, group: 1, content: 'item 2', start: new Date(2014, 3, 16), end: new Date(2014, 3, 24)}, {id: 3, group: 1, content: 'item 3', start: new Date(2014, 3, 23), end: new Date(2014, 3, 24)}, {id: 4, group: 1, content: 'item 4', start: new Date(2014, 3, 22), end: new Date(2014, 3, 26)}, {id: 5, group: 2, content: 'item 5', start: new Date(2014, 3, 24), end: new Date(2014, 3, 27)} ]); // create visualization var container = document.getElementById('visualization'); var options = { editable: true }; var timeline = new vis.Timeline(container); timeline.setOptions(options); timeline.setGroups(groups); var temp = items.get({ order:function(a,b){ return b.id-a.id; if(a.id > b.id) return -1; if(a.id < b.id) return 1; return 0; }, }); timeline.setItems(temp);

变量temp包含已排序的数组，但是在创建时间线时-在第三组项目中，排序方式为:item3，item2，item4. 但是它们必须按照item2，item3，item4进行排序.

Variable temp contains an array which was sorted, but when timeline is create - in third group items sorted like: item3, item2, item4. But they have to sorted like item2, item3, item4.

推荐答案

您可以通过在时间轴配置中提供order选项的功能来在时间轴中订购商品.您可以在启动时间轴时定义它

You can order items in the timeline by providing a function for order option in timeline configurations. You can define it when initiating the timeline

var options = { order: function(a,b){ return b.id-a.id; }, editable: true };

或初始化后

timeline.setOptions({ order: function(a,b){ return b.id-a.id; }, });

order函数将使用两个参数来调用，它们是将要比较的item对象.您可以在此处实现任何逻辑.您只需要返回一个整数值即可.如果返回值小于0，则第二项(传递给b的项目)将被首先排序；如果返回值大于或等于0，则第一项(传递给a的项目)将被排序.订购第一和第二项将被订购第二.这是有效的演示.

order function will be called with two parameters and they are the item objects which are going to be compared. You can implement any logic here. You only need to return a integer value back. If the return value is less than 0 then the second item (item passed to b) will be ordered first and if the return value is greater than or equal to 0 then the first item (item passed to a) will be ordered first and second item will be ordered second. This is a working demo.