Extjs tree的简单小例子

在本文中，我们将深入探讨EXTJS中的树形组件（TreePanel），以及如何创建一个简单的异步加载和拖放功能的示例。EXTJS TreePanel 是一个强大的组件，用于展示层次结构数据，通常用于组织目录、文件系统或组织结构等。在这个例子中，我们将关注以下关键知识点： 1. **EXTJS TreePanel 基础** - TreePanel 是EXTJS中用于展示树形结构的组件，它可以异步加载数据，支持节点的拖放操作。 - `AsyncTreeNode` 是用于异步加载数据的节点类型，当用户展开节点时，会发送请求获取子节点数据。 2. **异步加载（Asynchronous Loading）** - 在这个例子中，我们使用了`TreeLoader`对象来实现异步加载。`TreeLoader`配置了`dataUrl`属性，指向获取树数据的服务器端接口（这里是`getTreeData.jsp`）。 - 当用户点击一个节点时，TreeLoader会向指定URL发送请求，获取该节点的子节点数据。 3. **拖放（Drag and Drop, D&D）** - 示例中的`TreePanel`启用了拖放功能，通过设置`enableDD: true`。 - `on("beforenodedrop"`事件监听器用于在节点被放下之前执行检查，确保拖动操作符合业务逻辑。在这个例子中，不允许将非叶子节点放置到根节点，或者将节点放置到错误的位置。 4. **JavaScript 代码** - `rootnode` 是树的根节点，它是一个`AsyncTreeNode`，表示整个树的起点。 - `myloader` 是`TreeLoader`实例，负责加载子节点数据。 - `tree` 是`TreePanel`实例，配置了宽度、高度、加载器和根节点。 - `beforenodedrop`事件处理函数用于验证拖放操作是否合法。 5. **HTML 代码** - HTML部分非常简洁，只包含必要的CSS和JS引用，以及`tree-div`这个ID的`div`元素，作为`TreePanel`的容器。 6. **JSP 代码** - JSP用于处理服务器端的数据请求，根据传入的`node`参数来决定返回部门节点还是人员节点。 - `FormatToJson`类用于将Java对象转换为JSON格式，以便于树形结构的解析。 - 服务器返回的数据是一个JSON数组，每个对象包含`id`属性，用于标识节点。 7. **数据格式** - 返回的JSON数据表示树的节点结构，每个节点包含`id`，用于唯一标识。在实际应用中，可能还包括其他属性，如文本、图标等。 总结起来，这个EXTJS TreePanel的简单例子展示了如何创建一个支持异步加载和拖放功能的组织结构树。通过JavaScript、HTML和JSP的协同工作，实现了动态加载数据和用户交互的树形视图。在实际项目中，可以根据具体需求对这个基础示例进行扩展和定制，例如添加更多的节点属性、处理更复杂的拖放逻辑或优化数据加载效率。