`
as1001001
  • 浏览: 88565 次
  • 性别: Icon_minigender_1
  • 来自: 鞍山
社区版块
存档分类
最新评论

利用DTree来制作js树

JavaJSPJavaScriptHTML 
阅读更多
整体思路就是利用java方法取出树节点对象的数组，将其传给js端，利用DTree来生成树。
DTree网址：http://destroydrop.com/javascripts/tree/ 


//节点对象类
public class BookMo {
	
	private int bookId;
	private String bookName;
	private int bookTId;

	BookMo(int id, String name, int bookTId) {
		this.bookId = id;
		this.bookName = name;
		this.bookTId = bookTId;
	}

	public int getBookId() {
		return bookId;
	}

	public void setBookId(int bookId) {
		this.bookId = bookId;
	}

	public String getBookName() {
		return bookName;
	}

	public void setBookName(String bookName) {
		this.bookName = bookName;
	}

	public float getBookTId() {
		return bookTId;
	}

	public void setBookPrice(int bookTId) {
		this.bookTId = bookTId;
	}

}



//给节点赋值和位置ID，生成对应的js代码
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;

public class BookDb {
	
	private static List<BookMo> treeList;
	
	static {
		treeList = new ArrayList<BookMo>();
//第三个参数是父节点ID
		BookMo bm = new BookMo(1, "book", -1);
		treeList.add(bm);
		bm = new BookMo(2, "computer book", 1);
		treeList.add(bm);
		bm = new BookMo(3, "other book", 1);
		treeList.add(bm);
		bm = new BookMo(4, "thinking in java", 2);
		treeList.add(bm);
		bm = new BookMo(5, "core java", 2);
		treeList.add(bm);
		bm = new BookMo(6, "effective java", 2);
		treeList.add(bm);
		bm = new BookMo(7, "GOF", 2);
		treeList.add(bm);
		bm = new BookMo(8, "明朝那些事儿", 3);
		treeList.add(bm);
		bm = new BookMo(9, "疯狂的程序员", 3);
		treeList.add(bm);
		bm = new BookMo(10, "圈子圈套", 3);
		treeList.add(bm);
	}
	
	public List<BookMo> getBookNodes() {
		return treeList;
	}
	
	// 返回定义且生成页面树的 js 字符串   
	public String getJSTreeString(){   
	    Iterator<BookMo> treeIt = getBookNodes().iterator();   
	    StringBuffer sbf = new StringBuffer();   
	    // 定义js树对象   
	    sbf.append("dtree = new dTree(\"dtree\");");   
	    while(treeIt.hasNext()){   
	    	BookMo nd = treeIt.next();   
	        // 增加 js树结点，可以指定点击的调用方法   
	        sbf.append("dtree.add("+nd.getBookId()+","+nd.getBookTId()+",\""+nd.getBookName()+"\",\"javascript: void(0);\");");   
	    }   
	    // 输出js树   
	    sbf.append("document.write(dtree);");   
	       
	    return sbf.toString();   
	}
}


jsp页面 
<%@ page language="java" contentType="text/html; charset=UTF-8"  
    pageEncoding="UTF-8"%>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<%@page import="com.LY.dtree.BookDb"%><html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Show Tree</title>  
<link rel="StyleSheet" type="text/css" href="dtree.css" />  
<script type="text/javascript" src="dtree.js"></script>  
</head>  
<body>  
<script type="text/javascript">  
eval('<%=new BookDb().getJSTreeString()%>');   
</script>  
  
</body>  
</html>


具体的二次开发可参考http://programmerdigest.cn/2009/12/607.html

补充：一般我们在用Js树时都会需要checkbox，这时需要添加部分代码（见附件），至于取出选中的节点数组，可以在点击checkbox动作后进行一次遍历，选出被选的节点标识，组成一个字符串，把它赋给同页面中的隐藏文本框，这样就能取出来了。
分享到：
| 简单的搜索输入框提示功能jsp+ajax
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics