?一、首先建立后台的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; });
?