我想用EXT做个树

[dage619]

没用过EXT，最近刚学，只懂一点皮毛，想用它做个动态树，网上的例子都看不懂，谁帮我实现个比较简单的。

[gyj20061111]

去官网下个ext的包，里面有例子，把数据换成动态的不完了吗？

[牛叔]

确实
ext很多都是做好的例子
改下就是了
楼主去看看

[colin_pxx]

column tree:
var tree = new Ext.ux.tree.ColumnTree({
width: 550,
height: 300,
rootVisible:false,
autoScroll:true,
title: 'Example Tasks',
renderTo: Ext.getBody(),

columns:[{
header:'Task',
width:330,
dataIndex:'task'
},{
header:'Duration',
width:100,
dataIndex:'duration'
},{
header:'Assigned To',
width:100,
dataIndex:'user'
}],

loader: new Ext.tree.TreeLoader({
dataUrl:'column-data.json',
uiProviders:{
'col': Ext.ux.tree.ColumnNodeUI
}
}),

root: new Ext.tree.AsyncTreeNode({
text:'Tasks'
})
});
});

[owen_008]

给楼主顶一个

[dage619]

这是一个很简单，但思路很清晰的树

public String execute(){
		HttpServletResponse response = ServletActionContext.getResponse();		
		List roleIds = userRoleBiz.findByUserId(Long.parseLong(uid));
		
		List list = roleBiz.findAll();
		List newList = new ArrayList();
		for(int i=0;i<list.size();i++){
			Map map = new HashMap();
			TRole role = (TRole)list.get(i);
			map.put("id",role.getId());
			map.put("leaf",true);
			map.put("text",role.getRolename());
			if(roleIds.contains(role.getId())){
				map.put("checked",true);
			}else{
				map.put("checked",false);
			}			
			newList.add(map);
		}
		response.setContentType("text/json;charset=utf-8");
		JSONArray ja = JSONArray.fromObject(newList);
		try {
			response.getWriter().print(ja);
		} catch (IOException e) {
			e.printStackTrace();
		}
		return null;
	}

[dinghun8leech]

建议楼主先学习ext的example文件夹里的例子，把树的最小代码从例子里抠出来，看懂大部分步骤，再改变其树节点的创建方式为异步请求解析和单击事件监听器的挂载。
遇到此类问题时求现成代码往往不是个好方法，当我们贴上大段的代码时楼主还是看不懂。
解决此类问题一是需要将问题细分，逐个击破，二是根据细分的步骤逐步学习解决问题必须的知识，三是心里要有个解决问题的思路，四是要有有效的学习方法。

[zl3450341]

[Quote=引用 6 楼 dinghun8leech 的回复:]
建议楼主先学习ext的example文件夹里的例子，把树的最小代码从例子里抠出来，看懂大部分步骤，再改变其树节点的创建方式为异步请求解析和单击事件监听器的挂载。
遇到此类问题时求现成代码往往不是个好方法，当我们贴上大段的代码时楼主还是看不懂。
解决此类问题一是需要将问题细分，逐个击破，二是根据细分的步骤逐步学习解决问题必须的知识，三是心里要有个解决问题的思路，四是要有有效的学习方法。
[/Quote]
up

[TzSword]

我有教材哦。。。。
要的说一下哦。。。
写树的话。。
你可以研究一下成熟的树
Dtree或Xtree等。。。你就可以写咯。。。。。

[Trinx]

看看这个是我在网上找的，写的很全面，连各种操作都有，我以前就参考过。
var treeRoot = new Ext.tree.AsyncTreeNode({
id:'root',
treeid : '1',
text : "根节点名称",
expanded : true,
expandable : true,
draggable : false
});
var treeLoader = new Ext.tree.TreeLoader({
url : '',
baseParams : {
parentId : '0'
},
listeners : {
beforeload : function(tree, node) {
var treeid = node.attributes.treeid;
if (treeid == '1') {
tree.url = '';
tree.baseParams.parentId = treeid;
} else {
tree.url = '';
tree.baseParams.parentId = treeid;
}
}
}
});
var treeMenu;
var treePanel = tree = new Ext.tree.TreePanel({
root : treeRoot,
loader : treeLoader,
width : 220,
height : 340,
autoScroll :true,
contextMenu : treeMenu,
listeners : {
click : function(node, e) {
if (node.isLeaf()) {
//当前节点是叶子节点时触发
}
},
//定义右键菜单
contextmenu : function(node, e) {
//当节点为根节点时
if (node.parentNode == null) {
node.select();//当前节点被选中
treeMenu = new Ext.menu.Menu({
items : [{
text : "添加二级菜单项",
iconCls : 'leaf',
handler : function() {
Ext.MessageBox.prompt('请输入二级菜单名称', "", function(e,
text) {
if (e == "ok") {
Ext.Ajax.request({
//添加二级菜单的URL
url : '',
params : {
czdw : text,
dwlb : node.attributes.treeid,
gdjdm: wp.gdjdm
},
method : 'post',
sync : true,
success : function(res) {
//请求返回成功后在前天添加相应节点
var jsonObj = eval("(" + res.responseText + ")");
var tempNode = new Ext.tree.TreeNode({
treeid : jsonObj.treeid,
text :jsonObj.text,
expandable : true,
draggable : false,
dw:true//节点自定义属性，可根据需要添加，主要为判断加载菜单项
});
//注册右键菜单
tempNode.on('contextmenu',function(node,e){
node.select();
treeMenu.showAt(e.getPoint());
});
node.appendChild(tempNode);
try{
tempNode.select();//定位到新节点
}catch(e){}
},
failure : function() {
Ext.Msg.alert('提示消息','操作失败！');
}
});
}
})
}
}

[wangchangbing]

你先找个“死树”的代码，运行一下看看。
其实就是看看ext的树涉及到那些object，以及他们的用法。

然后找个“活树”，但是json还是一个写死的文件。读取json到页面展示，学习下“活树”的用法。

最后，自己写代码生成json就可以了。