Ext树状结构展示示例代码

以下为项目应用中的一些示例代码，供以后应用参考。

?

一.普通树状结构展示

?

1.前台JS代码

ccs.consultation.deptTreePanel = Ext.extend(Ext.Panel, {title:'组织结构',layout : 'fit',id:'deptTreePanel',height : 312,   border:false,initComponent : function() {// 组织树  var loader = new Ext.tree.DWRTreeLoader({            dataUrl: biDeptService.getDeptByUpDeptCode     });     loader.on('beforeload',function(treeLoader,node){        treeLoader.baseParams.id = node.attributes.id;     },this);      var root =new  Ext.tree.AsyncTreeNode({    id:sessionObj.firstDeptCode,    text:sessionObj.firstDeptName,    href:'',hrefTarget:'_blank' });var tree = new Ext.tree.TreePanel({        autoScroll: true,        border:false,        animate: false,        enableDD: false,        containerScroll: true,        root:root,    loader:loader,    id:'deptTreePanelTree'});tree.addListener('click',function(node,e){    var deptCode = node.attributes.id;    //查询人员        var params = {};    params.deptCode = deptCode;    var store = Ext.getCmp('csPersonViewGrid').getStore();    store.baseParams = {};//清空参数    Ext.apply(store.baseParams,params);         store.load();});this.items = [tree];this.tbar = [{text : '展开',handler : function() {tree.expandAll();}}, {text : '合拢',handler : function() {tree.collapseAll();}}];ccs.consultation.deptTreePanel.superclass.initComponent.call(this);}})

?2.后台Java代码

public List getDeptByUpDeptCode(String id) {String upDeptCode = id;List list = biDeptDao.getDeptByUpDeptCode(upDeptCode);List treeList = new ArrayList();for (int i = 0; i < list.size(); i++) {BiDept biDept = (BiDept)list.get(i);TreeNode node = new TreeNode();node.setId(biDept.getDeptCode());node.setText(biDept.getDeptName());node.setLeaf(false);treeList.add(node);}return treeList;}

?TreeNode是自己定义的java类，含id,text,leaf等相关属性。

?

二.带选择框的树形结构展示

?

1.带选择框树结构展示代码

Ext.onReady(function(){    var Tree = Ext.tree;        var tree = new Tree.TreePanel({        el:'tree-div',        useArrows:true,        autoScroll:true,        animate:true,        enableDD:true,        containerScroll: true,         loader: new Tree.TreeLoader({            dataUrl:'0005_checkbox_reorder_tree.php'        })    });// 选中父节点的checkbox后，自动选中子节点tree.on('checkchange', function(node, checked) {   node.expand();   node.attributes.checked = checked;   node.eachChild(function(child) {   child.ui.toggleCheck(checked);   child.attributes.checked = checked;   child.fireEvent('checkchange', child, checked);   });   }, tree);      // set the root node    var root = new Tree.AsyncTreeNode({        text: 'Ext JS',        draggable:false,        id:'source'    });    tree.setRootNode(root);    // render the tree    tree.render();    root.expand();});

?2.显示选中的岗位

buttons : [{text : '显示选中的岗位',handler : function() {var msg = '', selNodes = tree.getChecked();Ext.each(selNodes, function(node) {if (msg.length > 0) {msg += ', ';}msg += node.text;});Ext.Msg.show({title : '选中岗位：',msg : msg.length > 0 ? msg : '无',icon : Ext.Msg.INFO,minWidth : 200,buttons : Ext.Msg.OK});}}]});

?

要在树上展现checkbox,只需要在返回来的json数据中加上 checked 项（为true/false）。

返回的json数据如下：

[{"cls":"folder","id":10,"leaf":false,checked:false,"children":[{"cls":"file","id":11,"leaf":true,checked:false,"children":null,"text":"S600"},            {"cls":"file","id":12,"leaf":true,checked:false,"children":null,"text":"SLK200"}], "text":"Benz"}]

?