The data for this tree is asynchronously loaded through a TreeStore and
AjaxProxy.
js代码如下:
Ext.require([
'Ext.tree.*',
'Ext.data.*',
'Ext.tip.*'
]);
Ext.onReady(function() {
Ext.QuickTips.init();
var store = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
url: 'organization!getDirectSubordinates.action'
},
root: {
text: '根节点',
id: '0',
expanded: true
},
folderSort: true,
sorters: [{
property: 'text',
direction: 'ASC'
}]
});
var tree = Ext.create('Ext.tree.Panel', {
store: store,
rootVisible:false,
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop'
}
},
renderTo: 'tree-div',
height: 300,
width: 250,
title: 'Files',
useArrows: true,
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Expand All',
handler: function(){
tree.expandAll();
}
}, {
text: 'Collapse All',
handler: function(){
tree.collapseAll();
}
}]
}]
});
});
java代码如下:
package com.dahuatech.work.action;
@Namespace("/")
@Scope("prototype")
@Controller(value = "organization")
public class OrganizationAction extends BaseAction {
private String node;
@Action(value = "getDirectSubordinates")
public String getDirectSubordinates() throws Exception {
JSONArray json = new JSONArray();
if (node.equals("0")) {
JSONObject object = new JSONObject();
object.put("id", "1");
object.put("text", "广东");
object.put("cls", "folder");
json.add(object);
}
if (node.equals("1")) {
JSONObject ob1 = new JSONObject();
ob1.put("id", "2");
ob1.put("text", "11RPU");
ob1.put("cls", "folder");
json.add(ob1);
}
if (node.equals("2")) {
JSONObject ob1 = new JSONObject();
ob1.put("id", "3");
ob1.put("text", "11Chanel");
ob1.put("leaf", true);
ob1.put("cls", "file");
JSONObject ob2 = new JSONObject();
ob2.put("id", "4");
ob2.put("text", "22Chanel");
ob2.put("leaf", true);
ob2.put("cls", "file");
json.add(ob1);
json.add(ob2);
}
ActionContext ctx = ActionContext.getContext();
HttpServletResponse response = (HttpServletResponse) ctx
.get(ServletActionContext.HTTP_RESPONSE);
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
out.print(json.toString());
return null;
}
public String getNode() {
return node;
}
public void setNode(String node) {
this.node = node;
}
}
作用:生成异步请求时的json数据。
当展开节点时,前台会把json数据中节点的id通过node参数传送到后台。
分享到:
相关推荐
extjs异步树,多选树,json数据机构,集成spring,struts例子,extjs异步树,多选树,json数据机构,集成spring,struts例子,extjs异步树,多选树,json数据机构,集成spring,struts例子,extjs异步树,多选树,json...
extJs 2,异步树,ext2源程序,tree; 一个完整的extJs 2Tree 例子.
说明:本例主要实现在树节点数据过多的情况下对数据进行异步请求,并且在请求数据返回前台的同时实现级联选择。使用ExtJs版本为4.1.1a,在struts2下测试通过。例子仅供提供思路,简单易懂,不负责代码优化,哈哈!
ExtJS4下拉树组件 ExtJS4下拉树组件
在家研究了一下extjs异步树,-每个节点都异步加载-前后台代码都有-附整个工程-运行通过-前台代码请看doctree.js,后台代码请看TreeService.java,运行环境:Myeclipse6.5+tomcat7.0.27
NULL 博文链接:https://lpcjrflsa.iteye.com/blog/1704537
extjs4,当点击左边的树,右边会生成相应的面板,代码精简,欢迎大家来学习,有问题可以直接交流。
Extjs4下拉树菜单 ComboBoxTree 支持单选和多选并且支持展开选中指定节点的通用控件 在项目中已经成熟运用 值得收藏和运用
Extjs4动态树实现,感觉写的比较好就分享给大家
extjs tree 异步加载树型完整的一个web工程,自已已经试过,可用。
ExtJs4.2没有直接提供下拉树这个组件,但是有例子可以用,文件位置:ext-4.2.1.883\examples\ux\TreePicker.js 但是它有点小毛病吧:默认显示了根节点;达到最小高度时再展开节点,高度不能自动调整。 所以我做了一...
extjs实现动态树
AJAX: 以JSON数据格式,使用ExtJS构造动态异步加载的树。
EXTJS实例 EXTJS树,可以编辑的EXTJS,EXTJS3.0
extjs实现动态树加载菜单
详细描述用Extjs4生成树,以及树的动态加载等功能
ExtJs3下拉树 分两种方式调用:第一种: xtype : 'combotree', name : 'dm', fieldLabel : 'dm', tree : this.ct this.ct = new Ext.tree.TreePanel({ autoScroll : true, height : 250, border : false, ...
Extjs 下拉树 下拉多选树 支持多选 全选/全不选 下拉多选框
extjs表格、树控件
简单的修改下Extjs 的引用路径 双击Index.html 就可以看到效果了。