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