`
jinbingchuan
  • 浏览: 9885 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

extjs3 tree 从数据库创建设计、处理到前台展示

 
阅读更多



 在网上看到很多关于extjs树的文章,他们说的都是如何还回json格式,但是并没有涉及到后台数据库表的结构,本文简单介绍下从表的设计到前台的展示。

sql:

create table tree(

   id int primary key,

   parent_id int not null,

   code varchar(50)

)

 

insert into tree values(1,0,'根节点');

insert into tree values(2,1,'一级菜单');

insert into tree values(3,1,'一级菜单');

insert into tree values(4,2,'二级菜单');

insert into tree values(5,2,'二级菜单');

insert into tree values(6,3,'二级菜单');

insert into tree values(7,4,'三级菜单');

insert into tree values(8,4,'三级菜单');

 

 

读取数据库表信息

 

 package dao;

 

import java.sql.Connection;

import java.sql.DriverManager;

import java.sql.ResultSet;

import java.sql.SQLException;

import java.sql.Statement;

import java.util.ArrayList;

import java.util.List;

 

import com.wang.util.Menu;

 

public class AllBook {

 

public static final String URL = "jdbc:sqlserver://localhost:14333;DatabaseName=gm";

public static final String serName = "sa";

public static final String Pwd = "jinbingchuan";

 

public List<Tree> fillbook() {

List<Tree> bookList = new ArrayList<Tree>();

Connection con = null;

Statement st = null;

ResultSet rs = null;

try {

   con = getConnection();

   st = con.createStatement();

String sql = "select * from tree order by id desc"; // 查询数据SQL语句s

   rs = st.executeQuery(sql); // 获取结果集

while (rs.next()) {

Tree tree = new Tree();

tree.setId(rs.getInt("id"));

tree.setCode(rs.getString("Code"));

tree.setParentId(rs.getInt("parent_id"));

bookList.add(tree);

}

 

} catch (Exception ex) {

ex.printStackTrace(); // 输出出错信息

}

finally{

try {

rs.close();

st.close();

con.close();

} catch (SQLException e) {

// TODO Auto-generated catch block

e.printStackTrace();

} // 关闭连接

}

return bookList;

}

 

public static Connection getConnection() {

Connection conn = null;

try {

Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver");

conn = DriverManager.getConnection(URL, serName, Pwd); // 得到连接

} catch (ClassNotFoundException e) {

e.printStackTrace();

} catch (SQLException e) {

e.printStackTrace();

}

 

return conn;

}

 

public void recurison(List<Tree> books,Menu menu){

if(hasChildren(books,menu)){

menu.setLeaf(false);

menu.setId(menu.getId());

menu.setText(menu.getText());

List<Menu> children = getChildren(books,menu);

menu.setChildren(children);

for(Menu n:children){

recurison(books,n);

}

}

else{

menu.setLeaf(true);

menu.setId(menu.getId());

menu.setText(menu.getText());

}

}

 

public Menu getRoot(List<Tree> books){

for(Tree b:books){

if(b.getParentId().intValue() == 0){

Menu menu = new Menu();

menu.setId(b.getId());

menu.setText(b.getCode());

return menu;

}

}

return null;

}

 

public boolean hasChildren(List<Tree> books,Menu menu){

for(Tree b:books){

if(b.getParentId().intValue() == menu.getId().intValue())

return true;

}

return false;

}

 

public List<Menu> getChildren(List<Tree> books,Menu menus){

List<Menu> bookList = new ArrayList<Menu>();

for(Tree b:books){

if(b.getParentId().intValue() == menus.getId().intValue()){

Menu menu = new Menu();

menu.setId(b.getId());

menu.setText(b.getCode());

bookList.add(menu);

}

}

return bookList;

}

 

public Menu getAllBooks() {

List<Tree> books = fillbook();

Menu menu = getRoot(books);

recurison(books,menu);

return menu;

}

 

}

 

 

 tree.java如下:

 

          package dao;

 

public class Tree {

private Integer id;

private Integer parentId;

private String Code;

 

 

 

public Tree() {

super();

// TODO Auto-generated constructor stub

}

 

public Tree(Integer id, Integer parentId, String code) {

super();

this.id = id;

this.parentId = parentId;

Code = code;

}

 

public Integer getId() {

return id;

}

 

public void setId(Integer id) {

this.id = id;

}

 

public Integer getParentId() {

return parentId;

}

 

public void setParentId(Integer parentId) {

this.parentId = parentId;

}

 

public String getCode() {

return Code;

}

 

public void setCode(String code) {

Code = code;

}

 

 

@Override

public String toString() {

return "Book [BookName=" 

+ ", Code=" + Code + ", id=" + id + ", parentId=" + parentId

+ "]";

}

 

}

 

 

Menu.java:

 

 

import java.util.List;

 

public class Menu {

 

 

private String text;

 

private Integer id;

 

private String cls;

 

private boolean leaf;

 

private String href;

 

 

private List<Menu> children;

 

private String hrefTarget;

 

public String getHrefTarget() {

return hrefTarget;

}

 

public void setHrefTarget(String hrefTarget) {

this.hrefTarget = hrefTarget;

}

 

public String getText() {

return text;

}

 

public void setText(String text) {

this.text = text;

}

 

public Integer getId() {

return id;

}

 

public void setId(Integer string) {

this.id = string;

}

 

public String getCls() {

return cls;

}

 

public void setCls(String cls) {

this.cls = cls;

}

 

public boolean isLeaf() {

return leaf;

}

 

public void setLeaf(boolean string) {

this.leaf = string;

}

 

public List<Menu> getChildren() {

return children;

}

 

public void setChildren(List<Menu> children) {

this.children = children;

}

 

public String getHref() {

return href;

}

 

public void setHref(String href) {

this.href = href;

}

 

 

}

 

 

 

servlet:

 

package com.wang.servlet.ext;

 

import java.io.IOException;

import java.io.PrintWriter;

 

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

 

import net.sf.json.JSONArray;

 

import com.wang.util.Menu;

 

import dao.AllBook;

 

public class BookServlet extends HttpServlet {

 

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

 

this.doPost(request, response);

}

 

public void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

               String menuString = null;

request.setCharacterEncoding("UTF-8");

response.setCharacterEncoding("UTF-8");

AllBook allBook = new AllBook();

Menu menu = allBook.getAllBooks();

PrintWriter out = response.getWriter();

JSONArray jsonObject = JSONArray.fromObject(menu);

try {

menuString = jsonObject.toString();

System.out.println("menuString=="+menuString);

} catch (Exception e) {

 

e.printStackTrace();

}

out.print(menuString);

}

 

}

 

 

前台页面显示

 

<script type="text/javascript">

Ext.onReady(function() {

var Tree = Ext.tree;

   

    var tree = new Tree.TreePanel({

        el:'tree-div',

        autoScroll:true,

        animate:true,

        enableDD:true,

        containerScroll: true,

        loader: new Tree.TreeLoader({

            dataUrl:'<%=path%>/BookServlet'

        })

    });

 

    // set the root node

    var root = new Tree.AsyncTreeNode({

        text: 'Root',

        draggable:false,

        id:'source'

    });

    tree.setRootNode(root);

 

    // render the tree

    tree.render();

    tree.expandAll();

});

</script>

</head>

<body>

<div id="tree-div"></div>

</body>

 

显示效果:

 

  • 大小: 11.5 KB
  • rt.zip (2.7 MB)
  • 下载次数: 2
分享到:
评论

相关推荐

    extjs的tree的使用

    Tree组件支持动态加载数据,这意味着在树展开时,可以异步地从服务器获取子节点数据,而不是一开始就加载所有数据,这在处理大量数据时非常有用。动态加载可以通过在`Ext.data.TreeStore`中设置`proxy`和`autoLoad`...

    extjs tree示例

    ExtJS Tree 示例是一种基于ExtJS库实现的交互式树形组件,它允许用户在Web应用程序中展示层次结构数据。在本示例中,我们将探讨如何使用ExtJS来创建、访问和操作一个树形结构,特别是在数据库操作方面,如添加和删除...

    ExtJs4 Checkbox tree

    ExtJs4 Checkbox Tree是基于ExtJs 4框架实现的一种特殊树形组件,它在传统的树形结构基础上增加了复选框功能。这种组件常用于需要用户多选树形数据的场景,比如权限设置、目录选择等。下面将详细介绍ExtJs4 Checkbox...

    ExtJs_TreeDemo

    在"Ext_Demo"中,我们可以看到一个完整的示例,它可能包含了上述所有知识点的实现,从创建树结构、加载数据、响应用户交互到自定义样式等。通过深入研究这个示例,开发者能够更好地理解和掌握ExtJs中树形菜单的用法...

    extjs3连接mysql数据库实现增删查改功能

    本文将详细介绍如何使用ExtJS 3连接MySQL数据库并实现基本的CRUD(创建、读取、更新、删除)操作。 首先,理解ExtJS 3的核心概念至关重要。它提供了一套完整的组件库,包括表格、窗口、按钮、表单等,使得开发者...

    extjs ajax tree(js动态树,无需递归)

    ExtJS AJAX Tree是一种...总的来说,ExtJS AJAX Tree是构建动态、交互式树形界面的强大工具,通过AJAX实现异步加载,可以有效优化大型数据集的展示性能。通过深入理解和实践,你可以创建出满足各种需求的复杂树形视图。

    Extjs Tree + JSON + Struts2 示例源代码

    ExtJS Tree + JSON + Struts2 示例源代码是结合了三种技术来实现一个动态的、交互式的树形数据展示的应用。这个示例中,ExtJS用于前端UI的构建,JSON作为数据交换格式,而Struts2则作为后端MVC框架处理请求和返回...

    Extjs的Tree和Tab使用json做tree数据交互

    在ExtJS中,Tree和Tab是两种常用的组件,分别用于展示层次结构的数据(如目录结构)和创建多页面布局。本篇文章将详细探讨如何利用JSON数据来实现这两者的交互。 首先,让我们了解一下`Tree`组件。在ExtJS中,Tree...

    extjs tree

    这个例子展示了如何创建一个简单的树,其数据从'tree_data.json'文件动态加载。实际应用中,你需要根据项目需求调整数据源和样式。 总结一下,ExtJS Tree是一个强大且灵活的组件,它提供了丰富的功能和良好的用户...

    Extjs的tree

    ExtJS的Tree组件是Sencha ExtJS框架中的一个重要部分,用于构建可交互的树形结构数据展示。在ExtJS中,TreePanel是用来显示和操作树形数据的主要组件,它可以用于组织层次化的信息,如文件系统、组织架构或者分类...

    Extjs3.2.0+asp.net动态Tree

    在这个项目中,ASP.NET可能是用来处理数据库查询、数据绑定以及与ExtJS前端通信的部分。 3. **数据库集成**:提到的"附数据库"表明项目中包含数据库交互。可能是通过ASP.NET的ADO.NET库连接到SQL Server数据库...

    ExtJS4.2 tree 级联选择

    ExtJS4.2 Tree 级联选择是一个用于构建用户界面的功能,特别是在处理层次结构数据时非常有用。在ExtJS库中,Tree组件允许我们展示和操作数据以树形结构显示,而级联选择功能则意味着当用户选择一个节点时,它的所有...

    extjs-tree.zip_extjs tree

    ExtJS Tree是一个强大的JavaScript库,专门用于创建交互式的树形结构。这个"extjs-tree.zip"文件包含了使用Java编写的ExtJS异步树形控件的示例代码,旨在帮助开发者快速理解和应用这一功能。ExtJS是Sencha公司开发的...

    EXTJS 库存管理系统数据库脚本

    EXTJS 库存管理系统数据库脚本EXTJS 库存管理系统数据库脚本EXTJS 库存管理系统数据库脚本EXTJS 库存管理系统数据库脚本

    extjs入门项目+数据库

    7. **数据库设计**:在MySQL中创建相关表,设置合适的字段类型和约束。 8. **数据交互**:前后端通过JSON格式交换数据,实现数据的同步。 9. **权限与安全**:配置Spring Security,确保用户登录验证和权限控制。 10...

    ExtJs Tree

    通过ExtJs Tree,用户可以直观地展示数据之间的层级关系,并支持多种交互操作,如展开、折叠节点等。 ### 特性与功能 #### 树形面板(Treepanel) - **自动滚动**:通过`autoScroll`属性设置为`true`,确保当内容...

    动态加载extjs tree

    ExtJS Tree是Ext JS库中的一个组件,用于创建和展示层次结构的数据,通常表现为树形结构。这个组件在Web应用程序中广泛使用,特别是在需要管理有层级关系的数据时,如文件系统、组织架构或者导航菜单等。动态加载是...

    extjs前台设计工具

    extjs前台设计工具:不错的前台设计工具,使用起来很方便。web应用设计前台工具首选。

Global site tag (gtag.js) - Google Analytics