Сортировка

DataTable позволяет сортировать строки данных на клиенте. Существует два способа отфильтровать данные в таблице:

  1. По клику на хедер столбца при включенном атрибуте sort;
  2. С помощью вызова ( может быть вызвано событием или действием, например загрузкой страницы или кликом кнопки ) метода sort().

Раздел о сортировке в туториалах Webix.

Сортировка по клику на хедер

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

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

Режимы сортировки для различных типов данных

Для корректной сортировки данных DataTable предлагает несколько типов сортировки:

  • "int" - сравнивает числовые значения;
  • "date" - сравнивает даты;
  • "string" - сравнивает строковые значения;
  • "string_strict" - сравнивает строки, чувствительные к регистру;
  • "text"- сравнивает видимый текст элемента (включая темплейт);
  • "server" - выдает запрос на стороне сервера для отсортированного набора данных;
  • "raw" - базовый сортировщик с простым сравнение (a>b и наоборот);
  • пользовательский тип сортировки.

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

Конфигурация сортировки

webix.ui({
    view:"datatable",
    columns:[
        { id:"title", header:"Film title",    sort:"string"},
        { id:"year",  header:"Release year", sort:"int"}
    ]
});

Related sample:  Sorting. Using Built-in Means

Упомянутые выше режимы сортировки работают со значениями столбца определенными по их ID и игнорируют значения определенные темплейтами столбца (кроме sort:"text") или опциями.

В примере кода ниже, названия отсортированы, при этом категории отображаются (потому что во время отображения темплейт переопределяет ID):

{ id:"title", template:"#cat_id#", header:"Category ID" }

В этом примере ID отсортированы, но значения отображаются:

{ id:"cat_id",  header:"Category", collection:[
    { id:1, value:"Crime"}, { id:2, value:"Thriller" }]
}

Сортировка по видимому тексту

Сортировка по видимому тексту включается с помощью режима сортировки "text", в котором сравниваются строковые значения, отображаемые в таблице.

Режим учитывает значения столбцов, определенные не с помощью ID, а темплейтом и коллекцией значений:

columns:[
    { id:"title",template:"#cat_id#", header:"Category ID", sort:"text" },
    { id:"cat_id",  header:"Category",sort:"text", collection:[
        { id:1, value:"Crime"}, { id:2, value:"Thriller" }]
    }
]

Related sample:  Sorting. Using Built-in Means

Сортировка по датам

Сортировка по датам реализуется в режиме "date":

webix.ui({
    view:"datatable",
    columns:[
        {
            header:"Y-m-d",
            sort:"date",
            id:"start",
            format:webix.Date.dateToStr("%Y-%m-%d")
        },
        {
            header:"m/d/Y",
            sort:"date",
            id:"start",
            format:webix.Date.dateToStr("%m/%d/%y")
        },
    ],
    data:[
        { text:"Joint 2", start:new Date(2011,1,14) },
        { text:"Finish", start:new Date(2012,11,12) }
    ]
});

Related sample:  Using Date Templates

Т.к. даты представлены как строки, они хранятся как объекты дат. Таким образом, если даты хранятся как строки, вам необходимо преобразовать их в объекты DateTime перед сортировкой. Для этого вы можете применить маппинг строковых значений:

// объект столбца
{
   "map":"(date)#createdDate#",  "id": "createdDate",
   "sort": "date",  "header": "Date Added", "editor": "date"
}

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

view:"datatable",
scheme:{
    $init:function(obj){
        obj.createdDate = /*парсит строку в даты*/
    }
}

Related sample:  Converting Strings to Dates

Подробнее о преобразовании строк в даты.

Запуск серверной сортировки на клиентской стороне

Можно выполнить запрос к серверу для сортировки данных в бэкенде и перезагрузить отсортированный набор данных в таблицу:

Функциональность доступна в режиме server:

view:"datatable",
columns:[
    { id:"package", header:"Name", sort:"server"},
    {..}
],
url:"data.php"

Related sample:  Datatable: Serverside Filtering and Sorting

Теперь клик по хедеру вызовет GET запрос на стороне сервера со следующими параметрами: sort[package]=desc (data.php?sort[package]=desc), что позволит послать:

  • имя операции (sort);
  • свойство данных (в нашем случае: package);
  • порядок сортировки (в нашем случае: descending).

Новые данные будут загружены в таблицу и заменят исходный набор.

Если для определенного столбца включена настройка serverFilter, данные будут отфильтрованы и отсортированы на сервера перед возвращением на сторону клиента.

Множественная сортировка

Вы также можете отсортировать сразу несколько столбцов, задав режим "multi" свойству sort:

{
    view:"datatable", sort:"multi",
    autoConfig:true, url:"data/films"
}

Или отсортировать данные по API:

$$("grid").sort([
    {
        by:"title", dir:"asc"
    },{
        by:"rank", dir:"asc"
    }
]);

Чтобы отметить отсортированные столбцы с помощью стрелок (возрастающая/ниспадающая сортировка) и порядкового номера, используйте метод markSorting после sort().

Чтобы включить несколько столбцов в сортировку, пользователь должен нажать на нужный хедер с зажатой клавишей Ctrl.

Related sample:  DataTable: Sorting By Multiple Columns

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

Если вы хотите применить другое поведение сортировки (отличное от предложенного), вы можете определить нужную логику в функции и задать эту функцию как значение атрибута sort.

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

  • 1 - второй объект, идет перед первым;
  • -1 - первый объект идет перед вторым;
  • 0 - порядок объектов не меняется.

Функция может быть определена в общем виде:

Использование пользовательских функций сортировки

function sortByParam(a,b){
    a = a.rank;
    b = b.rank;
    return a > b ? 1 : (a < b ? -1 : 0);
};
 
webix.ui({
    view:"datatable",
    columns:[
        { id:"title",   header:"Film title", sort:sortByParam },
        // еще столбцы
    ]
});

Related sample:  Sorting Datatable. Using Custom Sorting Functions

Программная сортировка

Чтобы вызвать сортировку по определенному событию или действию, например при нажатии на кнопку или при загрузке страницы, используйте метод sort().

Сортировка таблицы нажатием на кнопку

webix.ui({
    rows:[
        { view:"datatable", id:"grid", ... },
        { view:"button", value:"Sort table", click:function(){
            $$("grid").sort("#title#", "asc", "string");
        } }
    ]
});

Related sample:  Sorting Datatable. Using Sorting Methods

Controlling header sorting mark

Вы можете показывать и скрывать знак сортировки (˄/˅) вызвав метод markSorting() с параметрами:

  • column_id - ID колонки;
  • direction - направление сортировки: "asc" или "desc";
  • preserve - флаг для сохранения предыдущего маркера сортировки.

Чтобы убрать все стрелки с хедеров, вызовите метод markSorting без параметров.

Отменить сортировку

grid = webix.ui({ view:"datatable", ...});
 
grid.markSorting("title", "asc");

Related sample:  Sorting Datatable. Using Sorting Methods

Добавить пользовательский тип сортировки

Вы можете определить свой тип сортировки с помощью свойства sorting.as объекта webix.DataStore.prototype.

Вам нужно указать функцию, которая описывает новый тип сортировки:

webix.DataStore.prototype.sorting.as.sort_type = function(a,b){
    return a > b ? 1 : -1;
}

где a, b - это значения ячейки соответствующего столбца.

Например, давайте установим новый тип "bylength", чтобы отсортировать данные по длине текста:

webix.DataStore.prototype.sorting.as.bylength = function(a,b){
    return a.length > b.length ? 1 : -1;
}

Чтобы применить пользовательский тип сортировки, вам нужно задать его имя как значение свойства sort для нужного столбца:

{
    view:"datatable",
    columns:[
        { id:"product1", sort:"bylength" },
        { id:"product2", sort:"bylength" },
        { id:"product3", sort:"bylength" }
    ]
}

Вы также можете задать созданный тип как значение параметра as метода "sort()":

$$("datatable1").sort({
   by:"name",
   dir:"desc",
   as:"bylength"
});
Наверх
If you have not checked yet, be sure to visit site of our main product Webix mvc library and page of javascript datagrid product.