ag-grid: иерархическое дерево ссылочных узлов: как сделать ссылочные атрибуты доступными для редактирования?

Я тестирую замечательный компонент ag-Grid (действительно крутой!) Для нового проекта Angular2. Его следует использовать для отображения структуры модели САПР с «структурой» (также известной как «дерево»), и каждый узел является атрибутами модели САПР.

Теперь в ag-Grid можно построить дерево. В простейшей форме свойство data содержит свойства узла (атрибуты модели САПР). В этом случае я могу легко сделать ячейки редактируемыми, присвоив свойство editable: true столбцу columnDefs.

Однако проблема в том, что если модель САПР используется во многих местах структуры (дерева) и одна редактируется, все остальные не изменяются.

Вместо этого модели САПР (узлы) должны фактически быть ссылками на данные, а не сами данные. Хорошо, с ag-Grid проблем нет. Здесь вы можете увидеть сравнение дерева с скопированными узлами и деревом с ссылочными узлами:

Узлы копируются в дерево

Данные строки ag-Grid:

rowData = [
  {
    data: { modelName: 'partA', weight: 12.5 }
    children: [ ... ]
  }
];

Определение столбца ag-Grid будет таким:

{
  headerName: 'weight',
  field: 'weight',
  editable: true
}

На узлы есть ссылки в дереве

Данные строки ag-Grid:

rowData = [
  {
    data: { model: MODEL_OBJECT }
    children: [ ... ]
  }
];

где MODEL_OBJECT - ссылка javascript на объект модели, например:

var modelA = { modelName: 'partA', weight: 12.5 }

И измените определения столбцов на:

{
  headerName: 'weight',
  valueGetter: 'data.weight',
  editable: true
}

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

Пока все хорошо. Но теперь - поскольку для столбца есть valueGetter, столбец weight не редактируется напрямую. Точнее, ag-Grid позволяет редактировать его, но не изменяет значение. Что ж, это понятно, поскольку valueGetter действует как функция отображения, которая не может быть «обратимой» в другом направлении. Рассмотрим что-то вроде «data.firstName + data.lastName»: как в мире ag-grid должна знать, как обновлять data.firstname или data.lastName, если пользователь вводит другое значение для столбца.

Мой вопрос: как я могу достичь цели, чтобы иметь редактируемые ячейки связанных узлов дерева? Предполагаемый эффект заключается в том, что если я редактирую свойства модели САПР в одном месте дерева, то сетка автоматически обновляет все другие экземпляры через ссылки.


javascript ag-grid
person andimeier    schedule 25.02.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Обратной функцией valueGetter в ag-Grid является newValueHandler. Это объясняется здесь. Вы определяете newValueHandler в colDef, который затем дает вам свободу делать все, что вы хотите, в значении.

var colDef = {headerName: "Tree Value", valueGetter: "data.a+data.b", editable: true, newValueHandler: myNewValueHandler};

function myNewValueHandler(params) {
  // set the value you want in here using the params
}
person Niall Crosby    schedule 27.02.2016
comment
Ах да, вот и все, спасибо @Niall. Я должен добавить, что, поскольку указанная часть используется в нескольких местах в сетке, необходимо добавить agGrid.refreshView() в newValueHandler, иначе будет отредактирована только 1 строка, но измененное значение не будет отражено в других ссылочных местах. - person andimeier; 02.03.2016
comment
Сложный компонент, такой как datatable, должен быть встроенным в angular2, поэтому вам не нужно беспокоиться об обнаружении изменений, ознакомьтесь с PrimeNG DataTable. primefaces.org/primeng/#/datatable - person Cagatay Civici; 09.03.2016