ExtJS+Struts 实现树的动态加载小例子

本文介绍如何在ExtJS中使用树组件,并通过Struts框架与后端交互实现数据加载。具体步骤包括前端页面设计、Action层处理及BO层实现。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

    对于Ext中的tree组件相信大家一定不会陌生,也是Ext最为大家所公认并且最得意的组件之一,步入正题:

一·首先,我们需要在前端的页面建立一个树。注意了,关键在于我们定义的loader属性。这里面需要写上我们在struts的配置文件上面配置的action路径。OK!前端的设计就是这样了。

var leftTree = new Ext.tree.TreePanel({
   id : 'leftTree',
   collapsible : true,
   width : 200,
   Height : 500,
   autoScroll : true,
   split : true,
   renderTo : 'tree_panel',
   loader : new Ext.tree.TreeLoader({
   	dataUrl :  context + '/article/search.ao?method=treeArticle',
	method : 'post'
   })
})


特别需要注意loader属性中Url的路径:

dataUrl :  context + '/article/search.ao?method=treeArticle',


二·对于我们如何来写Action,我需要赘述一下。我么可以看一下API中写的静态树的例子。例子里面的数据全部都写成了JSON格式,当然我们也可以写成别的格式再进行解析。我只着重说一下JSON格式的数据。

String json = articleBo.getJsonTreeDate();
return returnAjax(request, response, json);

三·完成BO层的设计。鉴于我们需要返回Json的格式--Key-value类型的格式,所以我们使用Map集合来存放所筛选出的结果就再合适不过了!我想说Map集合就是JSON,我们将TreeNode需要的属性全部以Key-value的形式存入Map集合中,这样一个Map集合就是一个结点信息。可是有些朋友可能还会有问题:Map集合里面存的只是一个节点的信息,那么我的树怎样才能添加很多的节点呢? 相当好的问题,我们可以建立一个List集合,专门来存放这些Map集合。这里可能需要一些关于泛型的知识,大家有空可以去看看,不过这种方式肯定是没有问题的。

这个是BO层中getJsonTreeDate()的部分代码

		String hql = " from TArticle where TArticle.isAudit = 1";
		 List<TArticle> list = this.dao.query(hql);
		 List<Map<String, String>> maplist = new ArrayList<Map<String, String>>();
		 for (TArticle articleObj : list)
		 {
		 Map<String, String> map = new HashMap<String, String>();
		 map.put("id", articleObj.getId().toString());
		 map.put("text", articleObj.getTitle());
		 map.put("leaf", "true");
		 if (articleObj.getIsAudit().toString() == "1" && articleObj.getIsElite().toString() == "1")
		 {
		 map.put("iconCls", "");
		 } else if (articleObj.getIsAudit().toString() == "0" && articleObj.getIsElite().toString()
		 == "1")
		 {
		 map.put("iconCls", "");
		 } else if (articleObj.getIsAudit().toString() == "1" && articleObj.getIsElite().toString()
		 == "0")
		 {
		 map.put("iconCls", "");
		 } else
		 {
		 map.put("iconCls", "");
		 }
		 maplist.add(map);
		 }

对于Map集合的使用我再说明一下,有时我们定义好的Map集合的泛型,可是我们发现就像上面的一样,最初设计的时候我们的逻辑是将Map的泛型定义成一个实体类,可是最后我们放进去的是一个List集合。不能对List进行强转,这样会报错的。所以我们还是应当将Map的泛型定义成Object,这样就避免了很多的麻烦


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值