下载地址: http://www.destroydrop.com/javascripts/tree/dtree.zip
或从附件里下载
看看里面的example01.html例子。
在这个基础上我做了一个动态的树型结构数据的展现(其实就是动态生成js代码而已)。
java类代码
import java.io.Serializable; public class TreeNode implements Serializable{ private String id ; //节点编号 private String pid ; //父节点编号 private String name ; //节点名称 private String url ; //链接地址 private String title ; //节点描述 private String target ; //Target private String icon ; //图标路径 private String iconOpen ; //展开状态下的图标路径 private String open ; //是否展开 //构造函数 public TreeNode(){ id = "" ; pid = "" ; name = "" ; url = "" ; title = "" ; target = "" ; icon = "" ; iconOpen = "" ; open = "" ; } //------get set functions
public class TreeNodeUtil { //返回js代码 public static String createJsArray(TreeNode[] tn , String dtree) { if(tn == null || tn.length == 0 ){ System.out.println("TreeNode is empty"); return ""; } StringBuffer contents = new StringBuffer(100); contents.append("new dTree('"+dtree+"');"); for (int i = 0; i < tn.length; i++) { contents.append("\n"); contents.append(dtree+".add('"); contents.append(tn[i].getId()); contents.append("','"); contents.append(tn[i].getPid()); contents.append("','"); contents.append(tn[i].getName()); contents.append("','"); contents.append(tn[i].getUrl()); contents.append("','"); contents.append(tn[i].getTitle()); contents.append("','"); contents.append(tn[i].getTarget()); contents.append("','"); contents.append(tn[i].getIcon()); contents.append("','"); contents.append(tn[i].getIconOpen()); contents.append("','"); contents.append(tn[i].getOpen()); contents.append("');"); } return contents.toString(); } }
根据实际情况生成TreeNode对象
public void execute() throws EpochalException { // TODO Auto-generated method stub String sql = ""; String url = "" ; sql = "SELECT id,parentId,name,seq ,remark FROM t_testtree ORDER BY seq DESC" ; TableData tableData = null; TreeNode[] treeNodes = null; try{ tableData = TableSelector.select(sql); if(tableData!=null){ treeNodes = new TreeNode[tableData.getRowCount()] ; for(int i = 0; i
jsp这边取"treeNodeArray"后通过TreeNodeUtil类生成js代码
<% TreeNode[] treeNodes = (TreeNode[])dataBean.getParameterObject("treeNodeArray") ; %>
客户端生成的js代码
感觉使用很方便,数据量不是很大(一般的树型结构的数据量不会很大的,数据量大了就不直观了)的情况下能够满足大多数人的需要。
注意的是root节点的pid必须为'-1'