Ext+json+jsp构建的动态树

huibin

浏览: 757199 次
性别:
来自: 郑州

最近访客更多访客>>

y6cn

allen900625

dameimm

cntip2010

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

EXT JSP json JavaScript CSS

树节点组合模型
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>