项目中用到了书目录管理,需要做成树状结构的管理。下面将部分有用代码写出来,希望能给需要用到的人一些小小的帮助。项目中应用struts2+spring+ext。下面简要介绍几个步骤:
1、前台extjs的展现代码:
xinli.ui.SmsCatalogTreePanel = Ext.extend(Ext.tree.TreePanel, {
catalogId : null, // 选择短信目录的id
catalogLevel : null,// 选择短信目录的级别
catalogName : null, // 选择短信目录的名称
regionCode : null, // 当前用户所在的区域id
clearSelParams : function() {
this.catalogId = null;
this.catalogLevel = null;
this.catalogName = null;
this.regionCode = null;
},
initComponent : function() {
Ext.apply(this, {
title : '短信目录管理',
region : 'west',
width : 250,
minSize : 200,
maxSize : 250,
border : true,
frame : false,
rootVisible : true,
autoScroll : true,
autoHeight : false,// 自动高
containerScroll : true,
root : new Ext.tree.AsyncTreeNode({
id : "1",
text : "短信目录",
qtip : '短信目录',
expanded : true
}),
loader : new TonyTreeLoader({
url : "createSmsCatalogTree.action",
listeners : {
"beforeload" : function(treeLoader, node) {
treeLoader.baseParams.id = (node.id != "1"
? node.id
: "");
}
}
})
});
xinli.ui.SmsCatalogTreePanel.superclass.initComponent.call(this);
/*
* var treeEditor = new Ext.tree.TreeEditor(this, { allowBlank : false
* }); treeEditor.on("beforestartedit", function(treeEditor) { return
* treeEditor.editNode.isLeaf(); }); treeEditor.on("complete",
* function(treeEditor) { alert(treeEditor.editNode.text); });
*/
this.addListener('click', function(node) {
var catalogId = node.id;
var store = this.ownerCt.items.itemAt(1).getStore();
store.baseParams.catalogId = catalogId;
store.load(); //此处的store为该目录所对应的详细模板列表数据
}, this);
}
});
2、后台逻辑实现:
public String createSmsCatalogTree() {
SysUser user = (SysUser) getSession().getAttribute("user");
String catId = (String) getRequest().getParameter("id");
if (catId == null || catId.equals("")) {
catId = "1";
}
treeList = getValidTreeNode(catId, user
.getRegionCode());
if (treeList == null) {
treeList = new ArrayList<Map<String, Object>>();
}
return SUCCESS;
}
private List<Map<String, Object>> getValidTreeNode(String catId,
Integer regionCode) {
SmsCatalog smsCatalog = new SmsCatalog();
log.info("catId==" + catId);
smsCatalog.setCatalogId(Long.parseLong(catId));
smsCatalog.setRegionCode(regionCode);
List<Map<String, Object>> retList = new ArrayList<Map<String, Object>>();
try {
List<SmsCatalog> catalogList = smsCatalogService
.querySubSmsCatalogList(smsCatalog);
log.info("catalogList==" + catalogList.size());
for (SmsCatalog sc : catalogList) {
Map<String, Object> tree = new HashMap<String, Object>();
// 节点的id
tree.put("id", sc.getCatalogId());
// 节点显示单位名
tree.put("text", sc.getCatalogName());
// 是否是叶子节点
List<SmsCatalog> temlist = smsCatalogService
.querySubSmsCatalogList(sc);
tree.put("leaf",
temlist.size() == 0 || temlist.isEmpty() ? true
: false);
// 目录等级
tree.put("type", sc.getCatalogLevel());
// 父目录ID
tree.put("parentId", sc.getParentId());
// 将这个生成叶子节点对应的MAP加到单位list里
retList.add(tree);
}
} catch (Exception e) {
e.printStackTrace();
}
return retList;
}
3、sturts.xml 文件中的配置
<action name="createSmsCatalogTree" class="smsCatalogAction" method="createSmsCatalogTree" >
<result type="json">
<param name="root">treeList</param>
</result>
</action>
重要的就是上面三大步骤。对于目录树删除、修改、新增的功能,这里不做详解。在做的过程中碰到如下的问题
action中给
//结点id
tree.put("id", sc.getCatalogId());
// 节点显示单位名
tree.put("text", sc.getCatalogName());
// 是否是叶子节点
tree.put("leaf",true); 三个属性 id text leaf可以通过
var id= thisPanel.selModel.selNode.id 方式获得
但是type 以及 parentid 附加属性需要通过
var catalogLevel = thisPanel.selModel.selNode.attributes.type;
var parentId = thisPanel.selModel.selNode.attributes.parentId; 方式获得
分享到:
相关推荐
在提供的文件`tree`中,可能包含了EXT树实现上述功能的示例代码,可以参考和学习以加深理解。总的来说,EXT树的无限级JSON动态加载涉及数据结构、JSON格式、数据存储以及异步加载等多个方面,理解并熟练运用这些技术...
在EXT中实现动态树的功能是一项常见的需求,特别是对于那些需要展示层次结构数据的应用。动态树允许用户在运行时进行编辑、添加、删除和批量操作节点,从而提供更加灵活的数据管理体验。 首先,我们要理解EXT中的树...
其中,“Ext树”(Ext Tree)是ExtJS中的一个重要组件,用于展示层级结构的数据,如文件系统、组织架构等。本文将深入探讨如何在ExtJS中创建一个树形视图。 首先,理解Ext树的基本结构至关重要。一个Ext树由节点...
### 使用ExtJS实现动态树结构 #### 一、引言 在现代Web应用开发中,树形结构是一种非常常见的UI组件,它可以帮助用户更清晰地组织和浏览分层的数据结构。ExtJS是一款强大的JavaScript框架,提供了丰富的UI组件库,...
综合以上,EXT树控件结合JSON数据传递和显示,以及事件响应的实现,主要涉及以下几个步骤: 1. 服务器端生成JSON数据。 2. 定义`TreeStore`,配置Ajax数据源,读取JSON数据。 3. 创建`TreeNodeModel`描述树节点的...
利用Ext实现静态树(一次加载所有节点的树) 在今天的IT行业中,树形结构是一种非常常见的数据结构,尤其是在Web应用程序中。在这种情况下,我们通常会遇到一个问题,即如何将树形结构的数据加载到前台,以便用户...
在EXT树表中,分页(Pagination)是一项关键功能,用于处理大量数据,提高用户界面的响应速度。当数据量过大时,一次性加载所有数据会导致页面响应变慢,甚至可能使浏览器崩溃。分页允许用户逐步加载和查看数据,...
5. **JS文件直接调用**:描述中的“js文件可以直接调用”意味着提供的代码资源可能包含了一套完整的EXT树选择和撤销实现,可以直接引入到项目中使用,无需从头编写这部分逻辑。 在实际应用中,开发人员需要根据具体...
创建一个基本的EXT树形菜单,首先需要定义一个配置对象,包含`title`(菜单标题)、`store`(存储树形数据的Store)和`rootVisible`(是否显示根节点)等属性。例如: ```javascript var treePanel = Ext.create...
3. `MzTreeView1.2.js`:这可能是名为MzTreeView的JavaScript库的1.2版本,虽然不是Ext JS,但可能被用作辅助实现下拉树功能的脚本,或者是一个自定义的树形视图组件。 4. `TSelect.js`:这个文件名暗示可能是一个...
实现Ext JS下拉树的关键在于正确配置`Ext.form.field.Tree`组件。以下是一些核心配置项的详细解释: 1. **store**:下拉树的数据源,通常是一个`Ext.data.TreeStore`实例,它管理着树结构中的节点数据。你需要定义...
【Ext树】是一种基于Ext JS库的图形用户界面组件,用于呈现层次结构的数据。Ext JS是一个强大的JavaScript框架,主要用于构建富客户端应用。在本案例中,“简单的ext树”是一个为初学者设计的基础教程,旨在帮助那些...
Ext下拉列表树是一种在ExtJS框架中实现的组件,它结合了下拉列表和树形结构的功能,为用户提供了一种交互式的、层次化的选择项。这种组件在数据管理、菜单选择、分类筛选等场景中非常常见,尤其适用于需要展现多级...
综上所述,这个自定义的Ext树形菜单组件结合了前端的JavaScript技术(主要为ExtJS)和后端的Java服务(可能用JSP或Spring MVC实现),实现了从服务器动态获取和显示层次数据的功能。开发者可能通过调整配置、扩展...
"WebTree1"可能是包含此拖拽树实现的源代码文件夹,可能包括HTML、CSS、JavaScript以及可能的图片资源。你需要解压并查看这些文件,以理解实现细节和测试用例。 6. **最佳实践** - 性能优化:在大型树结构中,...
Ext2.0不仅仅实现了复选框的树形菜单,而且使得在选中某个节点时,如果有子节点,那么就能够将所有的字节点全部选中,当然你也可以直接选择你希望的节点。但是,当你第一次选中某个有子节点但是子节点并没有展开的...
"EXT级联选择的树形控件"是一个实现树形结构并支持级联选择的EXT组件。在实际应用中,它可以帮助用户通过树节点的选择来联动控制其他相关选项的状态。这个控件可能包含以下关键特性: 1. **树形结构**:每个节点...
综上所述,“ext树实例代码”不仅展示了如何在Ext JS中实现树控件的基本功能,还涉及了数据处理、交互设计、国际化支持等多个方面,是理解和掌握Ext JS树控件应用的宝贵资源。通过深入研究此类代码示例,开发者可以...
首先,让我们了解EXT树形菜单的基本概念。EXT的TreePanel组件是实现树形结构的主要工具,它能够展示层次化的数据,通常用于导航或展现层级关系。树形菜单支持节点的展开、折叠、添加和删除,以及各种交互操作。 要...
这篇博客文章可能是介绍如何在EXT中实现一个下拉树的功能,并提供了一个名为`TreePicker.js`的代码示例。 EXT框架由Sencha公司开发,它主要服务于富客户端应用,提供了一整套UI组件和数据绑定机制,使得开发者可以...