基于Ext JS多级树结构的实现

摘要：无限级的类别管理实现起来较为困难，本文提出使用Ext JS的Tree组件构建类别多级树结构的方法，并构建右键菜单，实现类似于桌面程序的类别管理。

关键词：类别管理；Ext JS；Tree；多级树结构

中图分类号：TP311.52 文献标识码：A文章编号：1007-9599 (2011) 11-0000-02

The Realization of Multi-level Tree Structure Based on Ext JS

Xia Xun

(Luzhou Vocational and Technical College,Luzhou646005,China)

Abstract:Unlimited class category management is more difficult to implement.This paper presents the use of Ext JS Tree component build category tree structure of multi-level approach,and build the context menu,similar to desktop programs to achieve the type of management.

Keywords:Category management;Ext JS;Tree;Multi-level tree structure

一、引言

在Web应用中，经常会使用树结构来显示各种层次关系，例如地区、类别、部门等等。一般的开发中，类别的级别是固定的，开发起来较为容易，但是某些情况下，需要更灵活的处理方式，层次不固定。另外，在Web中对这种无限级的类别，管理起来也很不方便。使用Ext JS这个基于Java Script的RIA框架，可以实现类似于桌面程序的用户体验。

二、Ext JS简介

Ext JS是一个流行的Ajax框架，在各种基于Ajax的框架中，Ext JS理念先进，各种组件使得程序员在不需要美工的情况下也能够编写优美的界面。缺点是文件较大，在目前的因特网环境下，加载网页速度较慢，所以Ext JS主要在各种企业级系统中使用。

三、数据库设计

数据表设计三个字段，id：类别编号，name：类别名称，parentId：父类别编号。如果是最顶层的类别，父类别id记为0。

四、多级树结构实现

在Ext JS中，树控件由Tree Panel类定义，由Tree Node类定义树的节点，分为叶子节点和非叶子节点。

var tree=new Ext.tree.Tree Panel（{

el：'tree Div'，

loader：new Ext.tree.Tree Loader（{data Url：'get Node.jsp'}）

}）；

var root=new Ext.tree.Async Tree Node（{id：'0'，text：'区域管理'}）；

tree.set Root Node（root）；

tree.render（）；

root.expand（）；

以上代码定义了一棵树，其中tree Div是树出现的位置，在HTML页面中，应该有