Примеры Форум Поддержка
Документация
StartViews

Available only in PRO Edition

Грид View

Этот вид доступен только в версии Scheduler PRO.

Грид View отображает список предстоящих событий и, в отличие от Agenda View, позволяет настраивать любое количество колонок.

Related sample:  Grid view

Инициализация

Чтобы добавить Грид View в планировщик, выполните следующие шаги:

  1. Включите расширение "grid view" на вашей странице: 
    scheduler.plugins({
    grid_view: true
});
  2. Добавьте вкладку вида в разметку планировщика: 
    <div id="scheduler_here" class="dhx_cal_container" ...>
    <div class="dhx_cal_navline">
       ...
       <div class="dhx_cal_tab" name="grid_tab" style="right:300px;"></div>
    </div>
    ... 
</div>
  3. Установите название вкладки: 
    //'grid_tab' - это имя нашего div
scheduler.locale.labels.grid_tab = "Грид";
  4. Вызовите метод createGridView: 
    scheduler.createGridView({
    name:"grid",
    fields:[    // определяет колонки грида
        {id:"id",   label:'Id',   sort:'int',  width:80,  align:'right'},
        {id:"date", label:'Date', sort:'date', width:'*'},
        {id:"text", label:'Text', sort:'str',  width:200, align:'left'}
    ],
    from:new Date(2019, 3, 10),//левая граница допустимого диапазона дат
    to:new Date(2019, 5, 23)    //правая граница допустимого диапазона дат
});

Related sample:  Grid view

Ограничение диапазона дат

Это расширение позволяет ограничить активные даты, чтобы пользователи не могли выходить за указанные рамки.

Например, если вы хотите ограничить активные даты с 1 января 2010 по 1 января 2011, настройте конфигурацию следующим образом:

scheduler.createGridView({
    name:"grid",
    ..
    from:new Date(2019, 0, 1),
    to:new Date(2020, 0, 1)
});

Активация навигации

Чтобы включить навигацию с помощью кнопок в гриде, просто включите свойство paging:

scheduler.createGridView({
    name:"grid",
    ...
    paging:true
});

Related sample:  Grid view


При включённой навигации, нажатие на кнопки будет прокручивать грид на один месяц вперёд или назад.

Чтобы изменить стандартный временной интервал прокрутки, используйте свойства unit и step:

  • unit - (minute, hour, day, week, month, year) единица времени для прокрутки. По умолчанию 'month'
  • step - (number) сколько единиц прокручивать за раз. По умолчанию 1. 
//прокрутка на 2 недели за раз
scheduler.createGridView({
    name:"grid",
    ...
    paging:true,
    unit:"week",
    step:2
});

Сортировка

Клик по заголовку колонки вызывает контрол, который показывает, по какой колонке сейчас сортируется грид и по какому направлению (по возрастанию или убыванию).
Повторный клик по тому же заголовку меняет направление сортировки.

Поскольку в колонках могут быть разные типы данных (числа, строки, даты), для каждого типа нужен свой метод сортировки.

Поэтому этот вид поддерживает 3 типа сортировки:

  1. int;
  2. date;
  3. str.

Чтобы включить сортировку и указать её тип для колонки, используйте свойство sort.

scheduler.createGridView({
    name:"grid",
    fields:[
        {id:"date",  label:'Date', sort:'date'},
        {id:"text",  label:'Text', sort:'str'}
    ]
});

Пользовательские функции сортировки

Если вы хотите использовать свою логику сортировки, определите функцию и присвойте её параметру sort.

Эта функция будет вызываться для каждой пары соседних значений и должна возвращать 1, -1 или 0:

  • 1 - первое значение должно идти перед вторым;
  • -1 - второе значение должно идти перед первым;
  • 0 - оба значения равны.

Вот пример универсальной функции сортировки:

scheduler.createGridView({
    name:"grid",
    fields:[
        {id:"id",   label:'Id',   sort: sortById},
        {id:"text", label:'Text', sort:'str'}
    ]
});
 
function sortById(a,b){
    a = a.id;
    b = b.id;
    return a>b?1:(a<b?-1:0);
}

Шаблоны данных

По умолчанию каждая колонка отображает данные из свойства, указанного как её id.

Если вы хотите настроить содержимое, отображаемое в колонке, вы можете использовать шаблоны. В этом случае колонка будет показывать данные, возвращаемые функцией-шаблоном.

Шаблоны данных назначаются колонкам с помощью свойства template.

scheduler.createGridView({
    name:"grid",
    fields:[
      {id:"date",label:'Date',template:function(start,end,ev){return "1# "+ev.text}},
       ...
    ]
});

Функция-шаблон получает 3 параметра:

  • start - дата начала события
  • end - дата окончания события
  • ev - объект события

Связанные руководства

 Наверх