学习使用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包，现在应该不会报错了。
分享到：
相关推荐
demo以及源码 博文链接：https://lanrenjun.iteye.com/blog/824985
jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery...
扩展jquery simple tree 用json 格式传递数据到后台，如struts2，可用json插件转换对象
jQuery插件之二：Simple Tree jQuery插件之二：Simple Tree jQuery插件之二：Simple Tree
完整的jquery easyui tree 树形列表节点异步加载demo，比官方demo详细得多。是前后台交互的web应用。
jQuery JSONView是一款非常实用的格式化和语法高亮JSON格式数据查看器jQuery插件。通过该插件可以将JSON格式的数据进行格式输出，便于阅读，同时它还支持各种数据类型的语法高亮，以及节点的收缩和展开等。
1.代码中包括两种异步树加载,Default.aspx中使用json数据格式返回2.Default3使用兼容性很好的Jquery.simpletree树异步加载树,后台返回<ul><li> html标记.可以拖拽树.且插件包很小,只包括jquery.simple.tree.css,...
点添加、删除，新增和删除行，填写后数据后点提交时拼装成json串异步提交，后台解析json串。
本篇文章主要介绍了jquery使用EasyUI Tree异步加载JSON数据（生成树），具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
jquery.json-editor是一款json格式数据查看和编辑jQuery插件。该json数据查看插件支持语法高亮，支持支持数据块展开与收起，摒弃可以对json数据进行动态编辑。
一款简单兼容性好无限树插件jquery.simple.tree（已修改）
jQuery去读取json的数据非常非常方面而且大大提高了用户界面的可读性，提高了读取的效率，比读xml文件更加方面
jquery.json-viewer, 用于显示JSON数据的jQuery插件 jQuery浏览器JSON浏览器是一个jQuery插件，它可以通过将JSON对象转化为HTML来轻松显示JSON对象。功能：语法高亮显示在单击时折叠和展开子节点可以点击链接易于...
网页模板——jQuery查看json格式数据插件viewer.js
支持懒加载，解决了大数据量显示效率的问题； 提供表格树回调接口，方便实现自己的业务； 优化以前表格树代码，并且公开源码。
jquery 图片延迟加载插件制作tab选项卡图片异步加载
jQuery Simple Tree Ajax无限级树形菜单插件php版 兼容性非常好，可异步加载，支持拖拽。插件本身只支持HTML节点加载的，网上有人进行扩展了，用了JSON，不过个人感觉这对速度影响实在微乎其微，还是直接封装出HTML...
jstree是一款非常实用的jQuery目录树插件。jsTree树插件易于扩展，可以配置主题，支持HTML和JSON格式的数据，还支持异步回调数据，支持多级树结构等。
jquery异步加载页面，适合用于选项卡页面。
jQuery树插件演示族谱Family tree和日程安排