今天遇到一个问题，从后台传输数据到前台，
显示的是tree，tree有根和子叶组成，就是显示不出来。
我的亲爹，找来找去还是测试出来了。
先说答案：
一颗树，应该保证该树的root，叶子的id是唯一的。
问题所在：
我用的mysql自增的方式，所有主键上 1,2 3 4 5
而我的根节点比如图中的开发部65 与 叶子节点比如图中的子1节点是
两个对象，他们都是用mysql自增的方式，因此错误导致根节点的id和
叶子节点的id有可能重复。
测试数据（正常显示）
{
children : [{
text : '开发部',
id : 'absolute22',
leaf : false,
children : [{
text : '移动开发部',
id : 'absolute221',
leaf : true
}, {
text : '前段开发部',
id : 'pswdupdate222',
leaf : true
}]
}, {
text : '设计部',
id : 'absolute32',
leaf : false,
children : [{
text : '移动设计部',
id : 'absolute321',
leaf : true
}, {
text : '前段设计部',
id : 'pswdupdate322',
leaf : true
}]
}]
}
实际后台数据（略有改动）：（无法正常显示）
{
id : '-1',
children : [{
text : '开发部3',
id : '1',
children : [{
text : '子1',
id : '1',
//children : [],
leaf : true
}, {
text : '方法',
id : '2',
//children : [],
leaf : true
}, {
text : '方法',
id : '3',
//children : [],
leaf : true
}, {
text : 'new1',
id : 4,
//children : [],
leaf : true
}, {
text : 'dd',
id : '5',
//children : [],
leaf : true
}, {
text : 'ff',
id : '7',
//children : [],
leaf : true
}, {
text : '这个小组',
id : '8',
children : [],
leaf : true
}],
leaf : false
}, {
text : '人力资源部2',
id : '2',
children : [{
text : 'ff',
id : '6',
//children : [],
leaf : true
}, {
text : '总经理秘书',
id : '10',
//children : [],
leaf : true
}],
leaf : false
}]
//"leaf" : false
}
把id的值改为不同，就能正常显示了
分享到：
相关推荐
在本篇文章中，我们将深入探讨如何在ExtJS框架中获取TreePanel中所有被选中（checked）的叶子节点的ID。此技术对于处理复杂的数据结构、优化用户交互体验以及实现高效的数据管理至关重要。 ### 一、ExtJS简介 ...
- `Ext.data.TreeModel`定义了树节点的数据结构，包括节点ID、文本、是否为叶子节点、子节点列表等属性。 - `Ext.data.TreeStore`用于管理树节点数据，它可以连接到服务器进行异步加载。 3. **节点操作**： - `...
节点可以包含属性如 "cls"（样式类）、"id"（唯一标识）、"leaf"（是否为叶子节点）以及 "children"（子节点数组）。例如： ```javascript [{"cls":"folder","id":10,"leaf":false,"children":[{"cls":"file","id":...
在这个例子中，不允许将非叶子节点放置到根节点，或者将节点放置到错误的位置。 4. **JavaScript 代码** - `rootnode` 是树的根节点，它是一个`AsyncTreeNode`，表示整个树的起点。 - `myloader` 是`TreeLoader`...
- 设计一个名为`TreeNodeBO`的类，用来表示树节点，包含id、parentId、text（显示文本）、leaf（是否为叶子节点）等属性。 4. **编写前端JavaScript**： - 使用ExtJS库创建一个TreePanel，设置id、region、width...
- **`leaf`**: 表示节点是否是叶子节点。 - **`checked`**: 表示节点是否被选中。 ### 总结 本例展示了如何使用ExtJS4结合MVC2模式构建一个具有动态数据加载功能的TreePanel组件。通过Ajax请求从服务器获取JSON...
- `leaf`: 指示节点是否为叶子节点，即没有子节点。 4. **主要属性** - `id`: 节点的ID。 - `attributes`: 节点的属性集合，可以包含任何与该节点相关的数据。 - `parentNode`: 节点的父节点对象。 - `...
- **leaf**: 指示该节点是否为叶子节点，即没有子节点。 - **主要属性**： - **id**: 节点的ID。 - **attributes**: 节点的属性集合，包含额外的数据信息。 - **parentNode**: 父节点对象。 - **childNodes**:...
例如，`text`属性定义节点的显示文本，`leaf`属性表示该节点是否为叶子节点，`id`是节点的唯一标识，`href`和`hrefTarget`分别用于设置链接地址和打开方式，`draggable`决定节点是否可拖动，`checked`控制是否显示复...
这里的数据结构比`ExtJS`的简单一些，没有展开状态或叶子节点标记，但同样可以实现树的展示。 **DtreeTest和DtreeTest2** 在提供的压缩包文件`DtreeTest`和`DtreeTest2`中，很可能是包含了一些示例代码或者测试用例...
- `foldersOnly`: 是否只显示叶子节点为非叶子节点，即文件夹。 - `store`: 链接到数据存储，通常是一个`Ext.data.TreeStore`，它提供了节点的数据。 - `tools`: 可以添加到树面板头部的工具条。 - `listeners`:...
3. **前端交互**：当用户右键点击树的叶子或目录节点时，EXTJS会显示一个菜单，用户可以选择编辑或删除等操作。这些操作会触发DWR调用，将请求发送到后端。 4. **拖拽功能**：EXTJS树支持节点的拖放操作。当用户...
- 数据格式通常为JSON，包含`text`和`id`字段，以及`leaf`属性标识节点是否为叶子节点。 3. **组件内部实现**： - 继承`Ext.form.ComboBox`，创建自定义类`ComboboxTree`。 - 初始化`AsyncTreeNode`作为树的根...
### ExtJs4 实现下拉树选择框 ComboTree #### 概述 在现代Web应用开发中，ExtJS 是一个非常强大的JavaScript库，用于构建复杂的客户端应用程序。它提供了丰富的组件库，使得开发者能够轻松地创建出功能丰富且交互性...
模型定义了树节点的字段，如`text`（节点文本）、`leaf`（是否为叶子节点）等。你可以根据需要添加自定义字段： ```javascript Ext.define('TreeNode', { extend: 'Ext.data.Model', fields: ['id', 'text', '...
1. **配置树节点**：首先，我们需要为树节点定义模型（Ext.data.TreeModel），并在模型中设置`leaf`属性为`false`来表示这是一个可扩展的节点，而非叶子节点。同时，可以设置`children`字段来定义数据源。 2. **...
菜单的数据结构通常用一个List集合表示，每个菜单项（JsonMenu）包含文本、是否展开、ID、是否是叶子节点以及子菜单项等属性。服务器端的Action通过特定的配置返回符合TreeLoader需要格式的JSON数据，Extjs通过解析...
4. **folderIcon** 和 **leafIcon**：分别用于定义文件夹节点和叶子节点的图标。 5. **tools**：可选，用于在TreePanel头部添加工具栏按钮。 6. **listeners**：用于监听各种事件，如节点展开、折叠、点击等。 ...
4. `leaf`: 表示节点是否为叶子节点（没有子节点）。`true`表示叶子节点，`false`表示非叶子节点。 5. `children`: 非叶子节点的子节点数组，每个子节点遵循相同的JSON结构。 6. `checked`: 新增的属性，用于在节点...
例如，在本例中，'vehiclelist'即为一个叶子节点的id，它将与相应的视图组件关联起来。 接下来看如何定义view。在Extjs中，视图通常是由Ext.define()方法定义的。对于需要通过Tree加载的视图，我们同样需要为其设置...