44  /  103

BXMobileApp.UI.Table - управление списками

Просмотров: 1317 (Статистика ведётся с 06.02.2017)

Списки - нативные элементы, интерфейс которых приближен к интерфейсу списков платформы. 

 Назначение: 

  • Вывод данных с вложенной структурой (каталог с товарами, папки с документами, отделы и сотрудники и т.д.); 
  • Вывод данных с линейной структурой (мероприятия, список дел, план упражнений на день и т.д.);
  • Отображение списка для выбора значений пользователей.

Элементы списка можно отображать с разделением по секциям или алфавиту. Данный элемент интерфейса позволяет увеличить производительность при отображении списочных данных за счет заложенных механизмов кэширования и lazyload'а для картинок, и функции фильтрации загруженного списка.



Описание:

Функция возвращает объект нативного списка

Синтаксис:

var myTable = new BXMobileApp.UI.Table(params, table_id);
АргументыОписание

params

Объект с параметрами списка:

Ключи описания списка:
  • url - путь относительно корня сайта, откуда будут браться данные. Данные должны возвращаться в формате json;
  • isroot - флаг, указывающий на способ открытия списка:
    • false - список добавится в текущий стек навигации;
    • true - текущий стек навигации уничтожается, создается новый стек, а список добавляется как первый элемент стека навигации.
  • table_settings - для режима выборки данных, включает в себя следующие параметры:
    • markmode - флаг, включает режим выборки:
      • true - элементы в списке будут отображаться с чекбоксами и элементы можно отмечать;
      • false - выключает режим выборки.
    • searchField - флаг, включает отображение поиска по списку:
      • true - в списке будет отображаться панель поиска;
      • false - панель поиска по списку отображаться не будет.
    • multiple - флаг, при включенном режиме выборки данных, параметр включает и выключает мультивыбор элементов в списке:
      • true - в списке можно выбрать несколько элементов;
      • false - в списке можно выбрать только один элемент.
    • selected - набор данных, которые будут уже отмечены при открытии списка. Например: {users:[1,2,3,10]} - в открывшемся списке галочками уже будут отмечены записи с идентификаторами 1,2,3 и 10. Идентификаторы записей определяются самим разработчиком при формировании данных в формате json на сервере.
    • okname - задается название для кнопки OK.
    • cancelname - задается название кнопки закрытия списка.
    • callback - функция, которая отработается при нажатии на кнопку OK. В обработчик первым параметром передаются данные, которые были отмечены галочками. Работает, только если markmode принимает значение true.
    • modal - флаг позволяет открывать список в модальном окне таблицы:
      • true - список будет открыт в модальном окне;
      • false - список будет открыт в стеке навигации или внешнем браузере (установлен по умолчанию).
    • showtitle - флаг отображает заголовок списка в панели навигации:
      • true - показывает заголовок в панели навигации;
      • false - заголовок не будет показан.
    • alphabet_index - флаг отображает алфавитный указатель для списка:
      • true - включает отображение алфавитного указателя;
      • false - алфавитный указатель не отображается.
    • use_sections - флаг включает режим отображения по секциям:
      • true - включает отображение по секциям, при этом игнорируются параметры: markdown, selected, alphabet_index;
      • false - отключает режим отображения по секциям.
    • footer - Текст внизу списка. Например, это может быть текст: Всего файлов: 2.
    • cache - флаг, включает кэширование списка на стороне приложения:
      • true - включает кэширование списка (по умолчанию);
      • false - выключает.
  • button - Кнопка на панели навигации справа. Параметр является объектом, который включает в себя следующее
    • name - имя кнопки;
    • type - тип кнопки (right_text, plus, user, context-menu, menu, back).
    • callback - JS-обработчик этой кнопки.

table_id

Идентификатор списка

Функции:

  • show - отображает список.
  • clearCache - очистка кэша списка на стороне приложения.

Пример:

var table = new BXMobileApp.UI.Table({url: "/my_site/list.php"}, "table");
table.show();




0
Курсы разработаны в компании «1С-Битрикс»

Если вы нашли неточность в тексте, непонятное объяснение, пожалуйста, сообщите нам об этом в комментариях.
Развернуть комментарии