【转】extjs学习笔记三[Ext+json+jsp构建的动态树]

转载 2011年03月07日 17:48:00

树节点组合模型
package cn.com.jsnh.model.catalog;

public class TreeModel {
private String node;
private CatalogModel model;

public String getNode() {
return node;
}

public void setNode(String node) {
this.node = node;
}

public CatalogModel getModel() {
return model;
}

public void setModel(CatalogModel model) {
this.model = model;
}

}

栏目模型【实际的树节点】
package cn.com.jsnh.model.catalog;

public class CatalogModel {
private String id;
private String text;
private Boolean leaf;
private String cls;
private String action;
private String model;

public String getId() {
return id;
}

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

public String getText() {
return text;
}

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

public Boolean getLeaf() {
return leaf;
}

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

public String getCls() {
return cls;
}

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

public String getAction() {
return action;
}

public void setAction(String action) {
this.action = action;
}

public String getModel() {
return model;
}

public void setModel(String model) {
this.model = model;
}

}

<%@ page import="java.util.*,
cn.com.jsnh.model.catalog.TreeModel,
cn.com.jsnh.model.catalog.CatalogModel,
net.sf.json.JSONObject,
net.sf.json.JSONArray,
net.sf.ezmorph.bean.MorphDynaBean
"
contentType=
"text/html;charset=utf-8"%>
<%
try{
String node = request.getParameter(
"node");
System.out.println(
"node="+node);

List<TreeModel> tree = new ArrayList<TreeModel>();
TreeModel treeModel = new TreeModel();

CatalogModel catalogModel = new CatalogModel();
catalogModel.setId(
"100000");
catalogModel.setText(
"个人管理专区");
catalogModel.setLeaf(Boolean.FALSE);
catalogModel.setCls(
"folder");
catalogModel.setAction(
"100000");
catalogModel.setModel(
"100000");
treeModel.setNode(
"root");
treeModel.setModel(catalogModel);
tree.add(treeModel);

treeModel = new TreeModel();
catalogModel = new CatalogModel();
catalogModel.setId(
"100001");
catalogModel.setText(
"修改我的资");
catalogModel.setLeaf(Boolean.TRUE);
catalogModel.setCls(
"file");
catalogModel.setAction(
"x.action");
catalogModel.setModel(
"user");
treeModel.setNode(
"100000");
treeModel.setModel(catalogModel);
tree.add(treeModel);

treeModel = new TreeModel();
catalogModel = new CatalogModel();
catalogModel.setId(
"100002");
catalogModel.setText(
"个人消息");
catalogModel.setLeaf(Boolean.TRUE);
catalogModel.setCls(
"file");
catalogModel.setAction(
"x.action");
catalogModel.setModel(
"message");
treeModel.setNode(
"100000");
treeModel.setModel(catalogModel);
tree.add(treeModel);

List<CatalogModel> catalogList = new ArrayList<CatalogModel>();
for(TreeModel o:tree){
if(o.getNode().equals(node)){
catalogList.add(o.getModel());
}
}

JSONArray json = JSONArray.fromObject(catalogList);

response.getWriter().write(json.toString());

} catch(Exception ex) {
}
%>

<html xmlns=
"http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv=
"Content-Type" content="text/html; charset=UTF-8"/>
    <title>后台框架演示</title>
    <link rel=
"stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css"/>
    <link rel=
"stylesheet" type="text/css" href="css/common.css"/>
    <script type=
"text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
    <script type=
"text/javascript" src="../extjs/ext-all.js"></script>

    <script type=
"text/javascript" src="../extjs/ext-lang-zh_CN.js"></script>
    <script type=
"text/javascript" src="script/common.js"></script>
    <script type=
"text/javascript" src="script/json/json.js"></script>
    <script type=
"text/javascript" src="script/json/json2.js"></script>

</head>

<body>
<script type=
"text/javascript">
var Tree = Ext.tree;
var root = new Tree.AsyncTreeNode({
text: 'Ext JS',
draggable:false,
id:'root',
children:[{
//子节点
    text:'loading',
//显示文字为loading
    iconCls: 'loading',
//使用图标为loading 在index.html style 中定义
    leaf:true
//是叶子节点,不再包含子节点
  }]

});

var treeLoader=new Ext.tree.TreeLoader();
//指定一个空的TreeLoader

var tree = new Ext.tree.TreePanel({
contentEl:'west',
border:true,
root:root,
region:'west',
id:'west-panel',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
margins:'0 0 0 0',
layout:'accordion',
title:'功能菜单',
collapsible :true,
layoutConfig:{
animate:true
},
rootVisible:true,
autoScroll:true,
loader:treeLoader
});
tree.on('click',treeClick);
//tree.expandAll();
var tab = new Ext.TabPanel({
region:'center',
deferredRender:false,
activeTab:0,
items:[{
contentEl:'center2',
title: '首页',
autoScroll:true
}]
});
function treeClick(node,e) {
if(node.isLeaf()){
e.stopEvent();
var n = tab.getComponent(node.id);
if (!n) {
var n = tab.add({
'id' : node.id,
'title' : node.text,
closable:true,
html : '<iframe scrolling=
"auto" frameborder="0" width="100%" height="100%" src="index.php?model='+node.attributes.model+'&action='+node.attributes.action+'"></iframe>'
});
}
tab.setActiveTab(n);
}
}
function newTab(id,text,url) {
  var n = tab.getComponent(id);
if (!n) {
var n = tab.add({
'id' : id,
'title' : text,
closable:true,
html : '<iframe scrolling=
"auto" frameborder="0" width="100%" height="100%" src="'+url+'"></iframe>'
});
}
tab.setActiveTab(n);
}

function gettree(node){
  if(node.firstChild.text=='loading'){
   var par = node.id;
  
//alert('par='+par);
   Ext.Ajax.request({
    url: 'jsonTree.jsp',
    params: {node:par},
    method: 'GET',
    success: function(v){  
//成功返回
     var myData = JSON.parse(v.responseText);
// 得到服务器返回的json串,并用json.js解析过对象数组
            for(var i=0;i<myData.length;i++ ){
            var cnode=new Ext.tree.AsyncTreeNode({
       id:myData<i>.id,
//id 为服务器返回id 父节点id
       text:myData<i>.text,
//显示内容为服务器返回id 父节点id
       leaf:myData<i>.leaf,
//是否为叶子节点,根据服务器返回内容决定是否为叶子节点
       children:[{
//添加子节点,如果服务器返回tl<i>.leaf为ture则孩子节点将无法显示
        text:'loading',
        iconCls: 'loading',
        leaf:true
       }]
            });
            cnode.on('expand',gettree);
//定义当前节点展开时调用gettree方法,再次异步读取子节点
       node.appendChild(cnode);
//将当前节点添加为待展开节点子节点
           }
           node.firstChild.remove();
//删除当前节点第一个孩子节点(loading节点)
    },
    failure: function2  
// 失败
   });
  }
}

function function2(){
  alert(
"failure");
}


Ext.onReady(function(){
   var viewport = new Ext.Viewport({
layout:'border',
items:[
new Ext.BoxComponent({
region:'north',
el: 'north',
height:35
}),
tree,
tab
]
});

tree.render();
root.on('expand',gettree);
//当根节点展开后触发gettree事件
//root.expand();
loadend();
});

function openWindow(id,title,url,width,height){
var win = Ext.get(id)
if (win) {
win.show();
return;
}
win = new Ext.Window({
id:id,
title:title,
layout:'fit',
width:width,
height:height,
closeAction:'close',
collapsible:true,
plain: true,
html : '<iframe frameborder=
"0" width="100%" height="100%" src="'+url+'"></iframe>'
});
win.show();
}
</script>
<div id=
"north">
    <p class=
"api-title">MYOIS 1.0 Office Information System</p>
</div>

<div id=
"west">
</div>
<div id=
"center2">center2</div>
<div id=
"loading-mask" style=""></div>
<div id=
"loading">
    <div class=
"loading-indicator"><img src="images/loading.gif" width="32"
                                        height=
"32" style="margin-right:8px;" align="absmiddle"/>Loading...
    </div>
</div>
</body>

</html>

 

原文地址:http://www.zhuoda.org/lunzi/102821.html

extjs学习笔记三[Ext+json+jsp构建的动态树]

 树节点组合模型package cn.com.jsnh.model.catalog;public class TreeModel { private String node; private Cata...
  • tianzizhi
  • tianzizhi
  • 2009年11月24日 00:15
  • 1109

Ext+json+jsp构建的动态树

树节点组合模型package cn.com.jsnh.model.catalog;public class TreeModel {private String node;private Catalog...
  • t227hou
  • t227hou
  • 2010年05月29日 08:04
  • 692

extjs动态树从无到有

今日上班闲来无事,故将好久之前做的extjs动态树总结一下,供后学之人少走弯路。下面开始模拟客户需求,大家看好。需求:制作全国省、市、县(区)、乡镇、村、队、号等等无限级树型菜单。下面是我的数据库设计...
  • hb308102796
  • hb308102796
  • 2010年09月10日 10:51
  • 4503

extjs4 异步树的写法

转自:http://lbyzx123.iteye.com/blog/1139428
  • zhang_Red
  • zhang_Red
  • 2014年06月19日 15:07
  • 2113

【转】extjs加载json数据动态生成树

使用ExtJS2,以JSON(JavaScript Object Notation)TreeLoader 异步读取数据,构造一棵异步加载的树。 1. 下载ExtJS2,地址:http://www.ex...
  • zhldt2008
  • zhldt2008
  • 2011年03月07日 17:34
  • 6767

extjs springMVC实现动态树形菜单

最近由于项目需要,做一个树形动态菜单,用extjs3 来做,结合springMVC,实现从后台动态的加载数据形成权限菜单。 一、数据表设计 首先是数据库的设计,数据库表是一张权限表(即菜单表),我把它...
  • maojycom
  • maojycom
  • 2014年11月08日 22:28
  • 3570

ExtJS 4 树 – ExtJS4中文教程

Tree Panel是ExtJS中最多能的组件之一,它非常适合用于展示分层的数据。Tree Panel和Grid Panel继承自相同的基类,所以所有从Grid Panel能获得到的特性、扩展、插件等...
  • x9x9x9x9
  • x9x9x9x9
  • 2013年07月11日 23:53
  • 2199

ExtJs 动态树

Ext.onReady(function() { Ext.BLANK_IMAGE_URL = "/RPM/RPSpages/js/extjs/resources/images/default/s....
  • sbvfhp
  • sbvfhp
  • 2011年12月21日 11:02
  • 1075

EXTJS动态树的实现

EXTJS动态树的实现举例 描述:通过dwr实现JS与后台的交互,从而实现动态树中叶子节点和目录节点的增加和编辑、以及节点的拖曳,节点的增删和拖曳都会改变自身以及它所在的目录节点下的相关节点的序号,能...
  • yefei679
  • yefei679
  • 2008年11月24日 22:55
  • 4049

Extjs动态树形菜单

Extjs动态树形菜单树形菜单在各种管理系统使用非常广泛,同时市面上也有很多框架提供了动态树形菜单的生成,正好最近有项目用到Extjs所以下面介绍基于Extjs的动态树形菜单。 程序环境:extj...
  • tyyytcj
  • tyyytcj
  • 2017年08月09日 11:01
  • 454
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:【转】extjs学习笔记三[Ext+json+jsp构建的动态树]
举报原因:
原因补充:

(最多只允许输入30个字)