imlzw-formSelects: На основе поддержки layui от hnzzmsf/layui-formSelects в многопозиционное выпадающее меню были добавлены функции постраничной асинхронной загрузки данных. Подробнее можно узнать из документации оригинального автора.

На основе Layui — решение для множественного выбора select

formSelects: функции

Базовый функционал:
- множественный выбор;
- группировка;
- получение и присвоение значений;
- прослушивание изменений;
- поиск;
- включение и отключение;
- различные скины для множественного выбора.
- повторение выбора — не реализовано.
Расширенный функционал:
- направление раскрывающегося списка;
- отображение количества элементов;
- количество выбранных элементов;
- удалённый поиск;
- динамические данные;
- создание динамических элементов;
- фильтрация поиска;
- быстрые операции;
- шаблоны опций;
- многоуровневая привязка данных.

Структура каталога:

UI — некоторые библиотеки компонентов, например, Layui.
dist — скомпилированный код, готовый к использованию в рабочей среде:
- formSelects-v3.js — версия 3;
- formSelects-v4.css — версия 4;
- formSelects-v4.js — версия 4;
- formSelects-v4.min.js — сжатая версия 4.
docs — каталог документации.
example — примеры использования.
src — исходный код для разработки:
- formSelects-v3.js;
- formSelects-v4.js.
README.md.

Установка Рекомендуется клонировать последнюю версию с Github.

<!-- Импорт стилей -->
<link rel="stylesheet" type="text/css" href="//raw.githack.com/hnzzmsf/layui-formSelects/master/dist/formSelects-v4.css"/>

<!-- Импорт jQuery -->
<script src="//unpkg.com/jquery@3.3.1/dist/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<!-- Импорт компонента -->
<script src="//raw.githack.com/hnzzmsf/layui-formSelects/master/dist/formSelects-v4.js" type="text/javascript" charset="utf-8"></script>

Быстрый старт

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" type="text/css" href="formSelects-v4.css"/>
	</head>
	<body>
		<div>
			<select name="city" xm-select="selectId">
			    <option value="1" disabled="disabled">北京</option>
			    <option value="2" selected="selected">上海</option>
			    <option value="3">广州</option>
			    <option value="4" selected="selected">深圳</option>
			    <option value="5">天津</option>
			</select>
		</div>

		<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="formSelects-v4.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			formSelects.render('selectId');
		</script>
	</body>
</html>

Обучение и общение QQ группа: 769620939. QQ номер: 707200833.

Обновление 4.0.0.0713.

Ссылки Код на Gitee: https://gitee.com/imlzw/formSelects.

Новые возможности

Добавлена функция постраничного отображения элементов:

<select id="industry_category_select"  name="industryCategory" xm-select-search=""  lay-verify="required" xm-select-radio="" 
  placeholder="行业" autocomplete="off" xm-select-height="36px" xm-select-skin="normal" xm-select="industry_category_select" lay-filter="industry_category_select">
  <option value="">请选择行业类别</option>
</select>

<script>
layui.formSelects.data('industry_select',"server", {
    url: '/industryList',
    showPage: true,
    size: 6
});
</script>

Добавлена возможность асинхронной загрузки элементов второго уровня:

<select name="orgArea" xm-select="orgArea" lay-verify="required"  xm-select-radio="" xm-select-skin="normal">
    <option value="">请选择单位所在省市区</option>
</select>

<script>
layui.formSelects.data('orgArea', 'server', {
    url: '/city',
    linkage: true,
    linkageWidth: 130
});
</script>

OSCHINA-MIRROR/imlzw-formSelects

Комментарии ( 0 )

Введение

Обновления

Участники

Недавние действия