`
kaobian
  • 浏览: 212193 次
  • 性别: Icon_minigender_1
  • 来自: 哈尔滨
社区版块
存档分类
最新评论

Extjs 动态加载树

阅读更多

Ext js 和struts2 的结合,请 先 取出struts2中的无用jar:json-lib-2.1

 

struts2 本身待的json包已经很老了,提供的工具方法就不全,本demo 中 已经 附带了json 的新jar

 

本例子中不包含struts2的jar包。如果想跑起来,请自行加上struts2的jar

 

JS代码:


Ext.onReady(function(){
    var Tree = Ext.tree;
  
    var tree = new Tree.TreePanel({
        autoScroll:true,
        animate:true,
        enableDD:true,
        containerScroll: true,
        loader: new Tree.TreeLoader({
            dataUrl:'http://localhost/Ext/tree.action'
        })
    });

    // set the root node
    var root = new Tree.AsyncTreeNode({
        text: 'Car',
        draggable:false,
        id:'source'
    });
    tree.setRootNode(root);

    // render the tree
    tree.render('div');
    root.expand();
});

 

 

 

JAVA代码:

 

 

action:

--------------------------------------

package com;

import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.http.HttpServletResponse;


import net.sf.json.JSONArray;

import org.apache.struts2.ServletActionContext;

import bean.Menu;

import com.opensymphony.xwork2.ActionSupport;

public class TreeAction extends ActionSupport {

    private String menuString;
    private List<Menu> menus;

    public String execute() {

        menus = new ArrayList<Menu>();

        Menu benz = new Menu();
       
        benz.setText("Benz");
        benz.setCls("folder");
        benz.setLeaf(false);
        benz.setId(10);
       
        menus.add(benz);

        List<Menu> benzList = new ArrayList<Menu>();
        benz.setChildren(benzList);

        Menu menu  = new Menu();
        menu.setText("S600");
        menu.setCls("file");
        menu.setLeaf(true);
        menu.setId(11);
        benzList.add(menu);
       
        menu = new Menu();
        menu.setText("SLK200");
        menu.setCls("file");
        menu.setLeaf(true);
        menu.setId(12);
        benzList.add(menu);

        Menu bmw = new Menu();
        bmw.setText("BMW");
        bmw.setCls("folder");
        bmw.setLeaf(false);
        bmw.setId(20);
        menus.add(bmw);

        List<Menu> bmwList = new ArrayList<Menu>();
        bmw.setChildren(bmwList);

        menu = new Menu();
        menu.setText("325i");
        menu.setCls("file");
        menu.setLeaf(true);
        menu.setId(21);
        bmwList.add(menu);

        menu = new Menu();
        menu.setText("X5");
        menu.setCls("file");
        menu.setLeaf(true);
        menu.setId(22);
        bmwList.add(menu);
       
        JSONArray jsonObject = JSONArray.fromObject(menus);
       
        response(jsonObject);
        return null;
    }
    //向前台传送json结果集
    protected void response(Object message) {
        try {
            HttpServletResponse response = ServletActionContext.getResponse();
            response.setCharacterEncoding("UTF-8");
            response.setContentType("text/plain");
            PrintWriter out = response.getWriter();
            out.print(message);
            out.close();
        } catch (Exception e) {
            throw new RuntimeException(e);
        }
    }
   
   
    public String getMenuString() {
        return menuString;
    }

    public void setMenuString(String menuString) {
        this.menuString = menuString;
    }

}

--------------------------------------

bean:

 

package bean;

import java.util.List;

public class Menu {

    private int id;
    private String text;
    private boolean leaf;
    private String cls;
    private List<Menu> children;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getText() {
        return text;
    }

    public void setText(String text) {
        this.text = text;
    }

    public boolean isLeaf() {
        return leaf;
    }

    public void setLeaf(boolean leaf) {
        this.leaf = leaf;
    }

    public String getCls() {
        return cls;
    }

    public void setCls(String cls) {
        this.cls = cls;
    }

    public List<Menu> getChildren() {
        return children;
    }

    public void setChildren(List<Menu> children) {
        this.children = children;
    }
}

 

 

  • Ext.rar (1.5 MB)
  • 下载次数: 229
13
1
分享到:
评论
7 楼 hzxlb910 2012-12-14  
我的是动态加载
6 楼 hzxlb910 2012-12-14  
能否把这个源码发份给我,我现在做这方面都崩溃了,409235520@qq.com 或者加我QQ,谢谢了
5 楼 鸟气凌人 2012-04-27  
学习了,很感谢
4 楼 kaobian 2011-09-21  
java麦克斯泰 写道
为何 这些程序 没有一个 能跑 通的 呀 真是无语了

呵呵,我这个包里面没有加入struts2的架包,因为太大了,你看看你的工程里面是不是已经加入,如果加入了struts2的架包,不会出问题的,本身我这个程序还没有连数据库,只是靠几个静态例子写的,如果你要写动态的例子可以给我你的QQ我加你,把我本机上的程序发给你!那个失败页面跳转你可以随便写一个,只有失败的时候才会跳转到,我就没理他,action中必须要返回null ,我们不是跳转页面,是通过异步传输过来你想要的那部分东西,这点你需要理解
3 楼 java麦克斯泰 2011-09-20  
struts actin 中return null

struts.xml中 缺 <result = 'input'><result>

不知重 拿来的 越想月生气 自己菜鸟 找个程序 看写的也是这个 菜 无语了
2 楼 java麦克斯泰 2011-09-20  
为何 这些程序 没有一个 能跑 通的 呀 真是无语了
1 楼 bewithme 2011-04-23  
哥最近也在玩这东东!

相关推荐

    extjs实现动态树加载菜单

    动态树加载菜单是 ExtJS 中一种常见且实用的功能,它允许用户在需要时按需加载树节点,从而提高应用性能,减少初次加载时的数据量。 动态树加载,也称为懒加载或按需加载,是指在用户滚动、展开节点或执行其他操作...

    extjs实现动态树

    动态树(Dynamic Tree)是指在运行时可以动态加载、添加、删除或更新节点的树形控件。在ExtJS中,这种功能主要通过`Ext.tree.TreePanel`或其现代版本`Ext.tree.View`来实现。 一、ExtJS 动态树基础 1. `Ext.tree....

    Extjs入门之动态加载树代码

    通过以上步骤,你可以轻松地为Web应用添加一个动态加载的树形导航菜单,提高用户的使用体验。当然,实际项目中还需要考虑更多的细节问题,例如错误处理、性能优化等,但本文提供了一个良好的起点。

    Extjs 动态树 数据库

    本项目将详细介绍如何使用ExtJS动态加载树结构,并通过JDBC连接SQL Server数据库获取数据,最终将数据转换为JSON格式以供树结构使用。 首先,让我们了解**ExtJS动态树**的基本概念。动态树(Dynamic Tree)指的是在...

    extjs 动态树及中文API

    在本篇文章中,我们将深入探讨ExtJS中的动态树以及中文API的使用。 动态树的核心在于其数据绑定机制。在ExtJS中,树形控件通常与数据源(如Store)绑定,当数据源发生变化时,树会自动更新。你可以通过Ajax请求获取...

    EXTJS动态树支持checkbox 全选

    标题中的“EXTJS动态树支持checkbox全选”指的是EXTJS中树组件的一个特性,即在树形结构中添加复选框(checkbox)功能,并支持全选和全取消选中操作。这样的功能对于需要用户进行多项选择的场景非常有用,比如文件...

    ExtJS实现动态载入树

    【ExtJS动态加载树】是网页开发中一种常见的交互方式,它允许用户逐步加载树形结构的数据,提高页面的性能和用户体验。在ExtJS框架下,我们可以利用其强大的组件库来构建这样的功能。 首先,我们来看一下数据库背景...

    extjs动态树struts请求数据

    ExtJS 动态树结构与Struts框架结合,主要用于构建基于Web的动态树形界面,让用户能够以图形化的方式查看和操作层次结构的数据。在这一过程中,Struts作为MVC框架负责后端业务逻辑处理,而ExtJS则作为前端展示库,...

    Extjs动态树的实现以及节点拖拽

    在本文中,我们将探讨如何实现ExtJS动态树以及其中的节点拖拽功能。动态树是一种能够实时更新和修改的树形结构,允许用户添加、删除和移动节点。这种功能在各种应用场景中非常有用,如文件系统、组织结构或层级数据...

    Extjs4动态树的实现

    ExtJS4是一个强大的JavaScript框架,用于构建富客户端应用程序。在这个示例中,我们将探讨如何实现一个动态树结构,其中数据是通过...这种动态加载的方式使得树结构可以根据用户交互灵活地展示数据,提高了用户体验。

    Extjs4 下拉树 TreeCombo

    ExtJS 4 下拉树(TreeCombo)是一种组合控件,它将传统的下拉框与树形结构结合在一起,提供了一种在有限空间内展示层级数据的高效方式。这种控件在很多场合都非常实用,例如在需要用户选择分类或者层级结构的场景中...

    动态加载树Extjs + asp.net

    本主题主要探讨如何在ExtJS框架下,结合ASP.NET后端技术,实现动态加载树形结构数据。以下是对这个知识点的详细阐述: 首先,ExtJS是一个强大的JavaScript库,用于构建富客户端应用。它提供了丰富的组件库,包括树...

    EXTJS动态树的实现举例

    在EXTJS中实现动态树,主要是通过EXTJS的TreePanel组件来完成,下面将详细介绍EXTJS动态树的实现过程及其相关知识点。 1. TreePanel组件: TreePanel是EXTJS中用来展示树形结构数据的组件。它包含节点(Node)、根...

    Extjs下拉多选树

    它支持动态加载、拖放操作、节点展开和折叠等功能。而下拉树是将树形结构嵌入到下拉框中,通常用于选择一组相关的项目,比如文件夹结构或组织架构。 2. **多选功能**:下拉多选树的一个重要特性是支持多选。通过...

    extjs 树 搜索

    7. **异步加载**:对于拥有大量子节点的树,EXTJS支持延迟加载或按需加载。只有当用户展开父节点时,才会请求并加载其子节点,这样可以显著提高性能。 8. **搜索性能优化**:在处理大量数据时,可以考虑对树进行...

    tree 动态树 extjs ajax

    在给定的标题和描述中,主要涉及了ExtJS中的动态树(tree)功能以及与AJAX的结合使用。下面将详细介绍这些知识点。 **动态树(Dynamic Tree)** 动态树是ExtJS中的一种控件,用于展示层次结构的数据。它可以实时地...

    Extjs4下拉树菜单ComboBoxTree支持单选和多选并且支持展开选中指定节点的通用控件

    在这个特定的情况下,我们讨论的是一个定制的下拉树菜单控件——ComboBoxTree,它在ExtJS4中实现了单选和多选功能,并且具备展开选中指定节点的能力。这个控件在实际项目中已经被广泛使用并证明了其稳定性和实用性,...

    EXTJS---完整数据库代码,全网唯一,非常适合EXTJS搭建框架,包含动态树,菜单等

    EXTJS的动态树(TreePanel)组件允许开发者创建可交互的树形结构,这些结构可以动态地加载数据。树节点可以包含子节点,可以展开或折叠,支持拖放操作,非常适合用来展示层次化的信息,如目录结构、组织架构等。动态...

    Extjs折叠布局中添加树

    通过这个示例,我们可以了解到如何在ExtJS的折叠布局中集成树形结构,以及如何从服务器动态加载数据来构建这个树。这在实现具有层次结构的导航菜单或信息分类时非常有用。同时,我们也学习到了如何创建和配置不同的...

Global site tag (gtag.js) - Google Analytics