Dojo   发布时间:2022-04-21  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了dojo中Tree的使用大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_489_0@我用的dojo是1.9版本的,所以使用新的store。

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

@H_489_0@

@H_489_0@对应代码:

@H_489_0@

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

@H_489_0@

@H_489_0@indexAction用于跳转index.jsp。

@H_489_0@DirFile为领域模型层

@H_489_0@

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,用于读取某个文件下的所有文件。 @H_489_0@

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 @H_489_0@

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;
	}

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

@H_489_0@参数:一个、必需的参数是请求的URL。第二个参数是一个包含请求选项的对象(非必需)。常用的选项有下面几个:@H_944_70@

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

@H_489_0@@H_944_70@@H_944_70@sync--布尔值。true:同步请求方式,请求阻塞知道服务区返回响应或者超时;fasle:异步请求方式。

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

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

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

@H_489_0@@H_944_70@@H_944_70@@H_944_70@@H_944_70@@H_944_70@@H_944_70@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>
结果视图: @H_489_0@

大佬总结

以上是大佬教程为你收集整理的dojo中Tree的使用全部内容,希望文章能够帮你解决dojo中Tree的使用所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。