Dijit可视化组件——Tree（一）

在Web项目中，客户对前端的展示要求越来越高，并逐步向桌面应用靠拢。Html语言本身的基础元素已经很难满足项目中的要求，致使在开发中，经常需要使用Html、JavaScript和CSS组合完成页面元素的展示，这无疑增加了开发周期和人力成本。而且由于缺乏专人的维护，这些页面元素难以复用。基于上述状况，本人急需学习一个成熟的、稳定的，包含可见组件的JS框架，然后就开始Google、BaidDu，查找资料，并最终倾心于Dojo，然后就有了本文。

Dijit 组件是 Dojo 提供的图形用户界面组件库。它提供了 Ajax 应用开发中会用到的常用组件，可以帮助开发人员快速的构建 Ajax 应用。本博将陆续介绍Dijit的常用组件，今天就先从树（Tree）开始。

1、Tree的展示

1.1创建展示数据源dijit.tree.ForestStoreModel。

var tData={identifier:"id",
			label:"label",
			items:[
				{id:"1",label:"第一章",type:"chapter",sections:[
					{id:"1-1",label:"第一节",type:"section",pragrams:[
						{id:"1-1-1",label:"第一段",type:"p"},
						{id:"1-1-2",label:"第二段",type:"p"},
						{id:"1-1-3",label:"第三段",type:"p"}
					]},
					{id:"1-2",label:"第二节",type:"section"},
					{id:"1-3",label:"第三节",type:"section"},
				]},
				{id:"2",label:"第二章",type:"chapter",sections:[
					{id:"2-1",label:"第一节",type:"section"},
					{id:"2-2",label:"第二节",type:"section"},
					{id:"2-3",label:"第三节",type:"section"},
				]},
				{id:"3",label:"第三章",type:"chapter",sections:[]},
				{id:"4",label:"第四章",type:"chapter",sections:[]},
				{id:"5",label:"第五章",type:"chapter"}
			]
		
		}
		var tStore=new dojo.data.ItemFileReadStore({data:tData});
		var tModel=new dijit.tree.ForestStoreModel({
			store:tStore,
			rootLabel:"目录",
			childrenAttrs:["sections","pragrams"]
		});

1.2 创建包含tree的Div。

<div id="tree" model="tModel" dojotype="dijit.Tree">
</div>

以上代码运行的结果如见图

1.3 改变节点图片格式

很多时候我们需求改变树节点的图片样式，来更形象、生动的展示我们想要传达的信息。要实现这一功能就要对Tree的getClassIcon重写。

首先我们先定义不同节点类型的图片样式：

	<style type="text/css">
		.chapterIcon{
			width:45px;
			height:45px;
			background-image:url(1.png);
		}//章节点样式
		.sectionIcon{
			width:45px;
			height:45px;
			background-image:url(2.png);
		}//小节节点样式
		.pIcon{
			width:45px;
			height:45px;
			background-image:url(3.png);
		}//段落节点样式
	</style>

然后重写getClassIcon方法

<div id="tree" model="tModel"dojotype="dijit.Tree">

                   <scripttype="dojo/method" event="getIconClass"args="item">

                            if(tStore.isItem(item))

                                     returntStore.getValue(item,"type")+"Icon";

                   </script>

         </div>

运行以后的效果

以上就基本完成了dojo中Tree部件的数据展示操作，下节将介绍对Tree节点的增删改，以及拖动操作。