76 lines
No EOL
2.9 KiB
Markdown
76 lines
No EOL
2.9 KiB
Markdown
# Получение данных
|
||
|
||
Данные регионов можно хранить в разном виде.
|
||
|
||
Наиболее естественное представление дерева -- в виде вложенного объекта: свойство `children` содержит поддеревья.
|
||
|
||
Выглядит это так:
|
||
|
||
```js
|
||
var regions = [
|
||
{
|
||
title: 'Россия',
|
||
id: 1,
|
||
children: [
|
||
{
|
||
title: 'Центр',
|
||
id: 2,
|
||
children: [ ... поддеревья ... ]
|
||
},
|
||
...
|
||
}
|
||
}
|
||
...
|
||
]
|
||
```
|
||
|
||
У такого вложенного объекта есть важный недостаток: сложно перейти напрямую к узлу по ID. Нужно "прыгать" по дереву.
|
||
|
||
Поэтому может быть более удобен другой вариант:
|
||
|
||
```js
|
||
var regions = [
|
||
{
|
||
title: 'Россия',
|
||
id: 1,
|
||
children: [ 2 ]
|
||
},
|
||
{
|
||
title: 'Центр',
|
||
id: 2,
|
||
children: [ ... ]
|
||
},
|
||
...
|
||
]
|
||
```
|
||
|
||
..То есть, массив содержит все узлы дерева, и каждый узел хранит в `children` список `id` детей.
|
||
|
||
Но и это не совсем удобно. Ведь хочется по ID получить данные. Значит, нужно хранить не массив, а объект вида `id => { title: .., id: .., children: [... ] }`.
|
||
|
||
<ul>
|
||
<li>Свойство `children` может отсутствовать, если детей нет.</li>
|
||
<li>`id` есть и в ключе объекта и в данных узла. Так удобнее.</li>
|
||
<li>Список внешних узлов дерева содержится в корневом узле без имени, с `id = 0`.</li>
|
||
</ul>
|
||
|
||
**Выберите наиболее симпатичную структуру и получите её из исходного документа.**
|
||
|
||
# Данные
|
||
|
||
Скрипт для получения данных в последнем формате, описанном выше: [fetch.js](/files/tutorial/widgets/checkbox-tree/fetch.js).
|
||
|
||
Результат в файле (после `JSON.stringify`): [regions.js](/files/tutorial/widgets/checkbox-tree/regions.js).
|
||
|
||
# Исправления
|
||
|
||
Желательно сделать следующие исправления:
|
||
|
||
<ul>
|
||
<li>Переделать вёрстку. В частности, заменить текстовые + - на оформление при помощи CSS.</li>
|
||
<li>Оформить всё в виде виджета с шаблоном.</li>
|
||
<li>Использовать ленивый рендеринг! Не рисовать всё дерево сразу (зачем рисовать то, чего не видно?), а дорисовывать при открытии.</li>
|
||
|
||
# Решение
|
||
|
||
[edit src="solution"/] |