欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

扩展了一棵jquery的树插件SimpleTree,加上了json格式数据异步加载能力 jsonjQuery数据结构IEServlet 

程序员文章站 2024-02-03 13:00:46
...

学习使用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包,现在应该不会报错了。

 

 

  • src.rar (1 KB)
  • 下载次数: 1471

上一篇: Rails2.2.2中使用will_paginate

下一篇: