用ext动态创建tree

来源：互联网发布：赛默飞变色龙软件编辑：程序博客网时间：2024/05/01 11:47

根据网上收集到的代码改编，主要是网上很少见介绍修改树的图片，所以自己写了一个。图片用的ext自带的，图片路径看我下面的样式表或者按ext自带的文档层次开发。

1. 数据库格式：

说明：

A. 第一个节点是没有父节点的，所有其intParentId要小于任何的intId。

B. strLink只有在最后的子节点才使用。

C. strTargetForm指调用MyJsp.jsp页面的frameset里面的frame的name。

CREATE TABLE tree (

intId int NOT NULL , --节点ID

intParentId int NOT NULL , --父节点ID

strText varchar (100) COLLATE Chinese_PRC_CI_AS NOT NULL ,--节点名称

strLink varchar (200) COLLATE Chinese_PRC_CI_AS NULL , --节点链接的URL

strTips varchar (250) COLLATE Chinese_PRC_CI_AS NULL , --节点提示说明

strTargetForm varchar (50) COLLATE Chinese_PRC_CI_AS NULL --节点目标Frame

) ON PRIMARY

2. serviceimpl递归调用函数：

说明：用递归的方法从数据库中读取tree的结构并返回一个组成json格式的字符串代码：

public String getNodesResultByRootId(int rootId) {

/** 该函数根据指定的ID值返回以该ID为根节点的树，应该返回类似的JSON格式,注，不含最外层的

{id: 1, text: 'A leaf Node', leaf: true },

{ id: 2, text: 'A folder Node', children:

{ id: 3, text: 'A child Node', leaf: true }

} */

String result="";

List list = this.findbyintId(rootId);

String strText="";

String strLink="";

String strTips="";

String strTargetForm="";

if(list!=null&&list.size()>0){

Tree tree = (Tree) list.get(0);

strText=tree.getId().getStrText();

strLink=tree.getId().getStrLink();

strTips=tree.getId().getStrTips();

strTargetForm=tree.getId().getStrTargetForm();

}else{

return result;

}

// 首先查看该节点是否为叶子节点

List list1 = this.findbyintParentId(rootId);

if(list1.size()>0&&list1!=null){

//该节点为根节点

result="{"

+"id:"+rootId+","

+"text:'"+strText+"',"

+"qtip:'"+strTips+"',"

+"children:";

for(int l=0;l<list1.size();l++){//l+1当前第几行数据

int rowCounts=list1.size(); //获取总行数

// System.out.println("rowCounts总行数:"+rowCounts);

// System.out.println("当前行数，从0算起:"+l);

Tree tree1 = (Tree) list1.get(l);

int intChildId=tree1.getId().getIntId();

// System.out.println("intChildId:"+intChildId);

if(rowCounts==1)

result=result+""+getNodesResultByRootId(intChildId)+"";

else if(rowCounts>1){

if(l+1==rowCounts) //如果是最后一个字节点

result=result+getNodesResultByRootId(intChildId)+"";

else if(l==0)

result=result+""+getNodesResultByRootId(intChildId)+",";

else

result=result+getNodesResultByRootId(intChildId)+",";

}

result=result+"}";

// System.out.println("res根节点:"+result);

}

else{

//该节点为叶子节点

result="{"

+"id:"+rootId+","

+"text:'"+strText+"',"

+"hrefTarget:'"+strTargetForm+"',"

+"href:'"+strLink+"',"

+"qtip:'"+strTips+"',"

+"leaf: true"

+"}";

// System.out.println("res1子节点:"+result);

}

return result;

}

3. action的作用：

说明：调用serviceimpl的递归函数，取得一个符合ext中tree模式所需要的json格式的字符串发送到一个网页里面。根据不同的需要可以传入不用的节点ID来显示不同的树，如果能和权限管控结合在一起就可以做到不同权限的人只能看到属于他权限范围内的树。

代码：

public String execute() throws Exception{

tempResponse = ""+service.getNodesResultByRootId(1)+"";

System.out.println("tempResponse:"+tempResponse);

return "success";

}

4. tree.jsp的作用：

说明：得到action发送的字符串并显示到网页上。

代码：

<%@ page language="java" pageEncoding="utf-8"%>

<%@ taglib uri = "/struts-tags" prefix = "ss" %>

<ss:property value="tempResponse" escape="false"/>

5. treeview.js的作用：

说明：调用ext，创建ext的tree。Tree取值调用action，这样可以得到action转向得jsp页面获取jsp页面的json数据。el：js页面生成的tree显示的地方。

代码：

Ext.onReady(function(){

// shorthand

Ext.BLANK_IMAGE_URL ='images/default/s.gif';

Ext.QuickTips.init();

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:'http://localhost:8080/testStruts2/treejs/nodes.action'

})

});

// set the root node

var root = new Tree.AsyncTreeNode({

text: 'Ext JS',

draggable:false,

id:'source'

});

tree.setRootNode(root);

// render the tree

tree.render();

root.expand(true,false);

});

6. MyJsp.jsp页面：

说明：调用treeview.js。

代码：

<html>

<head>

<title>Reorder TreePanel</title>

</head>

<body>

</body>

</html>

7. 图标的说明：

Tree的图标是使用ext-all.css里面定义的图标。如果要修改，在MyJsp.jsp页面里面用样式表重写。

.x-tree-node-loading .x-tree-node-icon{background-image:url(../images/default/tree/loading.gif)!important;}

.x-tree-arrows .x-tree-elbow{background:transparent url(../images/default/tree/elbow.gif);}

.x-tree-arrows .x-tree-elbow-plus{background:transparent url(../images/default/tree/arrows.gif) no-repeat 0 0;}

.x-tree-arrows .x-tree-elbow-minus{background:transparent url(../images/default/tree/arrows.gif) no-repeat -16px 0;}

.x-tree-arrows .x-tree-elbow-end{background:transparent url(../images/default/tree/elbow-end.gif);}

.x-tree-arrows .x-tree-elbow-end-plus{background:transparent url(../images/default/tree/arrows.gif) no-repeat 0 0;}

.x-tree-arrows .x-tree-elbow-end-minus{background:transparent url(../images/default/tree/arrows.gif) no-repeat -16px 0;}

.x-tree-arrows .x-tree-elbow-line{background:transparent url(../images/default/tree/elbow-line.gif);}

.x-tree-arrows .x-tree-ec-over .x-tree-elbow-plus{background-position:-32px 0;}

.x-tree-arrows .x-tree-ec-over .x-tree-elbow-minus{background-position:-48px 0;}

.x-tree-arrows .x-tree-ec-over .x-tree-elbow-end-plus{background-position:-32px 0;}

.x-tree-arrows .x-tree-ec-over .x-tree-elbow-end-minus{background-position:-48px 0;}

.x-tree-node-expanded .x-tree-node-icon{background-image:url(../images/default/tree/folder-open.gif);}

.x-tree-node-leaf .x-tree-node-icon{background-image:url(../images/default/tree/leaf.gif);}

.x-tree-node-collapsed .x-tree-node-icon{background-image:url(../images/default/tree/folder.gif);}

</style>