利用ext实现的简单树形结构

来源：互联网发布：程序员必备app 编辑：程序博客网时间：2024/06/06 03:45

HTML代码

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>Reorder TreePanel</title><link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" /><style>body { font-size:13px;}</style><script type="text/javascript" src="javascript/ext-base.js"></script><script type="text/javascript" src="javascript/ext-all.js"></script><script type="text/javascript" src="reorder.js"></script></head><body><div id="tree-div" style=" overflow: auto;height:300px;width:180px;border:0px solid #c3daf9;"></div></body></html>

js代码：

/* * Ext JS Library 2.0.2 * Copyright(c) 2006-2008, Ext JS, LLC. * licensing@extjs.com * * http://extjs.com/license */Ext.BLANK_IMAGE_URL = 'resources/images/default/s.gif'Ext.onReady(function(){ // shorthand var Tree = Ext.tree; var tree = new Tree.TreePanel({ el:'tree-div', useArrows:true, autoScroll:true, animate:true, enableDD:true, containerScroll: true, loader: new Tree.TreeLoader({ dataUrl:'tree.jsp' }) }); // set the root node var root = new Tree.AsyncTreeNode({ text: '农作物', draggable:false, id:'source' }); tree.setRootNode(root); // render the tree tree.render(); root.expand();});

jsp代码：

<%@ page contentType="text/html;charset=gb2312"%><%@ page language="java" import="jswz.common.dba,java.util.*" %><%out.print("[{'id':'41','text':'苹果','leaf':true},{'id':'42','text':'桃子','leaf':true},{'id':'43','text':'葡萄','leaf':true},{'id':'44','text':'蕃茄','leaf':true},{'id':'45','text':'马铃薯','leaf':true},]");%>