dynatree和json数据的交互使用

 一、首先建立后台的DynaTreeNode对象将树需要的参数就放进去,然后查询出树结构数据，将数据和树要配置的参数数据都拼接到这个List对象中，最后转成json

	public class DynaTreeNode {
                 private String id;
	// (required) Displayed name of the node (html is allowed here)
	// 节点的显示名称
	private String title;
	// May be used with activate(), select(), find(),
	// 作为节点的表示，可用作activate(),selec(),find()方法
	private String key;
	// Use a folder icon. Also the node is expandable but not selectable.
	// 是否展示为文件夹图标
	private boolean isFolder; 
	// Call onLazyRead(), when the node is expanded for the first time to allow for
	// delayed creation of children.
	// 是否延迟加载
	private boolean isLazy; 
	// Show this popup text.
	// 节点的提示内容
	private String tooltip; 
	// Use a custom image (filename relative to tree.options.imagePath). 'null' for default
	// icon, 'false' for no icon.
	// 使用自定义的图像（文件名与tree.options.imagePath相关）。
	private String icon; 
	// Class name added to the node's span tag.
	// css样式
	private String addClass;
	// Use <span> instead of <a> tag for this node
	// 是否非链接形式
	private boolean noLink; 
	// Initial active status.
	// 初始化为激活状态
	private boolean activate;
	// Initial focused status.
	// 初始化为聚焦状态
	private boolean focus; 
	// Initial expanded status.
	// 初始化为展开
	private boolean expand;
	// Initial selected status.
	// 初始化为选中
	private boolean select; 
	// Suppress checkbox display for this node.
	// 隐藏复选框
	private boolean hideCheckbox; 
	// Prevent selection.
	// 不可选
	private boolean unselectable;
	// (附加)是否工程事件
	private boolean isProjEvent;
}

 

根据需要加入其他的属性

二、前台js需要的方法和引入的js

<script src="js/jquery.dynatree.min.js" type="text/javascript"></script>
<link href="js/skin/ui.dynatree.css" rel="stylesheet" type="text/css"/>

 

需要的方法

//初始化树结构。
	$("#tree").dynatree({
		  noLink: false,
		  initAjax: {	//通过ajax方式获取树节点数据。
		 	url: url,      //url为调用后台json方法
		 	data: {a:a}//传递的参数及格式
          },    
         onPostInit:function(){//数据加载后调用的方法

         },     
          //节点点击的事件响应入口
        onActivate: function(node) {
        	  node.expand(true);
          },
           onLazyRead: function(node){//延迟加载事件
							}
		  
	});
}

 

展开节点的方法

$("#tree").dynatree("getTree").activateKey(key).expand(true);//key是主键id
//循环所有节点
        $("#tree").dynatree("getTree").getNodeByKey(key).visit(function(node){
            node.expand(true);
            node.visit(function(subnode){				
	subnode.expand(true);
	}
	});
	return false;
});