Select

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

Ниже приведена демонстрация просмотра списка, отображающего часть ЛУЧШИХ КНИГ 2021 года от Goodreads:

  1. Перетащите список на холст. Каждый элемент содержит изображение, текст и рейтинговую составляющую. Вы можете обновить отображение всего компонента ListView, настроив макет первой записи.

  2. Щелкнув по компоненту изображения, вы увидите источник изображения, используемый по умолчанию.

  3. Компонент ListView извлекает данные из массива объектов в формате JSON и отображает изображение, текст и рейтинговый компонент для каждой записи. Вы также можете передавать результаты запроса в виде списка.

Привязка данных

Данные компонента представления списка принимают два типа значений: число и массив.

  • Число: Числа обрабатываются как количество строк, и никакие допустимые данные не передаются в компонент ListView.

  • Массив: Длина массива передается как количество строк, и каждая запись в массиве обрабатывается как объект JS в формате JSON, соответствующий строке в компоненте представления списка. Например, следующие данные содержат две строки данных, каждая из которых содержит четыре поля: rate, title, url, and cover.

[
    {
        "rate": "9.2",
        "title": "The Shawshank Redemption",
        "url": "https://www.imdb.com/title/tt0111161/",
        "cover": "https://m.media-amazon.com/images/M/MV5BMDFkYTc0MGEtZmNhMC00ZDIzLWFmNTEtODM1ZmRlYWMwMWFmXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_UY67_CR0,0,45,67_AL_.jpg"
    },
    {
        "rate": "9.2",
        "title": "The Godfather",
        "url": "https://www.imdb.com/title/tt0068646/",
        "cover": "https://m.media-amazon.com/images/M/MV5BM2MyNjYxNmUtYTAwNi00MTYxLWJmNWYtYzZlODY3ZTk3OTFlXkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_UY67_CR1,0,45,67_AL_.jpg"
    }
]

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

Отображение данных во внутренних компонентах

После привязки корректных данных к компоненту ListView и проектирования его внутренних компонентов вы можете добавлять данные в эти компоненты. Представление списка поддерживает локальные переменные currentItem и i. Обратите внимание, что вам нужно изменить данные только в первой строке, и те же настройки автоматически применяются к остальным строкам.

Вы можете привязать статический URL-адрес к компоненту Image для отображения изображения; и поскольку этот URL-адрес статичен, одно и то же изображение отображается во всех строках.

Присваивайте элементам имена

Вы можете задать имена индексов элементов и имена данных элементов. Это полезно при встраивании списка в другой список. Например, вы можете задать индекс одного списка какi, а внутреннего вложенного j, чтобы избежать конфликта имен.

Наименование номенклатурного индекса

По умолчанию индекс элемента называется i, что соответствует индексу данных списка и начинается с нуля. Помимо использования i в качестве чисел, вы также можете использовать i для динамического доступа к данным из результатов запроса.

Например, чтобы получить доступ к полюbook_name из таблицы fiction в текстовом компоненте, напишите следующий код.

{{getAllFictions.data[i].book_name}}

Затем вы сможете просмотреть названия художественных книг, отображаемые в виде списка в порядке убывания индекса.

Имя данных элемента

По умолчанию вы можете ссылаться на значение каждого элемента в списке, используя переменную currentItem. Например, чтобы отобразить серийный номер и название книги, введите следующий код в значение text1.

{{i+1}}. {{currentItem.book_name}}

Ошибки циклической зависимости возникают, когда вы ссылаетесь на данные строки с помощью ListView.items[i] из компонента внутри компонента представления списка. Рекомендуется использовать такую ссылку только вне списка.

Пагинация

Быстрый переход

Установите флажок Показывать быстрый переход или установите для него значение true, чтобы пользователи могли быстро переходить на указанную страницу.

Размер страницы

Вы можете настроить, разрешать ли пользователям настраивать количество элементов, отображаемых на одной странице, включив или отключив Кнопку изменения размера или задав ее значение в JS. Если она отключена, вы можете установить размер страницы по умолчанию.

Если этот параметр включен, вы можете настроить несколько размеров страниц на выбор ваших пользователей.

Общее количество строк

По умолчанию общее количество строк компонента ListView равно количеству текущих элементов данных. Вы также можете вставить значение из запроса. Например, {{query1.data[0].count}}.

Просмотр в браузере

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

Например, перетащите входной компонент в ListView, а затем вы можете указать значение компонента оценки в компонентах вне представления списка с помощью следующего кода.

{{listView1.items[0].rating1.value}}
PreviousRatingNextMultiselect

Last updated