ExtJS树组件实战：异步加载与拖动功能

Extjs

1星需积分: 10 124 浏览量更新于2024-09-11 收藏 39KB DOC 举报

身份认证购VIP最低享 7 折!

30元优惠券

在本文档中，我们将深入探讨如何使用Extjs实现一个简单的树形结构应用，特别是关注于部门与员工的层次关系以及异步数据加载和拖拽功能。这个示例旨在为初学者提供一个实用的基础，以便更好地理解和操作Extjs中的TreePanel组件。首先，让我们看下主要的代码部分。在JavaScript代码中，关键部分是在`onReady`函数中创建一个树结构。`Ext.tree.AsyncTreeNode`用于表示根节点，其文本内容为'根'，ID设为'0'。`Ext.tree.TreeLoader`负责异步加载数据，通过`dataUrl`属性指向一个名为`getTreeData.jsp`的服务器端脚本，用于获取树结构的数据。创建TreePanel时，我们设置了`enableDD`为true，启用拖放功能。`applyTo`属性指定树形面板应用到HTML元素的ID为'tree-div'，定义了宽度和高度。`loader`参数引用了我们的TreeLoader实例，`root`参数设置为根节点。在树节点拖放事件处理函数中，`beforenodedrop`事件监听器确保了只有当目标节点（dropNode）不是叶子节点或者源节点（node）试图将一个节点放到根节点（id为'0'）时，拖放才会被取消。这体现了对拖放规则的限制，确保了部门间拖放的逻辑正确性。 HTML部分则非常简洁，主要是引入了必要的Extjs库资源。`<!DOCTYPE html>`声明了文档类型，`<head>`标签内包含了字符集设置和标题标签，`<link>`标签引入了Extjs的CSS样式，而`<script>`标签分别引入了Extjs的基础库和扩展库，这些都是构建Extjs应用的基础。这个Extjs树实现的例子展示了如何创建一个具有异步数据加载、拖放功能的树形结构，适合用于展示组织架构或数据分类等场景。对于想要学习Extjs并实践树状组件的开发者来说，这是一个很好的起点。通过理解并调整这段代码，你可以根据实际需求扩展它，例如添加更多的节点类型、自定义节点样式或响应更多的用户交互。

资源详情

资源推荐

Extjs tree 简单例子

1. 完成功能

1.1.主要功能

显示所有部门及部门下的所有人员

1.2.要求

1. Ext 的异步加载，每点一个节点加载一次数据。并非一次全部查出。

2. 拖动需求，人员是叶子节点，部门之间的人员可以拖动，部门下只能是人员，人员必

有部门。

2. 主要代码

2.1.Js 代码：

Ext.onReady(function(){

var rootnode=new Ext.tree.AsyncTreeNode({

text:'根',

id:'0'

})

var myloader=new Ext.tree.TreeLoader({

dataUrl:'getTreeData.jsp'

})

var tree=new Ext.tree.TreePanel({

enableDD:true,

applyTo:"tree-div",

下载后可阅读完整内容，剩余3页未读，立即下载

malinhuan123

粉丝: 3
资源: 6

ExtJS树组件实战：异步加载与拖动功能

extjs实现动态树加载菜单

extJs树形框架(一个例子)

ExtJS3 实现异步下拉树

extjs6 实现下拉树

extjs 树形菜单

extjs 树形菜单 分页查看

extjs如何实现编辑弹窗

extjs如何实现Ajax请求

extjs6 实现模糊查询

用写一个extjs6 实现模糊查询的完整例子

extjs 创建多个实例

extjs表格实现复选框的代码

extjs openlayer2.10版本实现全屏

extjs 用ProphetGrid 实现多层表头

vscode 中 如何 实现 ExtJs 实现动态加载grid，请提供完整示例

extjs实现路由跳转的代码

extjs实现登录页ajax请求的代码

extjs 中文例子

extjs实现登录页的代码

Extjs 实现级联查询的同时支持模糊查询

最新资源

extjs 树形菜单分页查看

vscode 中如何实现 ExtJs 实现动态加载grid，请提供完整示例