Понимание иерархической и самореферентной привязки данных JSON в древовидной сетке

Сетка дерева Syncfusion — это высокопроизводительный компонент таблицы дерева, который визуально представляет данные с иерархическими отношениями в них. Чтобы визуально представить данные в древовидной сетке, нам сначала нужно предоставить данные компоненту Tree Grid. В привязке данных JSON сетки дерева вы можете выбирать между двумя структурами данных JSON, которые можно привязать к элементу управления Tree Grid:

Иерархические данные
Самореферентные данные

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

Иерархические данные

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

Рассмотрим следующую коллекцию sampleData. Он содержит сведения о задаче и ее подзадачах. У каждой задачи есть коллекция подзадач, вложенная в свойство с именем subtasks.

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

export var sampleData = [
{
taskID: 1, taskName: 'Planning', startDate: new Date('02/03/2017'), duration: 5, subtasks: [
{ taskID: 2, taskName: 'Plan timeline', startDate: new Date('02/03/2017'), duration: 5 }, 
{ taskID: 3, taskName: 'Plan budget', startDate: new Date('02/03/2017'), duration: 0 } 
] 
}, 
{ 
taskID: 4, taskName: 'Design', startDate: new Date('02/10/2017'), duration: 3, subtasks: [ 
{ taskID: 5, taskName: 'Software Specification', startDate: new Date('02/10/2017'), duration: 3 } 
] 
} 
]

Для иерархической привязки данных нам необходимо указать имя свойства вложенной коллекции в поле childMapping сетки дерева. Например, из предыдущих данных нам нужно предоставить подзадачи в качестве свойства childMapping Tree Grid.

let treegrid: TreeGrid = new TreeGrid({
dataSource: sampleData,
treeColumnIndex: 1,
childMapping: "subtasks",
columns: [
{ field: "taskID", headerText: "Task ID", isPrimaryKey: true, textAlign: "Right", width: 140 }, 
{ field: "taskName", headerText: "Task Name", width: 160 }, 
{ field: "startDate", headerText: "Start Date", textAlign: "Right", width: 120, format: { skeleton: "yMd", type: "date" } }, 
{ field: "duration", headerText: "Duration", textAlign: "Right", width: 110 } 
] 
});

Самореферентные данные

При работе в бэкенде, как и с базами данных, мы в большинстве случаев не будем использовать иерархические данные (вложенные коллекции). И самореферентная привязка данных удобна в подобных ситуациях, чтобы обеспечить древовидную структуру без вложенных коллекций.

Самореферентные данные состоят из плоских записей и не имеют вложенных коллекций для хранения дочерних записей. Вместо этого родительские и дочерние отношения представлены в свойствах записи.

Каждая запись должна иметь уникальное поле, которое идентифицирует родительскую запись дочерней записи.

Давайте посмотрим на самореферентные данные с тем же содержанием, что и с иерархическими данными.

var projectData = [ 
{ 'TaskID': 1, 'TaskName': 'Planning', 'StartDate': new Date('02/23/2017'), 'Duration': 5 }, 
{ 'TaskID': 2, 'TaskName': 'Plan timeline', 'StartDate': new Date('02/23/2017'), 'Duration': 5, 'parentID': 1 }, 
{ 'TaskID': 3, 'TaskName': 'Plan budget', 'StartDate': new Date('02/23/2017'), 'Duration': 0, 'parentID': 1, }, 
{ 'TaskID':4, 'TaskName': 'Design', 'StartDate': new Date('02/10/2017'), 'Duration': 3 }, 
{ 'TaskID':5, 'TaskName': 'Software Specification','StartDate': new Date('02/10/2017'), 'Duration': 3, 'parentID': 4 }]

Из этих данных видно, что TaskID – это уникальное поле в каждой записи, которое задается как свойство idMapping в сетке дерева. parentID в некоторых записях означает, что они являются дочерними записями для TaskID значения, равного значению поля parentID. Таким образом, поле parentID сопоставляется со свойством parentIdMapping Tree Grid.

См. следующий пример кода.

let treegrid: TreeGrid = new TreeGrid({ 
dataSource: projectData, 
treeColumnIndex: 1, 
idMapping: "TaskID", 
parentIdMapping: "parentID", 
columns: [ 
{ field: "TaskID", headerText: "Task ID", isPrimaryKey: true, textAlign: "Right", width: 140 }, 
{ field: "TaskName", headerText: "Task Name", width: 160 }, 
{ field: "StartDate", headerText: "Start Date", textAlign: "Right", width: 120, format: { skeleton: "yMd", type: "date" } }, 
{ field: "Duration", headerText: "Duration", textAlign: "Right", width: 110 } 
] 
});

Вывод

Примечание. Иерархическая и самореферентная привязка данных выглядят одинаково в пользовательском интерфейсе, и в JSON отличается только представление структуры данных.

Вывод

Надеюсь, теперь у вас есть четкое представление о разнице между иерархической и самореферентной привязкой данных. Элемент управления Syncfusion Tree Grid доступен в наших Blazor, ASP .NET (Core, MVC, Web Forms), JavaScript, Angular, React, Vue, UWP. , WPF и WinUI.

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

Не стесняйтесь делиться своими отзывами или вопросами в разделе комментариев ниже. Вы также можете связаться с нами через наши форумы поддержки, Direct-Trac или портал обратной связи. Мы всегда рады Вам помочь!

Первоначально опубликовано на https://www.syncfusion.com 2 декабря 2020 г.

Понимание иерархической и самореферентной привязки данных JSON в древовидной сетке