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

В качестве введения в возможности, которые может предложить диджит 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, обеспечивающий доступ к нему:
<div dojoType="dojo.data.ItemFileReadStore"
jsId="dataStore" url="./programmingLanguages.json"></div>

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

Теперь единственное, что осталось сделать, – это определить ссылку на TreeStoreModel внутри диджита Tree, как показано ниже:
<div dojoType="dijit.Tree" model="model"></div>

Пример 15.7. Простое дерево с одним корневым узлом
<html>
<head>
<title>Tree Fun!</title>
<link rel="stylesheet" type="text/css"
href="http://o.aolcdn.com/dojo/1.1/dojo/resources/dojo.css" />
<link rel="stylesheet" type="text/css"
href="http://o.aolcdn.com/dojo/1.1/dijit/themes/tundra/tundra.css" />
<script
type="text/javascript"
src="http://o.aolcdn.com/dojo/1.1/dojo/dojo.xd.js"
djConfig="parseOnLoad:true,isDebug:true">
</script>
<script type="text/javascript">
dojo.require("dijit.Tree");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojo.parser");
</script>
</head>
(body class="tundra")
<div dojoType="dojo.data.ItemFileReadStore" jsId="dataStore"
url="./programmingLanguages.json"></div>
<div dojoType="dijit.tree.TreeStoreModel" jsId="model"
store="dataStore" query="{name:'*'}"></div>
<div dojoType="dijit.Tree" model="model"></div>
(/body)
</html>
Теги:
Виджеты приложения
Добавлено: 25 Июля 2018 07:30:50 Добавил: Андрей Ковальчук Нравится 0
Добавить
Комментарии:
Нету комментариев для вывода...