利用DTree来制作js树

最新推荐文章于 2021-03-22 07:44:41 发布

as5005005

最新推荐文章于 2021-03-22 07:44:41 发布

阅读量89

点赞数

分类专栏：技术总结文章标签： Java JSP JavaScript HTML ViewUI

技术总结专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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


//节点对象类
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>

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

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

as5005005

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用DTree来制作js树

整体思路就是利用java方法取出树节点对象的数组，将其传给js端，利用DTree来生成树。DTree网址：[url]http://destroydrop.com/javascripts/tree/[/url][code="java"]//节点对象类public class BookMo { private int bookId; private String ...
复制链接

扫一扫

专栏目录