В предыдущей статье резюме опыта структуры разработки, основанной на обработке листинга Metronic [II] [II], и использовании подключаемого jstree, была введена обработка страниц данных, использовался подключаемый модуль Bootstrap Paginator, и был использован список деревьев, был использован плагин Jstree. Эта статья продолжает представлять обще используемый элемент управления Select2 на странице редактирования. Этот элемент управления может обогатить традиционное управление раскрывающимся списком Select, предоставляя больше функций и лучший пользовательский опыт.
1. Введение в CELECT2 CONTROL
Этот плагин представляет собой плагин для расширения на основе Select, который может обеспечить более богатые функции и пользовательский опыт. Его официальный адрес веб -сайта GitHub: https://select2.github.io/. Для конкретных вариантов использования, пожалуйста, см.
Во всей структуре мы использовали множество элементов управления Select2 для обработки отображения контента, включая раскрывающееся списки с одним селектом (включая поле выбора каскадного выбора), выбранное раскрывающееся список, раскрывающийся список дерева и т. Д. Эффект интерфейса заключается в следующем.
1) Каскадный эффект интерфейса провинций, городов и административных регионов в соответствии с интерфейсом редактирования . Если вы выберете провинцию, город под соответствующей провинцией будет загружен. Если вы выберете город, административные регионы под городом будут продолжать загружаться, тем самым достигнув раскрывающегося списка эффекта многоуровневой корреляции.
2) Раскрывающийся список с множественным выбором в интерфейсе редактирования
Но когда мы выбираем контент, система автоматически отобразит данные списка без выбора, который является очень интуитивно понятным и дружелюбным, как показано ниже.
3) раскрывающийся список деревьев
Иногда некоторые из наших данных могут иметь иерархические отношения, такие как организация, список высшего уровня и т. Д.
2. Анализ фактического кода использования элемента управления SELECT2
1) Основной код интерфейса и операция
Используйте элемент управления SELECT2, обычно на регулярном выборе управления, просто установите его (установите свой класс на Select2).
<div> <div> <babel> Важный уровень </label> <div> <select id = "значение" name = "agnable" warehdeler = "важно ..."> </select> </div> </div> </div> <div> <div> <babel> распознавание </label> <div> <select id = "name = name = nacknition" divorder = "diving diver diver diving> </> </> </selet id =" name = name "
Если это фиксированный список, то он просто устанавливает содержимое опции, как показано ниже.
<div> <div> <babel> курение </label> <div> <select id = "smoking" name = "smoking" type = "text" Placeholder = "Smoking ..."> <опция> курение </option> <опция> не курить </option> </select> </div> </div> </div>
Простой код инициализации управления SELECT2 выглядит следующим образом.
$ (document) .ready (function () {$ (". JS-Example-Basic-Single"). Select2 ();});Вообще говоря, если разрешено выбрать несколько элементов, установите несколько = "несколько", как показано в следующем коде.
<select id = "rassedemand" name = "rassedemand" multy = "multy"> </select>
2) Асинхронная операция привязки данных
Вообще говоря, данные нашего элемента управления выбором динамически загружаются из базы данных, поэтому данные обычно получают и связаны через AJAX.
Основываясь на рассмотрении повторного использования кода, мы пишем общую функцию JS для снижения кода операций привязки и улучшения повторного использования кода.
// Связывание Словаря содержимого с указанным SELECT CONTROL FUNCTION BINDSELECT (ctrlName, url) {var control = $ ('#' + ctrlname); // SET SELECT2 COMPTORLING CONTROL.SELECT2 ({AllowClear: True, FormatResult: FormatResult, FormateSelection: FormateSelection, EssapeMarkup: function (m) {return m;}}); // Привязан содержание Ajax $ .getJson (url, function (data) {control.empty (); // очистить раскрывающуюся поле $. });Таким образом, данные, связанные с модулем общественного словаря, могут быть дополнительно инкапсулированы и обработаны следующим образом.
// Связывать содержимое словаря с указанной функцией управления BINDDICTITEM (CTRLNAME, DICTTYPENAME) {var url = '/dictData/getDictJson? DictTypEname =' + encodeuri (dictTypEname); BindSelect (ctrlName, URL);}Таким образом, мы инициализируем элемент управления SELECT2 и динамически связываем соответствующее значение словаря или другие данные. Это может быть достигнуто посредством следующего кода инициализации. Среди них BindDictItem - это операция, которая непосредственно связывает содержимое словаря, BindSelect - это операция, которая получает и связывает данные на основе URL, и $ ("#провинция"). On («изменение», функция (e) {}); Является ли операция обработки функций, такая как $ ("#province"). On ("изменение", function (e) {}); Обрабатывает операцию сцепления, которая обрабатывает изменения в выбранном контенте.
// инициализировать информацию о словаре (раскрывающийся список) function initDictItem () {// Справочник второго присвоения BindDictItem («область», «Рыночный раздел»); BindDictItem («промышленность», «Индустрия клиентов»); BindDictItem («Grade», «уровень клиента»); BindDictItem ("customertype", "type Customer"); BindDictItem («Источник», «Источник клиента»); BindDictItem («CreditStatus», «Кредитный рейтинг»); BindDictItem («Стадия», «Стадия клиента»); BindDictItem («Статус», «Статус клиента»); BindDictItem («значение», «Уровень важности»); // Bind Province, City и административный регион (обработка связи) BindSelect («Провинция», «/провинция/getallprovinceNacmedictjson"); $ ("#Province"). On ("change", function (e) {var provinceName = $ ("#province"). Val (); bindselect ("city", "/city/getcitysbyprovincenamedictjson? ProvinceName ="+ provintememenme);}); $ ("#City"). On ("change", function (e) {var cityname = $ ("#city"). Val (); bindselect ("District", "/District/getDistrictByCityNAMECTJSON? CityName ="+ CityName);}); }Что касается данных, возвращаемых контроллером MVC, мы возвращаем список данных JSON на линейную страницу, и их формат данных заключается в следующем.
[{"Text": "", "value": ""}, {"text": "академическая конференция", "Value": "Academic Conference"}, {"Text": "Введение друга", "Value": "Введение друга"}, {"Текст": "Рекламный СМИ", "Value": "Adverting Media"}]]]Таким образом, когда передняя страница связывает элемент управления SELECT2, используются свойства объекта JSON.
// Привязан содержание Ajax $ .getJson (url, function (data) {control.empty (); // очистить раскрывающуюся поле $.Код реализации контроллера выглядит следующим образом:
/// <summary> /// Получить соответствующие данные словаря в соответствии с типом словаря, чтобы облегчить связывание элементов управления пользовательским интерфейсом /// </summary> /// <param name = "dicttypeName"> Имя типа словаря </param> /// <return> </returns> public getDictjson (String dictepenam Список <clistitem> (); Clistitem pnode = new clistitem ("", "" "); treelist.insert (0, pnode); Словарь <string, string> dict = bllFactory <dictData> .Instance.getDictByDictType (dictTypEname); foreach (String Key in dict.keys) {treelist.add (new clistitem (key, dict [key])); } вернуть TojsonContent (TreeList); }3) Списка переплета списка дерева
Для списков атрибутов, таких как иерархические данные их аффилированных компаний, отделов и учреждений, их обязательные операции также аналогичны, как показано в следующем коде.
// bindselect ("company_id", "/user/getmycompanydictjson? UserId ="+@session ["userId"]); $ ("#Company_id"). On ("изменение", function (e) {var companyid = $ ("#company_id"). Val (); bindselect ("dept_id", "/user/getDeptDictJson? ParentId ="+ companyId);}); $ ("#Dept_id"). On ("изменение", function (e) {var deptid = $ ("#dept_id"). Val (); bindselect ("pid", "/user/getuserdictjson? Deptid ="+ deptid);});Это просто данные, которые они возвращают, мы просто используем их в качестве содержимого отображения.
[{"Text": "Iqidi Group", "value": "1"}, {"text": "Guangzhou Branch", "value": "3"}, {"Text": "Shanghai Branch", "value": "4"}, {"Text": "Beijing Branch", "value": "5"}]Или, как показано ниже
[{"Text": "Guangzhou Branch", "value": "3"}, {"Text": "Office" General Maner's Office "," Value ":" 6 "}, {" Text ":" Финансовый отдел "," Value ":" 7 "}, {" Text ":" Инженерный отдел "," Value ":" 8 ",", ",": ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ":", ",", ":", ",", ",", ",", ",", ":", ",", ",", ",", ":", ",", ",", ",", ",", ",", ",", ",". «Текст»: «Разработать группу», «value»: «14»}, {«текст»: «Разработка группы 2», «Value»: «15»}, {«текст»: «Тестовая группа 2», «Значение»: «15»}, {«Текст»: «Тестовая группа 2», «Значение»: «16»}, {«Текст»: «Текст»: «10»: «»: «10»: «10»: «10»: «10»: «10»: «10»: «10»: «10»: «10»: «Текст»: «10»: «10». 1 "," value ":" 23 "}, {" text ":" Рыночный отдел 2 "," Value ":" 24 "}, {" Text ":" Complossive Department "," Value ":" 11 "}, {" Text ":« Производственное отделение "," Value ":" 12 "}, {" Текст ":" Отдел человека ",": "13"}]Подводя итог вышеупомянутых двух частей, мы видим, что содержание их текста заключается в увеличении пространства в соответствии с иерархическими отношениями, тем самым осознавая отображение иерархических отношений.
Однако с точки зрения эффекта интерфейса эта обработка действительно не так хороша, как отображение раскрывающегося дерева списка в EasyUI. Возможно, для отображения этого дерева можно использовать лучший плагин для начальной загрузки.
4) Обработка назначения управления SELECT2
Методы, представленные выше, касаются инициализации данных управления SELECT2 и связанных с привязкой. Поэтому, если мы связываем значение интерфейса редактирования после инициализации интерфейса, нам необходимо присвоить значение управлению, чтобы он отобразил элементы, которые действительно необходимо отобразить.
Метод очистки управления заключается в следующем.
// очистить значение элемента управления SELECT2 $ ("#pid"). SELECT2 ("val", ""); $ ("#Company_id"). Select2 ("val", ""); $ ("#Dept_id"). Select2 ("val", "");Если необходимо очистить несколько элементов управления, вы можете использовать коллекцию для ее обработки
var select2ctrl = [«область», «промышленность», «класс», «customertype», «источник», «CreditStatus», «Stage», «Статус», «Важность»]; $.
Назначьте значение управлению SELECT2, чтобы отобразить элементы с соответствующим содержанием значения, и операция будет аналогична вышеуказанному.
$ ("#Customertype"). Select2 ("val", info.customertype); $ ("#Grade"). SELECT2 ("val", info.Grade); $ ("#CreditStatus"). Select2 ("val", info.creditStatus); $ ("#Значение"). Select2 ("val", info.spublic);Если вам нужно отобразить его каскадным способом, добавьте обработку функции Onchange, следующую за обработкой назначения следующего каскадного кода.
$ ("#Провинция"). Select2 ("val", info.province) .trigger ('change'); // ссылка $ ("#city"). Select2 ("val", info.city) .trigger ('change'); // ссылка $ ("##District"). Select2 ("val", info.district); $ ("#Company_ID1"). SELECT2 ("val", info.company_id) .trigger ('изменение'); $ ("#DEPT_ID1"). SELECT2 ("val", info.dept_id) .trigger ('изменение'); $ ("#Pid1"). Select2 ("val", info.pid);Наконец, для справки существуют два интегрированных эффекта интерфейса.
Выше приведено краткое изложение опыта программы Metronic Development Bootstrap, основанной на раскрывающемся списке [Three] соответствующего содержания использования плагина Select2. Я надеюсь, что это будет полезно для всех. Если вы хотите узнать больше информации, обратите внимание на веб -сайт wulin.com!