dojo中Tree的使用

我用的dojo是1.9版本的，所以使用新的store。

创建一棵最简单的树需要如下几个环节：
1、创建一个store，并为其实现getChildren方法（获取指定节点的子节点，数据层面）。
2、使用创建的store创建一个Model，Model只能是ObjectStoreModel。创建Model的时候一定要指定一个query配置项，该配置项决定了树的根，根必须是唯一。
3、使用Model创建Tree。
4、调用Tree的startup方法，这一步根据实际情况决定是否需要。

对应代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>测试用例</title>
	<style type="text/css">
		@import "dojo/dojo/resources/dojo.css";
		@import "dojo/dijit/themes/tundra/tundra.css";
		*{margin:0;padding:0;font-family:微软雅黑;font-size:10pt;}
		.earth{border-right:4px solid #DFDFDF; border-bottom:4px solid #DFDFDF; height:100%;width:200px;}
	</style>
	
	<script type="text/javascript" djConfig=" isDebug: false" src="dojo/dojo/dojo.js"></script>
</head>
<script type="text/javascript"> 
	require(["dijit/Tree","dojo/store/Memory","dijit/tree/ObjectStoreModel","dojo/dom","dojo/domReady!"],function(Tree,Memory,ObjectStoreModel,dom)
	{
		var treeData= [
			{"id":"world","name":"地球","type":"planet","population":"6 billion"},{"id":"AS","name":"亚洲","type":"continent","parent":"world"},{"id":"OZ","name":"欧洲",{"id":"NA","name":"北美",{"id":"SA","name":"南美","parent":"world","checked":"true"},{"id":"HG","name":"韩国","type":"country","parent":"AS"},{"id":"JP","name":"日本",{"id":"CN","name":"中国",{"id":"YD","name":"印度",{"id":"JND","name":"俄罗斯",{"id":"HK","name":"香港","type":"city","parent":"CN"},{"id":"BJ","name":"北京",{"id":"FR","name":"广州",{"id":"HN","name":"湖南",{"id":"CS","name":"长沙","type":"tour","parent":"HN"},{"id":"YY","name":"岳阳","parent":"HN"}
		];  
		var myStore = new Memory({ // 创建store  
			data : treeData,getChildren: function(object){ // 实现getChildren方法  
				return this.query({parent: this.getIdentity(object)});  
			}   
		});  
	  
		var treeModel = new ObjectStoreModel({ // 使用store创建model  
			store: myStore,query: {id: 'world'}  
		});  
		var tree = new Tree({ // 创建树  
			id : "tree",// 树id，可以根据该id使用registry模块的byId方法获取组件对象。  
			model : treeModel,showRoot : true,// 是否显示树根  
			openOnClick : true,// 单击展开  
			persist: true,// 持久化到cookie，记住上次打开树时候的状态  
			autoExpand : false,// 自动展开所有层次的节点  
			openOnDblClick : true // 双击展开  
		},"countryData");  
		
  		 tree.startup();  
	});
	
</script>
<body class="tundra">
	<div class="earth">
		<div id="countryData" ></div>
	</div>	
</body>
</html>

本地文件目录显示:有点小bug，但是功能及泵实现了。最好利用Ajax，点击每一层目录的时候才去查询对应子目录，类似于城市级联。本程序没有使用。(dojo放在WebContent目录下)。

indexAction用于跳转index.jsp。

DirFile为领域模型层

package com.xuzengqiang.tree.domain;

public class DirFile
{
	private String fileName; //文件名称，name:fileName
	private String filepath; //文件路径,id:filePath
	private String parentFileName; //父文件路径: parent:parentFileName

	public String getFileName()
	{
		return fileName;
	}

	public void setFileName(String fileName)
	{
		this.fileName = fileName;
	}

	public String getParentFileName()
	{
		return parentFileName;
	}

	public void setParentFileName(String parentFileName)
	{
		this.parentFileName = parentFileName;
	}

	public String getFilepath()
	{
		return filepath;
	}

	public void setFilepath(String filepath)
	{
		this.filepath = filepath;
	}

}

LoadAllFiles，用于读取某个文件下的所有文件。

package com.xuzengqiang.tree.utils;

import java.io.File;
import java.util.ArrayList;
import java.util.List;

import com.xuzengqiang.tree.domain.DirFile;

public class LoadAllFiles
{
	//获取某个盘下面的所有目录
	public static List<DirFile> getAllFiles(String dir)
	{
		List<DirFile> dirFile=new ArrayList<DirFile>();
		File parentFile=new File(dir);
		initFile(parentFile,dirFile );
		return dirFile;
	}
	
	public static void initFile(File parentFile,List<DirFile> dirFile)
	{
		
		File[] subFiles=parentFile.listFiles();
		
		if(subFiles!=null)
		{
			for (File subFile : subFiles)
			{
				DirFile file=new DirFile(); 
				file.setFilepath(subFile.getAbsolutePath());
				file.setFileName(subFile.getName());
				file.setParentFileName(parentFile.getAbsolutePath());
				
				dirFile.add(file);
				
				if(subFile.isDirectory())
				{
					initFile(subFile,dirFile);
				}
			}
		}
	}
	
}

DirFileAction：用于Ajax

package com.xuzengqiang.tree.struts.action;

import java.io.PrintWriter;
import java.util.List;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;

import com.opensymphony.xwork2.Action;
import com.opensymphony.xwork2.ActionSupport;
import com.xuzengqiang.tree.domain.DirFile;
import com.xuzengqiang.tree.utils.LoadAllFiles;

@SuppressWarnings("serial")
public class DirFileAction extends ActionSupport
{
	private String pathName;

	public String getPathName()
	{
		return pathName;
	}

	public void setPathName(String pathName)
	{
		this.pathName = pathName;
	}

	@Override
	public String execute() throws Exception
	{
		HttpServletResponse response = ServletActionContext.getResponse();
		response.setContentType("text/html;charset=UTF-8");
		response.setHeader("Parma","0");
		response.setHeader("Cache-Control","no-cache");
		response.setDateHeader("Expiress",0);
		PrintWriter out = response.getWriter();
		
		List<DirFile> dirFile = LoadAllFiles.getAllFiles(pathName);
		
		StringBuffer buffer = new StringBuffer();
		for (int i = 0; i < dirFile.size(); i++)
		{
			buffer.append("[");
			buffer.append(dirFile.get(i).getFilepath());
			buffer.append(",");
			buffer.append(dirFile.get(i).getFileName());
			buffer.append(",");
			buffer.append(dirFile.get(i).getParentFileName());
			buffer.append("]");
		}
		String dirFiles = buffer.toString();

		out.print(dirFiles);
		out.flush();
		out.close();
		return null;
	}

}

index.jsp页面。主要是dojoAjax的实现，利用dojo.request,

参数：第一个、必需的参数是请求的URL。第二个参数是一个包含请求选项的对象（非必需）。常用的选项有下面几个：

method--代表HTTP方法的大写字符串。dojo提供了几个帮助函数来更方便的指定这个选项（request.get,request.post,request.put,request.del）。

sync--布尔值。true：同步请求方式，请求阻塞知道服务区返回响应或者超时；fasle：异步请求方式。

query--附加在URL后面的查询参数，可以是一个字符串或者键值对。

data--字符串或者键值对，或者FormData对象，它们包含要发送给服务器的数据。

handleAs--代表如何转化服务器响应中负载（或者叫响应数据）的字符串。经过转化的服务器响应数据才会传递给回调函数。可能的格式是“text"(默认值),"json","javascript"和”xml"。

headers--包含请求头的键值对。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>
<head>
	<title>测试用例</title>
	<style type="text/css">
		@import "dojo/dojo/resources/dojo.css";
		@import "dojo/dijit/themes/tundra/tundra.css";
		*{margin:0;padding:0;font-family:微软雅黑;font-size:10pt;}
		.earth{border-right:4px solid #DFDFDF; border-bottom:4px solid #DFDFDF;width:900px;}
	</style>
	
	<script type="text/javascript" djConfig=" isDebug: false" src="dojo/dojo/dojo.js"></script>
</head>
<script type="text/javascript"> 
	require([
	         "dijit/Tree","dojo/request","dojo/domReady!"
	        ],request)
	{
		var pathName="D:\\Maven"; //同样做为根路径
	  	request.post("${pageContext.request.contextPath}/dirFileAction",{
	        data: 
	        {
	        	pathName:pathName
	        },handleAs:"text"
	    }).then(function(text)
	    {
	    	var treeData= [
					{"id":pathName,"name":pathName}
				];  
			var myStore = new Memory(
				{ 
					data : treeData,getChildren: function(object)
					{
						return this.query({parent: this.getIdentity(object)});  
					}   
				});  
       		
			var dirFiles=text.split("]");
			for(var i=0;i<dirFiles.length-1;i++)
			{
				var dirFile=dirFiles[i].split(",");
				var filePath=dirFile[0].substr(1); //文件的绝对路径作为id
				var fileName=dirFile[1];           //文件名作为显示
				var parentFileName=dirFile[2];     //父文件名,同样为绝对路径
				myStore.add({"id":filePath,"name":fileName,"parent":parentFileName});
			}
			
       		var treeModel = new ObjectStoreModel(
       		{ 
    			store: myStore,query: {id:pathName}  
    		});  
    		var tree = new Tree(
    		{ 
    			id : "tree",model : treeModel,openOnClick : true,persist: true,autoExpand : false,openOnDblClick : true
    		},"fileTree");  
    		
      		 tree.startup();  
	    });
	});
	
</script>
<body class="tundra">
	<div class="earth">
		<div id="fileTree" ></div>
	</div>	
</body>
</html>

结果视图:

原文链接：https://www.f2er.com/dojo/291214.html

猜你在找的Dojo相关文章