Рубрики
Без рубрики

Добавьте многосекретный выпадающий путь в ваше приложение JavaScript

Этот блог подробно объясняет добавление многосекретового раскрывающегося списка в приложении JavaScript и различных факторов настройки. Теги с JavaScript, WebDev, учебником, производительностью.

Syncfusion Essential JS 2 обеспечивает многосекретный компонент, который поддерживает все функциональные возможности из коробки для создания аналогичной мультиселектной компоненты. Этот интерфейс улучшает пользовательский опыт поиска, выбора и удаления элементов интерактивным способом, способом, который является предпочтительным практически во всех приложений. Essential JS 2 Multiselect Compents – это расширенная версия HTML Select с режимом выбора, флажки, сортировку, группировкой, шаблонами, пользовательскими значениями и т. Д.

В этом блоге вы собираетесь узнать, как начать работу с Multiselect Component и исследовать свои самые важные функции.

Начните с многосекретно-компонента

Мультиселлективный компонент можно настроить, выполнив следующую эти шаги в Teamscript:

1. Выложите основные JS 2 QuickStart Репозиторий семян и настройте раскрывающийся пакет в файле System.config.js.

"@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js"

2. Вставьте пакеты NPM, используя следующую команду.

$ npm install

3.dd входной элемент HTML, который должен быть инициализирован как компонент в файле index.html.

4. Инициализируйте компонент в файле App.ts, как показано ниже.

import { MultiSelect } from '@syncfusion/ej2-dropdowns';

// initialize MultiSelect component
let msObject: MultiSelect = new MultiSelect();

// render initialized MultiSelect
msObject.appendTo('#multi-select');

Заполните данные

Multiselect представляет собой компонент, связанный с данными и может быть связан с данными из массивов примитивных данных, коллекций данных JSON или удаленных источников данных, таких как ODATA, ODATA V4, URL и веб-API для отображения данных. Вы можете сопоставить источник данных в виде DataManager или типа коллекции напрямую.

Чтобы связать удаленные службы, создайте DataManager с URL-адресом сервиса и свяжитесь с компонентом, как показано ниже.

import { MultiSelect } from '@syncfusion/ej2-dropdowns';
import { Query, DataManager, ODataAdaptor } from '@syncfusion/ej2-data';

let listObj: MultiSelect = new MultiSelect({
    dataSource: new DataManager({
        url: 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Customers',
        adaptor: new ODataAdaptor,
        crossDomain: true
    }),
    query: new Query().select(['ContactName', 'CustomerID']).take(25),
    fields: { text: 'ContactName', value: 'CustomerID' }
});
listObj.appendTo('#multi-select');

Многосекрета с данными

Настройка режима выбора

Выбранные элементы могут быть визуализированы в текстовом поле с различными режимами:

  • По умолчанию
  • Коробка (чип)
  • Делимитр
  • Флажок

Коробка (чип)

Выбранные элементы отображаются с коробкой (чип) и связаны с значком закрытия. Пользователи могут удалить каждую коробку (чип) с кнопкой закрытия и могут перемещаться по полям (чипам), используя клавиши со стрелками. Чтобы включить это многоизведенное Режим Установите свой свой свой свойство в коробку. Как настроить внешний вид коробки описан в этом Документация раздел.

let msObj: MultiSelect = new MultiSelect({

    // --- Initialize component with data source, query, and fields

    mode:"Box"
});

Multiselect в поле Box

Делимитр

При выборе нескольких элементов выбранные элементы можно разделить с нужным символом в качестве разделителя. По умолчанию символ разделителя установлен на запятую. Персонаж разделителя настраивается с использованием Delimiterchar имущество. Чтобы включить это многоизведенное Режим Установите свойство Mode для разделителя.

let msObj: MultiSelect = new MultiSelect({

    // --- Initialize component with data source, query, and fields

    mode:" Delimiter"
});

Multiselect в режиме разделителя

По умолчанию

Когда компонент получает фокус, выбранные элементы отображаются с помощью режима коробки (чип). После того, как компонент будет сосредоточиться, выбранные элементы изменяются с разделителем.

Компонент получает фокус:

Компонент получает фокус-в

Компонент получает фокусировку:

Компонент получает фокусировку

Флажок

Компонент Multiselect позволяет выбрать несколько элементов с помощью флажков. Список элементов заполняет флажки, когда этот режим включен. Чтобы включить этот режим многоизведения, установите Режим Свойство для флажка.

Примечание. Импортируйте модуль флажков из пакета кнопок EJ2 и CheckBoxSelection от пакета EJ2-Downdows, чтобы включить эту опцию в MultiSelect Component.

import { MultiSelect,CheckBoxSelection } from '@syncfusion/ej2-dropdowns';
import { CheckBox, ChangeEventArgs } from '@syncfusion/ej2-buttons';
import { Query, DataManager, ODataAdaptor } from '@syncfusion/ej2-data';

MultiSelect.Inject(CheckBoxSelection);

let listObj: MultiSelect = new MultiSelect({
    dataSource: new DataManager({
        url: 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Customers',
        adaptor: new ODataAdaptor,
        crossDomain: true
    }),
    query: new Query().select(['ContactName', 'CustomerID']).take(25),
    fields: { text: 'ContactName', value: 'CustomerID' },
    mode:"CheckBox"
});
listObj.appendTo('#multi-select');

Multiselect с режимом проверки

Добавление пользовательского значения (метка)

Пользователь может динамически добавлять новые элементы с существующим источником данных. Предметы не должны совпадать точно с существующими элементами всплывающего списка. Добавлены новые элементы добавления в конце списка. Чтобы добавить пользовательское значение для существующей коллекции данных, введите пользовательское значение и нажмите клавишу Enter.

let msObj: MultiSelect = new MultiSelect({

    // --- Initialize component with data source, query, and fields

    allowCustomValue: true
});

Многосекрета с пользовательской ценностью

Группировка коллекции

Мы можем организовать логически связанные предметы как группы во всплывающем списке. Заголовок группы отображается как встроенные, так и статически над группами элементов. Чтобы включить функцию группировки, карта Groupby поле на привязку данных.

import { MultiSelect } from '@syncfusion/ej2-dropdowns';
import { Query, DataManager, ODataAdaptor } from '@syncfusion/ej2-data';

let listObj: MultiSelect = new MultiSelect({
    dataSource: new DataManager({
        url: 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Customers',
        adaptor: new ODataAdaptor,
        crossDomain: true
    }),
    query: new Query().select(['ContactName', 'CustomerID', 'Coun-try']).take(50),
    fields: { text: 'ContactName', value: 'CustomerID', groupBy: 'Country' },
    mode:"Box"
});
listObj.appendTo('#multi-select');

Многосекрета с группой

Конфигурация фильтра

Элементы данных могут быть отфильтрованы и отскоки для многосекретационного компонента. Компонент обеспечивает способ достижения этого:

  1. Фильтрация по умолчанию не включена, так что включить его, установив allowfiltering правда.
  2. Определите Фильтрация событие для фильтрации данных на основе параметров.
import { MultiSelect, FilteringEventArgs  } from '@syncfusion/ej2-dropdowns';
import { Query, DataManager, ODataAdaptor } from '@syncfusion/ej2-data';

let listObj: MultiSelect = new MultiSelect({
    dataSource: new DataManager({
        url: 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Customers',
        adaptor: new ODataAdaptor,
        crossDomain: true
    }),
    query: new Query().select(['ContactName', 'CustomerID', 'Coun-try']).take(50),
    fields: { text: 'ContactName', value: 'CustomerID', groupBy: 'Country' },
    mode:"Box",
    allowFiltering: true,
    filtering: function (e: FilteringEventArgs) {

    }

});
listObj.appendTo('#multi-select');

Multiselect с отфильтрованными данными

Настройка с использованием шаблона

В этом разделе объясняется настройка появления элементов данных по умолчанию, выбранные значения, заголовки группы, заголовки и нижних колонтитулов.

Значение шаблона

Компонент MULTISELECT обеспечивает гибкость для настройки визуализации каждого выбранного элемента с использованием шаблона значения. Шаблон значения применим к настройке внешнего вида в поле.

let msObj: MultiSelect = new MultiSelect({

    // --- Initialize component with data source, query, and fields

    valueTemplate:"${ ContactName} - ${ Country}"
});

Выбранный элемент с шаблоном

Шаблон предмета

Вы можете указать, как каждый отдельный элемент отображается во всплывающем окне.

let msObj: MultiSelect = new MultiSelect({

    // --- Initialize component with data source, query, and fields

itemTemplate: "${ ContactName} — ${ Country}", });

Список с шаблоном элемента

Шаблон заголовка

Вы можете включить раздел заголовка для всплывающего окна Multiselect, который отображается в верхней части всплывающего окна. Teadertemplate Свойство используется для предоставления содержимого заголовка, который принимает как строку, так и содержимое HTML.

let msObj: MultiSelect = new MultiSelect({

    // --- Initialize component with data source, query, and fields

    headerTemplate:"NameCity"

});

Список с заголовком

Шаблон нижнего колонтитула

Вы можете включить раздел нижнего колонтитула, который отображается в нижней части всплывающего окна многосекванта. Footertemplate Свойство используется для обеспечения содержания нижнего колонтитула, который принимает как строку и содержимое HTML.

let msObj: MultiSelect = new MultiSelect({

    // --- Initialize component with data source, query, and fields

    footerTemplate:" Total list items: 50 "

});

Список с нижним колонтитулом

Нет шаблона записей

Когда источник данных, который связывается с мультиселектным компонентом, имеет пустые записи или нет, обнаруженные в результатах фильтрации, шаблон записей не отображается в многоселектном компоненте. Используйте NorecordStemplate Свойство, чтобы определить пользовательский внешний вид для всплывающих записей.

let msObj: MultiSelect = new MultiSelect({

    // --- Initialize component with data source, query, and fields

    noRecordsTemplate: " NO DATA AVAILABLE "

});

Всплывающую без шаблона записей

Шаблон ошибки действия

Когда вы связываете Multiselect Component с удаленными данными, а данные FECTH FACTION, шаблон отказа действия действия отображается во всплывающем окне.

let msObj: MultiSelect = new MultiSelect({

    // --- Initialize component with data source, query, and fields

    actionFailureTemplate:" Data fetch get fails "

});

Запрос Process Data Process

Групповой шаблон

Когда элементы списка сгруппированы с логическим порядком, выше каждой группы отображается заголовок группы. Содержание заголовка группы может быть настроено с использованием Грюпчаты имущество.

let msObj: MultiSelect = new MultiSelect({

    // --- Initialize component with data source, query, and fields

    groupTemplate:"${City}"

});

Список с пользовательской группой заголовка

Настройка коробки (чип) внешний вид

По умолчанию чипы имеют стили на основе текущей прикладной темы. Но вы можете настроить появление чипа, добавив свои собственные классы CSS, используя метки событий многосекретационного компонента. Импорт Таргингвентаргс из пакета EJ2-раскрывающихся, чтобы настроить Помежки мероприятие.

let msObj: MultiSelect = new MultiSelect({

    // --- Initialize component with data source, query, and fields

    tagging: (e: TaggingEventArgs) => {

        // Customize code here

    }

});

Заключение Вы научились начать работу с многосектурными компонентами и другими важными функциями в этом блоге. Вы можете узнать об этом контроле дальше в следующих ресурсах. Пожалуйста Попробуйте многоселлекты сами И если у вас есть какие-либо вопросы по использованию компонента, или если вы хотите предоставить отзыв, пожалуйста, сделайте это в разделе «Комментарии».

Github Источник: https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/dropdowns.

Демоны: https://ej2.syncfusion.com/demos/#/material/multiselect/default.html

Руководство пользователя Документация: https://ej2.syncfusion.com/documentation/multi-select/?lang=typescript

Пост Добавьте многосекретный выпадающий путь в ваше приложение JavaScript появился первым на Синхронические блоги Отказ

Оригинал: “https://dev.to/syncfusion/add-a-multiselect-dropdown-into-your-javascript-application-31ei”

Читайте ещё по теме: