在网上看到很多关于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>
显示效果:
相关推荐
Tree组件支持动态加载数据,这意味着在树展开时,可以异步地从服务器获取子节点数据,而不是一开始就加载所有数据,这在处理大量数据时非常有用。动态加载可以通过在`Ext.data.TreeStore`中设置`proxy`和`autoLoad`...
ExtJS Tree 示例是一种基于ExtJS库实现的交互式树形组件,它允许用户在Web应用程序中展示层次结构数据。在本示例中,我们将探讨如何使用ExtJS来创建、访问和操作一个树形结构,特别是在数据库操作方面,如添加和删除...
ExtJs4 Checkbox Tree是基于ExtJs 4框架实现的一种特殊树形组件,它在传统的树形结构基础上增加了复选框功能。这种组件常用于需要用户多选树形数据的场景,比如权限设置、目录选择等。下面将详细介绍ExtJs4 Checkbox...
在"Ext_Demo"中,我们可以看到一个完整的示例,它可能包含了上述所有知识点的实现,从创建树结构、加载数据、响应用户交互到自定义样式等。通过深入研究这个示例,开发者能够更好地理解和掌握ExtJs中树形菜单的用法...
本文将详细介绍如何使用ExtJS 3连接MySQL数据库并实现基本的CRUD(创建、读取、更新、删除)操作。 首先,理解ExtJS 3的核心概念至关重要。它提供了一套完整的组件库,包括表格、窗口、按钮、表单等,使得开发者...
ExtJS AJAX Tree是一种...总的来说,ExtJS AJAX Tree是构建动态、交互式树形界面的强大工具,通过AJAX实现异步加载,可以有效优化大型数据集的展示性能。通过深入理解和实践,你可以创建出满足各种需求的复杂树形视图。
ExtJS Tree + JSON + Struts2 示例源代码是结合了三种技术来实现一个动态的、交互式的树形数据展示的应用。这个示例中,ExtJS用于前端UI的构建,JSON作为数据交换格式,而Struts2则作为后端MVC框架处理请求和返回...
在ExtJS中,Tree和Tab是两种常用的组件,分别用于展示层次结构的数据(如目录结构)和创建多页面布局。本篇文章将详细探讨如何利用JSON数据来实现这两者的交互。 首先,让我们了解一下`Tree`组件。在ExtJS中,Tree...
这个例子展示了如何创建一个简单的树,其数据从'tree_data.json'文件动态加载。实际应用中,你需要根据项目需求调整数据源和样式。 总结一下,ExtJS Tree是一个强大且灵活的组件,它提供了丰富的功能和良好的用户...
ExtJS的Tree组件是Sencha ExtJS框架中的一个重要部分,用于构建可交互的树形结构数据展示。在ExtJS中,TreePanel是用来显示和操作树形数据的主要组件,它可以用于组织层次化的信息,如文件系统、组织架构或者分类...
在这个项目中,ASP.NET可能是用来处理数据库查询、数据绑定以及与ExtJS前端通信的部分。 3. **数据库集成**:提到的"附数据库"表明项目中包含数据库交互。可能是通过ASP.NET的ADO.NET库连接到SQL Server数据库...
ExtJS4.2 Tree 级联选择是一个用于构建用户界面的功能,特别是在处理层次结构数据时非常有用。在ExtJS库中,Tree组件允许我们展示和操作数据以树形结构显示,而级联选择功能则意味着当用户选择一个节点时,它的所有...
ExtJS Tree是一个强大的JavaScript库,专门用于创建交互式的树形结构。这个"extjs-tree.zip"文件包含了使用Java编写的ExtJS异步树形控件的示例代码,旨在帮助开发者快速理解和应用这一功能。ExtJS是Sencha公司开发的...
EXTJS 库存管理系统数据库脚本EXTJS 库存管理系统数据库脚本EXTJS 库存管理系统数据库脚本EXTJS 库存管理系统数据库脚本
7. **数据库设计**:在MySQL中创建相关表,设置合适的字段类型和约束。 8. **数据交互**:前后端通过JSON格式交换数据,实现数据的同步。 9. **权限与安全**:配置Spring Security,确保用户登录验证和权限控制。 10...
通过ExtJs Tree,用户可以直观地展示数据之间的层级关系,并支持多种交互操作,如展开、折叠节点等。 ### 特性与功能 #### 树形面板(Treepanel) - **自动滚动**:通过`autoScroll`属性设置为`true`,确保当内容...
ExtJS Tree是Ext JS库中的一个组件,用于创建和展示层次结构的数据,通常表现为树形结构。这个组件在Web应用程序中广泛使用,特别是在需要管理有层级关系的数据时,如文件系统、组织架构或者导航菜单等。动态加载是...
extjs前台设计工具:不错的前台设计工具,使用起来很方便。web应用设计前台工具首选。