Простое дерево

В качестве введения в возможности, которые может предложить диджит Tree, предположим, что имеются простые данные, доступ к которым может быть организован с помощью механизма dojo.data.ItemFileReadStore:
{
identifier : 'name',
label : 'name',
items : [
{
name : 'Programming Languages',
children: [
{name : 'JavaScript'},
{name : 'Python'},
{name : 'C++'},
{name : 'Erlang'},
{name : 'Prolog'}
]
}
]
}

Пока все просто. Чтобы на стороне клиента не выполнять разбор данных вручную, эту работу можно поручить dojo.data. Задействование механизма ItemFileReadStore выполняется очень просто, для этого достаточно указать URL источника данных и запросить эти данные. Приведенный далее тег, после того как он будет проанализирован парсером, мог бы справиться с этой задачей – при условии, что в рабочем каталоге присутствует файл с данными, который называется program!
mingLanguages.json, а сам диджит имеет глобальный идентификатор
dataStore, обеспечивающий доступ к нему:
jsId="dataStore" url="./programmingLanguages.json">


Однако, прежде чем данные попадут в диджит Tree, их необходимо передать промежуточному звену – TreeStoreModel.


(К использованию ForestStoreModel мы подойдем чуть ниже.) Полный перечень особенностей, составляющих прикладной программный интерфейс TreeStoreModel, будет представлен немного ниже, а пока достаточно будет знать, что в TreeStoreModel следует настроить ссылку на ItemFileReadStore и определить текст запроса. Следующий диджит TreeStoreModel обращается к механизму dojo.data с глобальным идентификатором dataStore за получением всех значений атрибута name:
query="{name:'*'}">


Теперь единственное, что осталось сделать, – это определить ссылку на TreeStoreModel внутри диджита Tree, как показано ниже:

Пример 15.7. Простое дерево с одним корневым узлом


Tree Fun!
href="http://o.aolcdn.com/dojo/1.1/dojo/resources/dojo.css" />
href="http://o.aolcdn.com/dojo/1.1/dijit/themes/tundra/tundra.css" />
type="text/javascript"
src="http://o.aolcdn.com/dojo/1.1/dojo/dojo.xd.js"
djConfig="parseOnLoad:true,isDebug:true">


(body class="tundra")
url="./programmingLanguages.json">

store="dataStore" query="{name:'*'}">


(/body)
.



Оцените статью: (0 голосов)
0 5 0

Статьи из раздела Dojo на эту тему:
ColorPalette
Dialog
Editor
InlineEditBox
Menu

Вернуться в раздел: Dojo / Виджеты приложения