树型结构数据展现
这两天发现了dtree,做的很不错,想和大家交流一下下载地址: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 ; //Targetprivate 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.getId());contents.append("','");contents.append(tn.getPid());contents.append("','");contents.append(tn.getName());contents.append("','");contents.append(tn.getUrl());contents.append("','");contents.append(tn.getTitle());contents.append("','");contents.append(tn.getTarget());contents.append("','");contents.append(tn.getIcon());contents.append("','");contents.append(tn.getIconOpen());contents.append("','");contents.append(tn.getOpen());contents.append("');");}return contents.toString();}}
根据实际情况生成TreeNode对象
public void execute() throws EpochalException {// TODO Auto-generated method stubString sql = "";String url = "" ;sql = "SELECT id,parentId,name,seq ,remark FROM t_testtree ORDER BYseq DESC" ;TableData tableData = null;TreeNode[] treeNodes = null;try{tableData = TableSelector.select(sql);if(tableData!=null){treeNodes = new TreeNode ;for(int i = 0; i<tableData.getRowCount();i++){treeNodes = new TreeNode();treeNodes.setId(tableData.getString(i,"id"));treeNodes.setName(tableData.getString(i,"name"));treeNodes.setPid(tableData.getString(i,"parentId"));//根据实际情况生成连接地址url = "programList.x?category="+tableData.getString(i,"name") ;treeNodes.setUrl(url);treeNodes.setTitle(tableData.getString(i,"remark"));treeNodes.setTarget("_blank");//打开新窗口}dataBean.setParameter("treeNodeArray",treeNodes) ;}}catch(Exception e){System.out.println(e.toString());}}
jsp这边取"treeNodeArray"后通过TreeNodeUtil类生成js代码
<%TreeNode[] treeNodes = (TreeNode[])dataBean.getParameterObject("treeNodeArray") ;%><p><a href="javascript: d.openAll();">全部展开</a> | <a href="javascript: d.closeAll();">全部关闭</a></p><script language="javascript">d = <%=TreeNodeUtil.createJsArray(treeNodes,"d")%>document.write(d);</script>
客户端生成的js代码
<script language="javascript">d = new dTree('d');d.add('1','-1','栏目','programList.x?category=栏目','','_blank','','','');d.add('2','1','电影','programList.x?category=电影','','_blank','','','');d.add('3','1','电视剧','programList.x?category=电视剧','','_blank','','','');d.add('4','1','专题','programList.x?category=专题','','_blank','','','');d.add('5','1','远程教育','programList.x?category=远程教育','','_blank','','','');d.add('6','1','期刊','programList.x?category=期刊','','_blank','','','');d.add('7','2','动作片','programList.x?category=动作片','','_blank','','','');d.add('8','2','喜剧片','programList.x?category=喜剧片','','_blank','','','');d.add('9','2','鬼片','programList.x?category=鬼片','','_blank','','','');d.add('10','3','韩剧','programList.x?category=韩剧','','_blank','','','');d.add('11','3','古装剧','programList.x?category=古装剧','','_blank','','','');d.add('12','5','英语沙龙','programList.x?category=英语沙龙','','_blank','','','');d.add('13','4','热门推荐','programList.x?category=热门推荐','','_blank','','','');d.add('14','7','港台片','programList.x?category=港台片','','_blank','','','');d.add('15','7','欧美片','programList.x?category=欧美片','','_blank','','','');d.add('16','14','成龙全集','programList.x?category=成龙全集','','_blank','','','');d.add('17','14','李连杰全集','programList.x?category=李连杰全集','','_blank','','','');document.write(d);</script>
感觉使用很方便,数据量不是很大(一般的树型结构的数据量不会很大的,数据量大了就不直观了)的情况下能够满足大多数人的需要。
注意的是root节点的pid必须为'-1'
页:
[1]