通常表示一个树节点的方式就是在每一个节点存储一个 parentid。 这个也被称为邻接列表模型。 直接加载这些数据到树形菜单(Tree)是不允许的。 但是我们可以在加载树形菜单之前,把它转换为标准标准的树形菜单(Tree)数据格式。 树(Tree)插件提供一个 'loadFilter' 选项函数,它可以实现这个功能。 它提供一个机会来改变任何一个进入数据。 本教程向您展示如何使用 'loadFilter' 函数加载父/子节点到树形菜单(Tree)。

父/子节点数据

  1. [
  2. {"id":1,"parendId":0,"name":"Foods"},
  3. {"id":2,"parentId":1,"name":"Fruits"},
  4. {"id":3,"parentId":1,"name":"Vegetables"},
  5. {"id":4,"parentId":2,"name":"apple"},
  6. {"id":5,"parentId":2,"name":"orange"},
  7. {"id":6,"parentId":3,"name":"tomato"},
  8. {"id":7,"parentId":3,"name":"carrot"},
  9. {"id":8,"parentId":3,"name":"cabbage"},
  10. {"id":9,"parentId":3,"name":"potato"},
  11. {"id":10,"parentId":3,"name":"lettuce"}
  12. ]

使用 'loadFilter' 创建树形菜单(Tree)

  1. $('#tt').tree({
  2. url: 'data/tree6_data.json',
  3. loadFilter: function(rows){
  4. return convert(rows);
  5. }
  6. });

转换的实现

  1. function convert(rows){
  2. function exists(rows, parentId){
  3. for(var i=0; i<rows.length; i++){
  4. if (rows[i].id == parentId) return true;
  5. }
  6. return false;
  7. }
  8.  
  9. var nodes = [];
  10. // get the top level nodes
  11. for(var i=0; i<rows.length; i++){
  12. var row = rows[i];
  13. if (!exists(rows, row.parentId)){
  14. nodes.push({
  15. id:row.id,
  16. text:row.name
  17. });
  18. }
  19. }
  20.  
  21. var toDo = [];
  22. for(var i=0; i<nodes.length; i++){
  23. toDo.push(nodes[i]);
  24. }
  25. while(toDo.length){
  26. var node = toDo.shift(); // the parent node
  27. // get the children nodes
  28. for(var i=0; i<rows.length; i++){
  29. var row = rows[i];
  30. if (row.parentId == node.id){
  31. var child = {id:row.id,text:row.name};
  32. if (node.children){
  33. node.children.push(child);
  34. } else {
  35. node.children = [child];
  36. }
  37. toDo.push(child);
  38. }
  39. }
  40. }
  41. return nodes;
  42. }

原文地址:http://www.jeasyui.net/tutorial/57.html 很实用

EasyUI 树形菜单加载父/子节点的更多相关文章

  1. 雷林鹏分享:jQuery EasyUI 树形菜单 - 树形菜单加载父/子节点

    jQuery EasyUI 树形菜单 - 树形菜单加载父/子节点 通常表示一个树节点的方式就是在每一个节点存储一个 parentid. 这个也被称为邻接列表模型. 直接加载这些数据到树形菜单(Tree ...

  2. elementui tree 节点过滤加载对应子节点

    /官网例子 <el-input placeholder="输入关键字进行过滤" v-model="filterText"> </el-inpu ...

  3. 雷林鹏分享:jQuery EasyUI 树形菜单 - 树形网格惰性加载节点

    jQuery EasyUI 树形菜单 - 树形网格惰性加载节点 有时我们已经得到充分的分层树形网格(TreeGrid)的数据. 我们还想让树形网格(TreeGrid)按层次惰性加载节点. 首先,只加载 ...

  4. 雷林鹏分享:jQuery EasyUI 树形菜单 - 树形网格动态加载

    jQuery EasyUI 树形菜单 - 树形网格动态加载 动态加载树形网格有助于从服务器上加载部分的行数据,避免加载大型数据的长时间等待.本教程将向您展示如何创建带有动态加载特性的树形网格(Tree ...

  5. 雷林鹏分享:jQuery EasyUI 树形菜单 - 树形菜单添加节点

    jQuery EasyUI 树形菜单 - 树形菜单添加节点 本教程向您展示如何附加节点到树形菜单(Tree).我们将创建一个包含水果和蔬菜节点的食品树,然后添加一些其他水果到已存在的水果节点. 创建食 ...

  6. 雷林鹏分享:jQuery EasyUI 树形菜单 - 树形网格添加分页

    jQuery EasyUI 树形菜单 - 树形网格添加分页 本教程展示如何向带有动态加载特性的树形网格(TreeGrid)添加分页. 创建树形网格(TreeGrid) 启用树形网格(TreeGrid) ...

  7. 雷林鹏分享:jQuery EasyUI 树形菜单 - 使用标记创建树形菜单

    jQuery EasyUI 树形菜单 - 使用标记创建树形菜单 一个树形菜单(Tree)可以从标记创建.easyui 树形菜单(Tree)也可以定义在 元素中.无序列表的 元素提供一个基础的树(Tre ...

  8. 雷林鹏分享:jQuery EasyUI 树形菜单 - 创建基础树形网格

    jQuery EasyUI 树形菜单 - 创建基础树形网格 树形网格(TreeGrid)组件从数据网格(DataGrid)继承,但是允许在行之间存在父/子节点关系.许多属性继承至数据网格(DataGr ...

  9. 雷林鹏分享:jQuery EasyUI 树形菜单 - 创建异步树形菜单

    jQuery EasyUI 树形菜单 - 创建异步树形菜单 为了创建异步的树形菜单(Tree),每一个树节点必须要有一个 'id' 属性,这个将提交回服务器去检索子节点数据. 创建树形菜单(Tree) ...

随机推荐

  1. ELK基础架构解说-运维笔记

    一.ELK日志分析工具介绍1) Elasticsearch1.1)  Elasticsearch介绍ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索 ...

  2. Linux内核分析——第七章 链接

    第七章——链接 1.链接是将各种代码和数据部分收集起来并组合成为一个单一文件的过程,这个文件可被加载到存储器并执行. 2.链接可以执行于编译时,加载时,运行时. 7.1编译器驱动程序 1.大多数编译系 ...

  3. C# 中颜色和名称样式对照表

    WPF中的画刷也一样适用 System.Windows.Media.Brushes.名称 (如:System.Windows.Media.Brushes.AliceBlue) :first-child ...

  4. 面象对象设计原则之一:单一职责原则(Single Responsibility Principle, SRP)

    单一职责原则是最简单的面向对象设计原则,它用于控制类的粒度大小.单一职责原则定义如下:单一职责原则(Single Responsibility Principle, SRP):一个类只负责一个功能领域 ...

  5. [日常工作] Linux与Windows的连接访问以及数据共享等方法 vncserver smb xshell xftp winscp mount等

    日常办公机器是用 windows, 但是越来越多的测试和工作需求需要使用linux. 这里以最常用的系统centos为例进行说明 1. 远程连接 ssh的方式 建议使用xmange 系列的 xshel ...

  6. Jquery ajax ajaxStart()和ajaxStop()加载前的优雅表现

    Jquery中当一个Ajax请求启动时,并且没有其他未完成的Ajax请求时,将调用ajaxStart()方法.同样,ajaxStop()方法则是在所有Ajax请求都完成时调用.这些方法的参数都是一个函 ...

  7. Alpha、伪Beta 发布个人感想与体会

    1.Alpha版本 在Alpha版本发布时,我在Fantacy组,那时的体会我已在前面写过,现在回想起来,我觉得自己的决定似乎做的并不是很糟糕,因为来到新的团队里,我学到了很多东西,认识了很多技术很好 ...

  8. 请求与响应编码及jsp基本原理

    1.请求转发和请求包含 (1)请求转发: this.getServletContext().getRequestDispatcher("").forward(request,res ...

  9. MySQL中条件放在where后面与放在on后面的区别

    假设有两种表:test_on_position表和address表,address表存放地址,test_on_position存放会员及其常用的地址,数据如下: address表: test_on_p ...

  10. jenkins--svn+Email自动触发1(作业设置)

    项目名称设置: svn设置: 触发构建设置: 构建加入sonar-scanner代码扫描: 邮件设置: 邮件触发器配置: