TreePanel的使用

来源：互联网发布：智能投顾软件编辑：程序博客网时间：2024/06/11 17:07

一、加载一个异步Tree:

客户端代码

<%@ page import="com.neusoft.unieap.config.EAPConfigHelper" %>

String WebRoot = EAPConfigHelper.getContextPath(request);

<html>

<head>

<%@ page language="java" contentType="text/html; charset=GBK"

pageEncoding="GBK"%>

<title>项目地块信息</title>

Ext.onReady(function(){

// shorthand

var Tree = Ext.tree;

var tree = new Tree.TreePanel({

el:'tree-div',

autoScroll:true,

animate:true,

enableDD:true,

containerScroll: true,

loader: new Tree.TreeLoader({

dataUrl:'/mydomain/prejudication/getProjectCantonTree.do?receiveid=<%=request.getParameter("receiveid")%>'

})

});

// set the root node

var root = new Tree.AsyncTreeNode({

text: '项目地块信息',

draggable:false,

id:'root'

});

tree.setRootNode(root);

// render the tree

tree.render();

root.expand();

tree.on('click', function(node){

/*if(!node.isLeaf()){

node.toggle();

} */

alert(node.id);

});

</script>

</head>

<body>

<tr>

</tr>

</table>

</body>

</html>

服务端代码(struts)public ActionForward execute(ActionMapping actionMapping, ActionForm actionForm, HttpServletRequest request, HttpServletResponse response) throws Exception ...{
        String receiveid = request.getParameter("receiveid");
        JSONArray jsonArray = new JSONArray();
        try...{
            DrmDBPersistenceManager dbPM = Global.getTDLYPM();
            String sql = "select XMNJDDXQ from YDYS_XMJBXXB t where t.OBJECTID='" + receiveid + "'";
            DataSet ds = (DataSet)dbPM.executeQuery(sql);
            if(ds.next())...{
                String townCode =  ds.getString(1);
                if(!Global.isNullOrBlank(townCode))...{
                    String[] codes = townCode.split(",");
                    townCode = "'" + codes[0] + "'";
                    for(int index=1;index<codes.length;index++)...{
                        townCode = townCode + ",'" + codes[index] + "'";
                    }
                    sql = "select v.OBJECTID,v.ITEM_NAME_CN from V_GG_XMSQ v where v.OBJECTID in (" + townCode + ")";
                    ds = (DataSet)dbPM.executeQuery(sql);
                    JSONObject jsonObject = null;
                    while(ds.next())...{
                        String code =  ds.getString(1);
                        String addr =  ds.getString(2);
                        jsonObject = new JSONObject();
                        jsonObject.put("id", "canton" + code);
                        jsonObject.put("text", addr);
                        jsonObject.put("leaf", true);
                        jsonObject.put("cls", "file");
                        jsonObject.put("href", "CantonMaterial.jsp?cantonid="+code);
                        jsonObject.put("hrefTarget", "material");
                        jsonArray.add(jsonObject);
                    }
                }
            }
            
            response.setContentType("text/html; charset=UTF-8");
            PrintWriter out = response.getWriter();
            out.append(jsonArray.toString());
            out.flush();
            out.close();
            return null;
        }
        catch(Exception e)...{
            AppException appe = new AppException(e);
            // 异常编码 int 类型
            appe.setErrCode(1001000001);
            // 上下文信息
            appe.setContextMsg(ElarpEcsConfig.getInstance().getContext(this));
            e.printStackTrace();
            return null;
        }
    }

解释：
“text”-->显示的文本
"id"-->id值 
“leaf”-->Boolean值，如果“叶子”是真的话，则不能包含子节点Children nodes 
"cls"-->选用的样式，通常在这里选定图标
”href“-->指定的url，还有一个”hrefTarget“的属性
另外，除了以上的属性，您还可以在JSON加入任何的属性，作为节点的属性，见Jack原话：
The href attribute is called "href", there's also an "hrefTarget" attribute. For capturing node clicks, you can listen on individual nodes or you can listen for "click" on the tree which will pass you the node that was clicked. FYI, you can put any attributes you want in the json config for the node and it will be available as node.attributes. FAQ.4会继续解释这个问题。
FQA常见问题：
1.Tree支持XML数据交换吗？
A:暂不支持，据FOURM上的话，以后会提供支持，见：
can I use xml instead of json for sending nodes hirerachy ？
Correct me if I'm wrong but I think the answer is no here. But that doesn't mean it won't be supported later on. 
2.我想用单击代替双击展开子节点，可以吗？
A:可以，见： 
tree.on('click', function(node){      if(!node.isLeaf()){          node.toggle();      } });
3.事件处理的几种情形：
A: a.当加入某个节点时，为其增加事件 
 tree.on('append', function(tree, node){       if(node.id == 'foo'){           // 这里加入你的事件（如click）侦听器（addListener()）      } });
b.针对某个节点的单击事件 
 tree.on('click', function(node){       if(node.id == 'foo'){           // do something       } });
c.针对某个区域（集合）的事件 
 // fires any time the selection in the tree changes tree.getSelectionModel().on('selectionchange', function(sm, node){       if(node && node.id == 'foo'){           // do something       } });
4.如何获取JSON中的自定义字段（或称作参数 parameters）
A:JSON对象已经被构建函数 construction传递到TreeNode中，作为node.attributes 出现，所以调用属性node.attributes 便可获取。详见：http://www.yui-ext.com/forum/viewtopic.php?t=2253 
tree.on('click', function(node){      if(!node.isLeaf()){          node.toggle();      } });
5、其它事件
tree.on('beforeload', function(node){ });
tree.on('beforeexpand', function(node){
                           node.ui.textNode.style.title = ‘red’;
alert(node.attributes.description);}
);