City

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

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

Для инициализации виджета запустите функцию конструктор city.
                            
rc.city({
    choiceMode: 1,
    getCountries: (params, callback) => {
        callback(countries); // Ваша логика получения списка стран
    },
    getAreas: (params, callback) => {
        callback(getAreas(params.CountryId)); // Ваша логика получения списка регионов
    },
    getCities: (params, callback) => {
        callback(getCities(params.RegionId, getAreas(params.CountryId))); // Ваша логика получения списка городов
    },
});
                            
                        

Формат данных

Виджет поддерживает три коллекции данных: страны, регионы и города. Каждая коллекция поддерживает объекты с определенным интерфейсом.
Страна:
                    
{
    Code: 1,
    Id: 1,
    Title: 'Супер Страна'
}
                    
                
Регион:
                    
{
    Code: 1,
    CountryId: 1, // идентификатор страны, где находится регион
    Id: 1,
    Title: 'Супер Регион'
}
                    
                
Город:
                    
{
    Code: 1,
    Id: 1,
    RegionId: 1, // идентификатор региона, где находится город
    Title: 'Супер Город'
}
                    
                

Получение данных

Для получения данных используйте следующие параметры, указав пользовательские функции:
Параметр Описание
getCountries Получить список стран
getAreas Получить список регионов страны. Получает в качестве входного параметра значение идентификатора текущей выбранной страны (CountryId).
getCities Получить список городов региона. Получает значения идентификаторов выбранных региона (RegionId) и страны (CountryId).
Второй параметр функций получения данных - это функция обратного вызова куда следует передать результат.
                            
const countries = [
    {
        Code: 1,
        Id: 1,
        Title: 'Супер Страна'
    },
    {
        Code: 2,
        Id: 2,
        Title: 'Мега Страна'
    },
    {
        Code: 3,
        Id: 3,
        Title: 'Гига Страна'
    }
];

const areas = [
    {
        Code: 1,
        CountryId: 1,
        Id: 1,
        Title: 'Супер Регион'
    },
    {
        Code: 2,
        CountryId: 2,
        Id: 2,
        Title: 'Мега Регион'
    },
    {
        Code: 3,
        CountryId: 3,
        Id: 3,
        Title: 'Гига Регион'
    }
];

const cities = [
    {
        Code: 1,
        Id: 1,
        RegionId: 1,
        Title: 'Супер Город'
    },
    {
        Code: 2,
        Id: 2,
        RegionId: 2,
        Title: 'Мега Город'
    },
    {
        Code: 3,
        Id: 3,
        RegionId: 3,
        Title: 'Гига Город'
    }
];

const getAreas = countryId => countryId ? areas.filter(({ CountryId }) => CountryId === countryId) : areas

const getCities = (areaId, selectedAreas) => {
    let  a = selectedAreas || areas;
    a = areaId ? a.filter(({ Id }) => Id === areaId) : a;
    a = a && a.length && a[0];

    return a ? cities.filter(({ RegionId }) => RegionId === a.Id) : cities;
};

rc.city({
    getCountries: (params, callback) => {
        callback(countries);
    },
    getAreas: (params, callback) => {
        callback(getAreas(params.CountryId));
    },
    getCities: (params, callback) => {
        callback(getCities(params.RegionId, getAreas(params.CountryId)))
    },
});
                            
                        

Предустановка выбранных значений

Установив соответствующие параметры конфигурации возможно передать коллекции заранее выбранных значений.
Параметр Описание
cities Коллекция выбранных городов
areas Коллекция выбранных регионов
                            
rc.city({
    getCountries: (params, callback) => {
        callback(countries);
    },
    getAreas: (params, callback) => {
        callback(getAreas(params.CountryId));
    },
    getCities: (params, callback) => {
        callback(getCities(params.RegionId, getAreas(params.CountryId)))
    },
    areas: [{
        Code: 1,
        CountryId: 1,
        Id: 1,
        Title: 'Супер Регион'
    }],
    cities: [{
        Code: 1,
        Id: 1,
        RegionId: 1,
        Title: 'Супер Город'
    }]
});
                            
                        

Дополнительные настройки

Так же задав соответствующие параметры возможно сконфинурировать внешний вид и поведение виджета:
Параметр Описание
choiceMode Значения: 1 - возможен только выбор города, 2 - значение по умолчанию, возможен выбор города и региона
description Второй заголовок, с возможным описанием
help Дополнительная служебная информация, возможно задать html-разметку
maxValuesCount Максимальное количество возможных выбранных значений
title Основной заголовок
                            
rc.city({
    choiceMode: 1,
    title: 'Выбери нужный город',
    description: 'осуществляем поиск среди стран и областей',
    help: 'очень важная информация',
    maxValuesCount: 1
});
                            
                        

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

При нажатии на кнопку сохранить вызывается пользовательская функция обработчик, которая в качестве параметров получает списки выбранных городов и регионов. При закрытии или отмене данная функция так же будет вызвана, но с пустыми значениями параметров.
                            
const getTitles = (c, t) => !c || !c.length ? `${t}: ничего не выбрано` : `${t}: ${c.map(value => value.Title).join(', ')}`;

const onValueSelected = (cities, areas) => {
    $.notify(getTitles(areas, 'регионы') + ', ' + getTitles(cities, 'города'), {position: "top center", className: 'success'});
};

rc.city({
    choiceMode: 1,
    getCountries: (params, callback) => {
        callback(countries); // Ваша логика получения списка стран
    },
    getAreas: (params, callback) => {
        callback(getAreas(params.CountryId)); // Ваша логика получения списка регионов
    },
    getCities: (params, callback) => {
        callback(getCities(params.RegionId, getAreas(params.CountryId))); // Ваша логика получения списка городов
    },
}, onValueSelected);
                            
                        
Made on
Tilda