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

最新推荐文章于 2015-02-04 14:40:30 发布

justcoding_

最新推荐文章于 2015-02-04 14:40:30 发布

阅读量2.3k

点赞数 1

分类专栏： ExtJS Struts 文章标签： struts extjs string json list action

本文链接：https://blog.youkuaiyun.com/gaojiayuan/article/details/7944719

版权

ExtJS 同时被 2 个专栏收录

8 篇文章

订阅专栏

Struts

1 篇文章

订阅专栏

本文介绍如何在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，这样就避免了很多的麻烦