подскажите виджет для редактирования вложенных массивов

Webix JS
1

У меня есть данные, которые выглядят так

[
  {
    id: '0',
    name: 'ABC1',
    services: [
      {
        id: 'a',
        available: 100,
        allocated: 0
      },
      {
        id: 'b',
        available: 50,
        allocated: 3
      },
      ...
    ]
  },
  {
    id: '1',
    name: 'DEF2',
    services: [
      {
        id: 'a',
        available: 70,
        allocated: 4
      },
      {
        id: 'b',
        available: 30,
        allocated: 4
      },
      ...
    ]
  },
...
]

Пробовал сделать две таблицы - в одной строки уровня ‘ABC1’, ‘DEF2’, а в другой services ‘a’, ‘b’. Идея в том что меняя выделение в одной таблице надо подгружать соответсвующие сервисы в другую. Вижу что для этого есть Datatable, setCursor, sync, bind, но не осилил связать всё это вместе. Неясно возможно ли это.
Пробовал Rowspan Colspan Datatable, но оказалось что надо формировать из моих данных плоские строчки (это ещё можно), но надо ещё городить сложную логику по вычислению и установке span, и при редактировании colspan ячейки обновляется только первая строчка данных, значит надо городить зависимые обновления.

Можно как то иначе редактировать мои данные или привести пример для первого варианта? Спасибо

2

Здравствуйте! Для такой задачи проще всего использовать биндинг для двух таблиц. Вот пример:

http://webix.com/snippet/8f12731c

Вам нужна функция вида

$$("child").bind( $$("parent"), "$data", "services");

где с помощью $data и services задаются данные, которые будут показаны. Статья по теме:
http://docs.webix.com/desktop__binding_details.html#bindingrules

3

Спасибо за ответ. Появились новые вопросы:

  1. Вот вы пишете ‘ready:function(){this.select(“0”)}’, ноль это, я так понимаю, идентификатор данных первой записи, а если я его не знаю?
  2. Изменения редактирования slave таблицы не приводят к записи данных на сервер. Чем это делается? onBindUpdate не сообразил как пользоваться.
  3. Если таблицы располагать не вертикально друг под другом, а горизонтально рядом друг с другом, то как можно задать относительную ширину, а не в пикселах?
4

  1. В ready прописываются функции, которые нужно выполнить после полной инициализации копонента и загрузки в него данных. ID можно получить через индекс с помошью метода getIdByIndex(). Кстати, есть один важный момент: Webix не будет работать с данными, ID которых 0 (строка пройдёт),false илиnull

  2. По умолчанию так и есть. Бинд для двух таблиц односторонний, но можно вызвать метод $$(‘master’).updateItem по событию onAfterEditStop в slave-таблице и передать в нужный data item мастера отредактированные данные.

  3. Для каждого виджета можно задать относительный размер (в пределах содержащей его колонки или строки) через свойство gravity - единица по умолчанию.

5

Спасибо.