Сортировка

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

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

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

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

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

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

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

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

"int" - сравнивает числовые значения;
"date" - сравнивает даты;
"string" - сравнивает строковые значения;
"string_strict" - сравнивает строки, чувствительные к регистру;
"text"- сравнивает видимый текст элемента (включая темплейт);
"server" - выдает запрос на стороне сервера для отсортированного набора данных;
"string_locale" - compares string values based on the locale;
"string_locale_strict" - case-sensitive "string_locale";
"text_locale" - compares visible item text based on the locale (including template), datatable only;
"raw" - базовый сортировщик с простым сравнение (a>b и наоборот);
пользовательский тип сортировки.

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

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

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

Упомянутые выше режимы сортировки работают со значениями столбца определенными по их 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" }]
    }
]

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

Сортировка по датам реализуется в режиме "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 = /*парсит строку в даты*/
    }
}

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

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

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

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

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

Теперь клик по хедеру вызовет 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.

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

Если вы хотите применить другое поведение сортировки (отличное от предложенного), вы можете определить нужную логику в функции и задать эту функцию как значение атрибута 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 },
        // еще столбцы
    ]
});

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

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

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

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

Управление знаком сортировки в хедере

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

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

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

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

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

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

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

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

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

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

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

webix.DataStore.prototype.sorting.as.bylength = function(a,b,prop){
    return a[prop].length > b[prop].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.