Tree

Виджет дает возможность построить и осуществить выбор в древовидной структуре.

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

Для инициализации виджета запустите функцию tree.
                            
const data = [
    {
        id: 1,
        name: '1 значение',
        children: [],
    },
    {
        id: 2,
        name: '2 значение',
        children: [
            {
                id: 3,
                name: '3 значение',
                children: [
                    {
                        id: 5,
                        name: '5 значение',
                        children: [],
                    },
                    {
                        id: 6,
                        name: '6 значение',
                        children: [],
                    },
                    {
                        id: 7,
                        name: '7 значение',
                        children: [],
                    }
                ],
            },
            {
                id: 4,
                name: '4 значение',
                children: [],
            }
        ],
    }
];

rc.tree({
    pageX: e.pageX,
    pageY: e.pageY,
    data: data,
});
                                
                            

Формат данных и основные настройки

Каждое элемент структуры описывается объектом со следующим интерфейсом:
Свойство Описание
id Идентификатор элемента
name Текст элемента видимый пользователю
children Коллекция дочерних элементов
Основные параметры виджета:
Параметр Описание
values Предустанавливает выбранные значения
data Данные структуры
className Пользовательский CSS-класс элемента
maxValuesCount Максимально возможное кол-во выбранных значений
                            
const data = [
    {
        id: 1,
        name: '1 значение',
        children: [],
    },
    {
        id: 2,
        name: '2 значение',
        children: [
            {
                id: 3,
                name: '3 значение',
                children: [
                    {
                        id: 5,
                        name: '5 значение',
                        children: [],
                    }
                ],
            },
            {
                id: 4,
                name: '4 значение',
                children: [],
            }
        ],
    }
];

rc.tree({
    pageX: e.pageX,
    pageY: e.pageY,
    data: data,
    maxValuesCount: 2,
    values: [{id: 1}, { id: 5 }]
});
                                
                            

Получение данных из удаленного источника

Для получения данных воспользуйтесь следующими настройками:
Параметр Описание
url Адрес для получения данных
onAjaxSucces Пользовательская функция обработчик при успешном получении данных
method Тип запроса, по умолчанию GET
                            
rc.tree({
    pageX: e.pageX,
    pageY: e.pageY,
    url: 'https://cdn.rawgit.com/dpheitmeyer/e0c4480fe583663c51de/raw/8e19ab1765dc27b6eeeb480f0187f3fd5a6db6a9/seasons.json',
    method: 'GET',
    onAjaxSuccess: result => result.seasons.map(item => {
        return {
            id: parseInt(Math.random() * 1000),
            name: item,
            children: []
        };
    })
});
                            
                        

Пользовательский шаблон элемента дерева

Передав в значении template пользовательское значение - Вы можете переопределить вид элементов дерева:
                            
 rc.tree({
    className: 'kittens-list',
    pageX: e.pageX,
    pageY: e.pageY,
    data: [
        {
            id: 1,
            name: '1 значение',
            children: [],
        }, {
            id: 2,
            name: '2 значение',
            children: [],
        }
    ],
    template: '<img src="https://placekitten.com/50/50?image=#: id #"/> - #: name #',
});
                            
                        

Возвращаемые данные

При закрытии виджет вызывает пользовательскую функцию обратного вызова, которая в качестве параметров получает список выбранных идентификаторов элементов и список полных элементов.
                            
const getValues = values => values.map(value => value.name).join('\r\n');

const onValueSelected = (ids, values) => {
    $.notify('Выбраны значения:\r\n' +  getValues (values), { position:"top center", className: 'success' });
};

rc.tree({
    pageX: e.pageX,
    pageY: e.pageY,
    url: 'https://cdn.rawgit.com/dpheitmeyer/e0c4480fe583663c51de/raw/8e19ab1765dc27b6eeeb480f0187f3fd5a6db6a9/seasons.json',
    method: 'GET',
    onAjaxSuccess: result => result.seasons.map(item => {
        return {
            id: parseInt(Math.random() * 1000),
            name: item,
            children: []
        };
    }),
}, onValueSelected);
                            
                        
Made on
Tilda