学习使用jquery以来，一直没找到一棵简单并且支持异步加载的树，无奈只有自己扩展一下。jquery官方ui的treeView功能单一且不够小巧。偶然发现SimpleTree
插件发现它小巧而且支持拖拽很方便扩展，于是在simpleTree基础上做了json格式数据异步加载和树上使用的图片路径自适应的扩展。做的较为粗糙，请大家指点！
因为实在实际项目中使用，下面的例子是基于struts2的，除struts2环境还需要struts-json插件jsonPlugin
，对于直接使用servlet仅需要使用jsonlib中的静态方法将java List转换为json字符串。
修改后树的初始化方式
$(document).ready(function(){
simpleTreeCollection = $('#simpleTree').simpleTree({
autoclose: true,
animate:true,
dataType:"json",
url:"tree!demoTest.action"
});
});
<body>
<ul id="simpleTree" class="simpleTree">
</ul>
</body>
修改后的初始化树的默认选项的代码
TREE.option = {
drag: true,
animate: false,
autoclose: false,
speed: 'fast',
afterAjax: false,
afterMove: false,
afterClick: false,
afterDblClick: false,
// added by Erik Dohmen (2BinBusiness.nl) to make context menu cliks available
afterContextMenu: false,
docToFolderConvert:false,
//***added by Bluespring to enable json dataType***
dataType:"json", //value is json or html
async:true,
jsonWrap:{//if your dataType of json differ from following default type,you can wrap it
id:"id",//node id
parentId:"parentId",//parent node id
text:"text",//node text
isfolder:"isfolder",//indication node whether or not folder, value is true or false,if not need, set it to null for nothing to do
attrs:"attrs"//addition data for special action to customize function,if not need, set it to null for nothing to do
},
url:null, //if null,will use simple tree default setting. if not null,simpleTree defalut setting will be cover
parm:{},//parameters for ajax request, always add or overwrite a key/value(key:jsonWrap.id,value:folder id) when expand folder
responseDataName:"nodes",//if your java nodeList name differ from "nodes", set it as your nodeList name
treeName:"tree"
};
E文不好注释有点乱，请大家别介意。代码中的jsonWrap选项是转换器，有了它我们就不必在后台封装特定对象的List传出来，只有返回List中的对象具有对应于id、parentId、text的属性就可以。当然如果你界面上自定制的功能需要用到额外的数据的话，必须的在后台自己封装如下的对象的List
package util.tree.bean;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
public class SimpleTreeNode {
private Object id;
private String text;
private Object parentId;
/**
* 仅用于需要异步读取数据的文件夹节点。当节点有子节点时，该属性不起作用。节点永远为文件夹节点
*/
private boolean isFolder=false;
private HashMap<String, Object> attrs=new HashMap<String,Object>();
public SimpleTreeNode(Object id, String text,Object parentId){
this.id=id;
this.text=text;
this.parentId=parentId;
}
public SimpleTreeNode(Object id, String text, Object parentId,boolean isFolder){
this.id=id;
this.text=text;
this.parentId=parentId;
this.isFolder=isFolder;
}
public SimpleTreeNode(Object id, String text, Object parentId,boolean isFolder,HashMap<String,Object> attrs){
this.id=id;
this.text=text;
this.parentId=parentId;
this.isFolder=isFolder;
this.attrs=attrs;
}
public void addAttribute(String key,Object value){
this.attrs.put(key, value);
}
public Object getId() {
return id;
}
public void setId(Object id) {
this.id = id;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public Object getParentId() {
return parentId;
}
public void setParentId(Object parentId) {
this.parentId = parentId;
}
public boolean isFolder() {
return isFolder;
}
public void setFolder(boolean isFolder) {
this.isFolder = isFolder;
}
public HashMap<String, Object> getAttrs() {
return attrs;
}
public void setAttrs(HashMap<String, Object> attrs) {
this.attrs = attrs;
}
}
js端使用异步数据生成树节点代码
//***added by Bluespring for auto imgPath***
//get js path
var jsPath = "";
var js = $("script[src]").get();
for (var i = js.length; i > 0; i--) {
if (js[i - 1].src.indexOf("tree.js") > -1) {
jsPath = js[i - 1].src.substring(0, js[i - 1].src.lastIndexOf("/") + 1);
}
}
//***added by Bluespring to enable json dataType***
var coverJsonToHtml=function(nodeArray){
//create tree node
var ul=$("<ul>");
var nodeWrap=TREE.option.jsonWrap;
var tempLi=null;
for(var i in nodeArray){
tempLi=$('<li id="'+nodeArray[i][nodeWrap.id]+'"><span>'+nodeArray[i][nodeWrap.text]+'</span></li>');
if(nodeWrap.attrs!=null){
tempLi.attr(nodeArray[i][nodeWrap.attrs]);
}
if(null!=nodeArray[i][nodeWrap.parentId]){
tempLi.get(0).parentId=nodeArray[i][nodeWrap.parentId];
tempLi.get(0).isFolder=nodeWrap.isFolder!=null?nodeArray[i][nodeWrap.isFolder]:false;
}
ul.append(tempLi);
}
//arrange tree node
var parentLi=null;
$("> li",ul).each(function(){
if(this.parentId){
parentLi=$("#"+$(this).attr("parentId"),ul);
if($("ul",parentLi).size()==0){
parentLi.append("<ul>");
}
$(this).appendTo($("ul",parentLi));
}
if(this.isFolder&&$("ul",this).size()==0){
$(this).append("<ul>");
}
});
$("ul",ul).each(function(){
if($("li",this).size()==0){
$(this).addClass("ajax");
}
});
return ul;
};
在此附上测试用的action类及struts配置
package org.wisdoor.web.util;
import java.util.ArrayList;
import java.util.List;
import org.wisdoor.web.WisdoorAction;
import util.tree.bean.SimpleTreeNode;
public class TreeAction extends WisdoorAction {
private List<SimpleTreeNode> nodes=new ArrayList();
public String demoTest(){
for(int i=0;i<10;i++){
nodes.add(new SimpleTreeNode(""+i,"node_"+i,null,true));
for(int n=0;n<5;n++){
nodes.add(new SimpleTreeNode((""+i)+"_"+n,"node_"+i+"_"+n,""+i));
}
}
return SUCCESS;
}
public List<SimpleTreeNode> getNodes() {
return nodes;
}
public void setNodes(List<SimpleTreeNode> nodes) {
this.nodes = nodes;
}
}
<!-- Tree -->
<package name="tree" extends="json-default">
<action name="tree" class="org.wisdoor.web.util.TreeAction" >
<result type="json">
<param name="ignoreHierarchy">
false
</param>
</result>
</action>
</package>
在插件目录下有测试用的页面，需要后台准备数据
修改了TREE的初始化参数，新增了parm参数和responsDateName参数，parm是访问数据需要传后台的数据，responsDateName是后台返回的list的name
更新了war包，现在应该不会报错了。
分享到：
相关推荐
总结来说，`jQuery SimpleTree`是一个强大而灵活的树形插件，通过JSON数据支持、复选框功能和异步加载，为开发者提供了构建复杂树形结构的强大工具。配合源码学习和示例参考，你可以轻松地将其应用于各种Web开发场景...
在压缩包中的文件"扩展了一棵jquery的树插件SimpleTree，加上了json格式数据异步加载能力 - JQuery - web - JavaEye论坛.htm"可能是讨论这个扩展的论坛帖子或者教程，包含了具体实现的代码示例和使用经验分享。...
1.代码中包括两种异步树加载,Default.aspx中使用json数据格式返回2.Default3使用兼容性很好的Jquery.simpletree树异步加载树,后台返回<ul><li> html标记.可以拖拽树.且插件包很小,只包括jquery.simple.tree.css,...
- **异步加载**：对于大数据量的树，可以实现按需加载，提高页面性能。 ### 样式与图片资源 `jquery.simple.tree.css`包含了插件的基本样式，用于控制节点的布局、颜色、图标等。`images`目录则存储了可能用到的...
总的来说，jQuery Simple Tree插件提供了一个强大且易用的工具，帮助开发者快速构建交互式的无限级树形菜单，它的Ajax异步加载和拖放功能为用户带来了流畅的体验，而对HTML和JSON数据的支持则增加了其适应各种项目...
1. 动态加载：jQuery-simple-tree支持异步加载子节点，当用户展开父节点时，可以通过`loadChildren`回调函数获取子节点数据。 ```javascript $('#treeElement').simpleTree({ loadChildren: function(node, ...
SimpleTree1.2是一款在JavaScript领域中广泛应用的框架树组件，尤其在网页界面设计和数据组织展示时，它提供了一种高效且灵活的方式来呈现层级结构数据。这个框架以其易用性和丰富的功能特性，赢得了开发者们的青睐...
ZTree支持JSON格式的数据源，可以方便地与后台服务器进行数据交互，同时提供了丰富的API供开发者调用，实现自定义的功能扩展。 **2. 异步加载原理** 异步加载（Async Load）是指在用户需要时才获取相关数据，而不是...
jQuery Simple Tree Ajax无限级树形菜单插件php版 兼容性非常好，可异步加载，支持拖拽。插件本身只支持HTML节点加载的，网上有人进行扩展了，用了JSON，不过个人感觉这对速度影响实在微乎其微，还是直接封装出HTML...
总结来说，jQuery.simple.tree插件提供了一种高效、轻量级的解决方案来创建树形结构，尤其适用于需要良好兼容性和异步加载的场景。通过合理的配置和调用，开发者可以轻松地构建出交互性强、性能优异的无限树结构，...
总结来说，"Struts2+Spring+Hibernate Jquery ajax simple tree 动态生成树实例"是一个综合运用Java后端框架和前端技术实现动态交互功能的案例。它展示了如何在后端利用SSH整合处理业务逻辑和数据，再通过Ajax和...
1. 基本概念：zTree是基于jQuery的树形控件，通过JSON数据格式来构建树形结构，支持多种交互方式，如点击、展开、收起、拖放等。 2. 主要特点： - 动态加载：可以根据需要按需加载子节点，减少初次加载的数据量，...
5. **数据源支持**：可以方便地与JSON或其他数据格式结合，动态加载和更新树形结构。 **"简单jQuery树形"插件特性** 虽然题目中的描述非常简短，但我们可以推测这个插件可能具有以下特性： 1. **基本操作**：具备...
本文将详细解析如何利用jQuery构建一个树形结构菜单，并将其应用于Spring MVC框架，以便从后端获取JSON数据并动态展示为树形菜单。 首先，让我们了解一下jQuery的树形结构菜单。在网页设计中，树形结构菜单通常用于...
zTree是一个基于jQuery的树插件，它提供了丰富的配置选项和API，支持多种数据格式，包括JSON、XML等，同时具备异步加载数据的能力，能够动态地根据用户的操作加载子节点，显著提升了用户体验。在SSM项目中结合zTree...
jQuery zTree是一款基于jQuery的优秀插件，它能够方便地创建出各种复杂的树形结构，包括本文将重点探讨的树形下拉框。在本篇中，我们将深入理解zTree的核心概念，以及如何使用它来构建一个功能完备的树形下拉框。 ...
`jQuery`，作为广泛使用的JavaScript库，提供了丰富的插件来扩展其功能，其中之一便是`jsTree`，一个用于创建交互式树结构的插件。本文将详细介绍`jsTree`的使用方法及其核心特性。 ## 1. jsTree基本概念 `jsTree`...
而`jQuery-zTree`则是一个基于jQuery的插件，专门用于构建可扩展、功能丰富的树形控件。在这个教程中，我们将深入探讨如何利用jQuery-zTree来创建一个菜单树。 首先，要使用jQuery-zTree，你需要确保已经引入了...
jQuery Simple Tree Ajax无限级树形菜单插件，兼容性非常好，可异步加载，支持拖拽。插件本身只支持HTML节点加载的，网上有人进行扩展了，用了JSON，不过个人感觉这对速度影响实在微乎其微，还是直接封装出HTML代码...