Блог

Я использую библиотеку vis-js timeline для построения временной шкалы. Мне нужно отсортировать элементы в каждой группе.
Группы такие, как в примере здесь. Я увидел, что могу сделать это, используя « order опцию в элементе», как здесь
но я не могу понять, как это работает.

Я пробовал этот способ:

 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 .

Вы можете упорядочивать элементы на временной шкале, предоставляя функцию для order опции в конфигурациях временной шкалы. Вы можете определить это при запуске временной шкалы

 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 ) будет заказан первым, а второй элемент будет заказан вторым. Это рабочая демонстрация.