Ext json servlet 构建的动态树

dynamic.js
-------------------------------------------------
Ext.onReady(function(){
 var root=new Ext.tree.AsyncTreeNode({
  id:'0',//id为0
  text:'根节点',//显示文字为0
  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({//声明一个TreePanel显示tree
  id:'tree',//id为tree
  region:'west',//设定显示区域为东边,停靠在容器左边
  split:true,//出现拖动条
  collapseMode:'mini',//拖动条显示类型为mini,可出现拖动条中间的尖头
  width: 210,//初始宽度
  minSize: 210,//拖动最小宽度
  maxSize: 300,//拖动最大宽度
  collapsible: true,//允许隐藏
  title: "树",//显示标题为树
  loader: treeLoader,//指定数据载入的loader对象,现在定义为空
  lines:true,//出现节点间虚线
  autoScroll:true,//自动出现滚动条
  root:root//根节点为 root 对象
 });
 
 tree.render('west'); // 渲染到层
 
 root.on('expand',gettree);//当根节点展开后触发gettree事件
 
 function gettree(node){
  if(node.firstChild.text=='loading'){
   var par = node.id;
   Ext.Ajax.request({
    url: '../../TreeHandler',
    params: {id: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].name,//显示内容为服务器返回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 function1(v){
       var myData = JSON.parse(v.responseText); // 用JSON库将其反序列化成对象数组
        for(var i=0;i<myData.length;i ){
         var cnode=new Ext.tree.AsyncTreeNode({
          id:myData[i].id,//id 为服务器返回id 父节点id
    text:myData[i].name,//显示内容为服务器返回id 父节点id
    leaf:myData[i].leaf,//是否为叶子节点,根据服务器返回内容决定是否为叶子节点
    children:[{//添加子节点,如果服务器返回tl[i].leaf为ture则孩子节点将无法显示
     text:'loading',
     iconCls: 'loading',
     leaf:true
    }]
         });
         cnode.on('expand',gettree);//定义当前节点展开时调用gettree方法,再次异步读取子节点
   parent.appendChild(cnode);//将当前节点添加为待展开节点子节点
        }
        parent.firstChild.remove();//删除当前节点第一个孩子节点(loading节点)
 }
 
 function function2(){
  alert("failure");
 }
});
----------------------------------------------------------
TreeHandleServlet.java
----------------------------------------------------------
servlet中 doGet的方法
public void doGet(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
 String id = request.getParameter("id");
  
 ArrayList al = new ArrayList();
 int treeId = Integer.parseInt(id);
 if(treeId < 5){
  treeId = 5;
 }
 for (int i=0;i<treeId;i ){
  TreeNode tn = new TreeNode();
  tn.setId(10 i "");
  tn.setName("tree" i);
  tn.setLeaf(false);
  al.add(tn);
 }
 JSONArray jsTree = JSONArray.fromObject(al); // 构造JSON字符串
 response.setCharacterEncoding("utf-8");
 PrintWriter out = response.getWriter();
 out.print(jsTree); // 将 json 串写入输出流中
 out.close();
}
--------------------------------------------------------------

服务器端用到了 JSON java版的库:json-lib-2.2-jdk15.jar
该库依赖的包:ezmorph-1.0.4.jar  commons-beanutils-1.6.jar  commons-lang.jar 
commons-collections-3.2.jar  commons-httpclient.jar  commons-logging.jar

客户端用到了 json2.js 库
顺便说一下json中的示例中有这么一段:
myData = JSON.parse(text, function (key, value) {
 return key.indexOf('date') >= 0 ? new Date(value) : value;
});

JSON.parse(text, filter) ,filter是可选的,表示要过滤掉的数据

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值