一、首先建立后台的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; });
相关推荐
dynatree js代码完整Demo源码 ,实现目录树自定义缩放
dynatree-1.2.0 JQuery 树结构插件
一个非常完备的网页树型控件了,支持所有的浏览器 ,功能基本能满足要求,样式也还可以,代码也比较清楚。
最新的dynatree,Jquery树,可以用来学习,可以用来做东西,精华。
tree例子,也是从网上找的,其中有tree点击右键进行增删改
python库。 资源全名:tw2.jqplugins.dynatree-2.0a0.tar.gz
动力桩该存储库被时,被用作Dynatree 2.0..2.3的代理页面。 现在它已经过时了,因为jQuery Plugin Registry并且 。
MagicDTree 是JQuery树型插件 Dynatree 的封装,使之更易使用,并提供了一些扩展。 JQuery著名树形插件Dynatree的包装类,增加右键菜单,添加、删除、更新接口。
JQuery树形插件Dynatree的包装对象... So this plugin will not be updated in feature. 新版的 Dynatree 已支持 MagicDTree 所提供的所有功能,因为MagicDTree将停止更...
很漂亮的一个jquery.dynatree树, 网上找了很久也没有个合适的, 后面自己改了一个出来; 共享给大家,顺便赚点资源分,因为我确实没有分了; 不知道大家有没有用,别喷我了;
jQuery.dynatree (by François de Campredon) jQuery.Flot (by Matt Burland) jQuery.form (by François Guillot) jQuery.Globalize (by Boris Yankov) jQuery.jNotify (by James Curran) jQuery.noty ...