Слияние кода завершено, страница обновится автоматически
Это функция, параметром которой является ввод из поля фильтрации:
// Можно использовать встроенные в браузер encodeURI или encodeURIComponent,
// также можно использовать собственные или сторонние функции типа Base64.encode
encoder: NULL,
// Функция предварительной обработки запроса, её параметр — объект опций jQuery ajax, возвращает false для блокировки запроса
req: null,
// Функция обработки возвращаемых данных, её параметры: (data, status, xhr), возвращаемое значение будет загружено как данные компонента
res: null,
// Отправлять ли запрос на загрузку данных при инициализации
auto: true
},
// Заголовок выпадающего списка
header: {
// Рендерер заголовка, this — это его DOM-объект,
// напрямую изменяем этот объект для изменения заголовка
// вызывается после выполнения инициализации и перед добавлением в контейнер
render: false,
// Фильтр
filter: {
// Действие, запускающее фильтрацию, можно установить как change или enter (по умолчанию).
// Для change действие выполняется при изменении ввода,
// для enter — при нажатии Enter
trigger: 'enter',
// Значение, указывающее, что при отсутствии ввода с клавиатуры в течение указанного времени запускается фильтрация
// единица измерения — миллисекунды, по умолчанию 618
// действует только при trigger = change
delay: 618,
// Текст подсказки для ввода
placeholder: 'Введите и нажмите Enter для фильтрации',
// Различать ли регистр при фильтрации, по умолчанию false
matchCase: false,
// Максимальная длина ввода
maxlength: 32,
// Дополнительное имя класса
css: null,
// Стиль фильтра
style: {}
},
// Дополнительное имя класса
css: null,
// Стиль заголовка
style: {}
},
// Контейнер выпадающих элементов
box: {
// Текст, отображаемый при отсутствии данных в списке
empty: 'Нет данных',
// Способ отображения данных
// возможные значения: list (список, значение по умолчанию), grid (сетка), table (таблица)
layout: layout_list,
// Дополнительное имя класса
css: null,
// Стиль контейнера
style: {},
// Определение столбцов при layout = table
columns: null
},
// Настройка групп элементов
group: {
// Поле значения группы
valueField: false,
// Текстовое поле группы, не задаётся, если используется valueField
textField: false,
// Имя группы при отсутствии поля valueField в элементе данных
unknown: 'Не определено',
// Рендерер группы
render: false,
// Дополнительное имя класса
css: null,
// Стиль группы
style: {}
},
// Выпадающий элемент
item: {
// Массив данных элементов, каждый элемент должен быть объектом
data: [],
// Элемент по умолчанию
value: false,
// Поле элемента для получения/установки значения
valueField: 'id',
// Текстовое поле элемента, текст для отображения
textField: 'text',
// Количество видимых элементов, при превышении этого значения появляется полоса прокрутки
visible: 5,
// Рендерер элемента, используем возвращаемое значение для установки содержимого элемента
// render: function(itemdata, index, alldata){} this указывает на элемент веб-страницы, который будет отрисован.
// itemdata: данные этого элемента
// index: индекс этого элемента в массиве данных
// alldata: все данные выпадающего списка
// установка в false отключает рендерер
render: false,
// Использовать ли асинхронную отрисовку при количестве элементов больше visible (true),
// рекомендуется установить true при большом количестве данных, чтобы избежать блокировки страницы из-за большого количества операций с DOM
async: true,
// Дополнительное имя класса
css: null,
// Стиль каждого элемента
style: {}
},
// Нижний колонтитул выпадающего списка
footer: {
// Рендерер нижнего колонтитула, его контекст — это DOM-элемент,
// непосредственно изменяем этот элемент для изменения нижнего колонтитула
// необходимо обратить внимание, что нижний колонтитул разделён на две области для размещения разных элементов
// вызывается после завершения инициализации перед добавлением в контейнер
render: false,
/**
* Общее количество элементов
/
totalTpl: 'Всего' + str_placeholder + 'элементов',
/*
* Выбранные элементы
*/
selectedTpl: 'Выбрано' + str_placeholder + 'элемента/',
// Дополнительное имя класса
css: null,
// Стиль нижнего колонтитула
style: {}
},
result: {
// Разрешить ли множественный выбор
multi: false,
// Отображать ли индикатор выпадающего списка
// false — всегда скрывать
// true — всегда показывать
// null — показывать только для одиночного выбора, скрывать для множественного
arrow: null,
// Нужно ли синхронизировать выбранное значение с select при создании экземпляра из select, по умолчанию true
sync: true,
// Рендерер выбранного результата, можно изменить рендеринг выбранного результата
render: false,
// Тип отображения выбранных результатов, может быть 0 (отображение количества выбранных элементов по умолчанию) или 1 (отображение списка выбранных элементов)
// это зарезервированный параметр конфигурации
type: 0,
// Дополнительное имя класса для выбранного результата
css: null,
// Стиль выбранного результата
style: {},
// Параметры выбранного результата
item:{
// Рендерер выбранного элемента, можно изменить рендеринг выбранных элементов
// контекст указывает на this компонента раскрывающегося списка
render: false,
// Стиль выбранного элемента
style: null,
// Дополнительное имя класса выбранного элемента
css: null
}
}
} unselect: Function
Событие, которое происходит при отмене выбора элемента в раскрывающемся списке. Контекст this указывает на компонент раскрывающегося списка, а параметры и использование события аналогичны событию select.
Можно реализовать различные эффекты, переопределив эти стили. Если вы хотите просто изменить цвета, вы можете сделать это, напрямую изменив файл src/colors.less и перекомпилировав его. В этом файле представлены большинство цветовых переменных, используемых в компоненте.
Существует только в режиме
popup.
position: fixed.Для разработки необходимо запустить две команды:
yarn dev
npx grunt watch
После этого вы можете получить доступ к http://localhost:5173/ в браузере.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )