Слияние кода завершено, страница обновится автоматически
UI-Select
Стопроцентно оригинальный дизайн пользовательского интерфейса — компонент выбора для фронтенда.
Компонент реализует однократный, множественный, древовидный многоуровневый выбор, повторный упорядоченный выбор, неповторяющийся выбор и другие интерактивные функции.
Жизненный цикл компонента
Особенности Select — это компонент, разработанный специально для проекта Skeleton4j. Он поддерживает различные специальные функции.
Каскадная поддержка В каскадной ситуации источник данных представляет собой статический источник данных в локальном режиме, который задаётся в формате объекта или строки JSON с помощью setDataSource(json).
Поддержка источника данных Компонент может работать в локальном и удалённом режимах. Локальный режим используется для настройки статического источника данных. Удалённый режим используется для взаимодействия с данными в режиме поиска. Панель поиска в пользовательском интерфейсе поддерживает фильтрацию локальных данных и поиск удалённых данных. В зависимости от режима она отображается по-разному: значок фильтрации в локальном режиме и значок поиска в удалённом режиме.
Поддержка формы Компонент работает в традиционном режиме формы. Ниже приведён код для создания формы с двумя компонентами выбора.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单提交</title>
<link href="../select.css" rel="stylesheet" />
</head>
<body>
<form action="test.do">
<!--表单包裹层-->
<div style="width: 360px; margin: 10px;">
<div class="select-ui" id="xxx"></div>
</div>
<!--表单包裹层-->
<div style="width: 360px; margin: 10px;">
<div class="select-ui" id="yyy"></div>
</div>
<input type="submit"/>
</form>
</body>
<script>
var data = {
"nodes": [{
"text": "重庆市",
"value": "023",
"selected": false,
"nodes": null
},
{
"text": "北京市",
"value": "010",
"selected": false,
"nodes": null
}]
};
var select1 = $("#xxx").select()
.setDateSource(data);
var select2 = $("#yyy").select({multiple:true})
.setDateSource(data);
</script>
</html>
Данные, передаваемые в режиме GET, имеют вид:
xxx=023&yyy=023&yyy=010
Пользовательский интерфейс компонента
Параметры компонента
| Параметр | Тип данных | Описание |
|---|---|---|
| width | string | 100px или 25% |
| multiple | boolean | Множественный выбор (по умолчанию — одиночный) |
| duplicate | boolean | Можно ли выбирать один и тот же вариант несколько раз |
| selectParent | boolean | Можно ли выбрать родительский узел нелистового узла |
| placeholder | string | Текст подсказки |
| allowClear | boolean | Отображать ли кнопку обновления |
| closeOnSelect | boolean | Закрывать ли окно выбора после выбора (по умолчанию true) |
| disabled | boolean | Неактивен ли компонент |
| readonly | boolean | Только для чтения |
API компонента
| Метод | Описание |
|---|---|
| select | Создаёт компонент Select, можно передать функцию обратного вызова |
| setDataSource | Устанавливает источник данных в формате JSON для первоначальной инициализации |
| getDataSource | Получает JSON-данные, соответствующие текущим отображаемым опциям |
| setSelectedValue | Устанавливает значение кода для выбранного варианта, отображает результат как массив значений кода |
| getSelectedValue | Получает значение кода выбранного варианта |
| getSelectedText | Получает массив текстов выбранных вариантов |
| getOptions | Получает массивы значений кода и текстов всех опций |
| draw | Перерисовывает пользовательский интерфейс компонента |
| cleanOptions | Очищает все опции и одновременно очищает значения источника данных |
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )