`

js 页面加载树形菜单结构

 
阅读更多
1.通过sql语句查询子父关系结构

select a.eventid as grouppeventid,a.groupname as groupName
from (select t.eventid,
t.groupname,
t.grouppeventid
from gps_groups t
connect by prior t.eventid = t.grouppeventid
start with t.grouppeventid is null
) a
where 1 = 1 ;


2.通过Java获得JSONArray
   
   JSONArray array = treeMenuList(JSONArray.fromObject(resultList));
   //菜单树形结构  
   public JSONArray treeMenuList(JSONArray menuList, int parentId) {  
       JSONArray childMenu = new JSONArray();  
       for (Object object : menuList) {  
           JSONObject jsonMenu = JSONObject.fromObject(object);  
           int menuId = jsonMenu.getInt("id");  
           int pid = jsonMenu.getInt("parentId");  
           if (parentId == pid) {  
               JSONArray c_node = treeMenuList(menuList, menuId);  
               jsonMenu.put("childNode", c_node);  
               childMenu.add(jsonMenu);  
           }  
       }  
       return childMenu;  
   }  


3.通过JS加载到easyui Tree组件上

function filterTree(data){
  var iRtn = [] ;
  for(var i=0;i<=data.length-1;i++){
     var arr = [] ;
     var json = data[i];
     // 转换成Tree所要的格式
     var obj = {} ;
     // 对children进行遍历
     if(json.children && json.children.length>0){
        arr = this.filterTree(json.children);
     }
     obj.children = arr ;
     iRtn.push(arr);
  }
  return iRtn ;
}

initTree:function(){
		$("#xxx").tree({    
		    url:"xxxx.action",  
		    lines:true,
		    loadFilter: function(e){  
		    	return this.filterTree(e.items);
		    },
			onClick:function(node){
				xx.curnode=node;
				xxx.treeData2Form(node.menu);
			}
		}); 
	},



















分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    jsp页面动态加载树形菜单

    总的来说,创建JSP页面上的动态加载树形菜单涉及服务器端和客户端的协同工作。服务器端负责数据的获取和处理,而客户端则负责展示和交互。这种技术不仅提高了页面的响应速度,也为用户提供了流畅的浏览体验。通过...

    手机web树形菜单结构

    手机Web树形菜单结构是一种高效的信息组织方式,尤其适用于内容层级复杂、需要清晰导航的场景。本文将深入探讨如何实现这样的菜单结构,以及其特点和优势。 手机Web树形菜单结构的设计目标是确保在小屏幕设备上也能...

    好看实用js树形菜单

    在本案例中,"好看实用js树形菜单"是指利用JavaScript实现的一种交互式的、可视化的菜单结构,它通常用于网站或应用程序的导航,帮助用户更方便地浏览和访问层次结构的数据。 树形菜单的核心在于其递归的结构,每个...

    jQuery无限级ajax加载树形菜单代码

    "jQuery无限级ajax加载树形菜单代码"是实现这种功能的一种技术方案,它结合了jQuery库的便利性、Ajax的异步加载特性和JSON数据格式的强大。 jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理和Ajax...

    javascript 树形菜单

    在IT领域,尤其是在网页开发中,树形菜单是一种常见的用户界面元素,用于组织和展示层次化的数据或导航结构。在JavaScript中实现树形菜单,我们可以利用DOM操作、事件监听以及数据结构来创建交互式和可扩展的菜单...

    JS树形菜单集合(最全)

    JavaScript(简称JS)是一种轻量级的脚本语言,广泛应用于网页和网络应用开发,而树形菜单在前端UI设计中扮演着重要角色,尤其在数据层级结构展示时。JS树形菜单允许用户以交互方式浏览多级数据,提供了一种高效、...

    JS后台管理树形菜单代码.rar

    在网页开发中,后台管理系统通常需要使用到树形菜单来组织和展示层级关系的数据,例如权限管理、部门结构、文件目录等。"JS后台管理树形菜单代码.rar" 是一个包含JavaScript实现的树形菜单插件,适用于后台管理场景...

    JSTree(js写的树形菜单,支持加载10000节点以上)

    JSTree作为一个强大且灵活的JavaScript树形菜单组件,为开发者提供了解决大数据量加载问题的有效工具。其高效、易用和可扩展的特性,使其在各种Web应用中广泛应用,无论是企业级后台管理界面,还是用户友好的前端...

    js树形菜单

    在网页设计中,树形菜单是一种常见的交互元素,它能够以层级结构展示数据,使得用户可以方便地导航和浏览复杂的目录或信息结构。"js树形菜单"是使用JavaScript编程语言来实现这种功能的技术。JavaScript作为一种强大...

    javascript制作 树形菜单.zip

    在JavaScript编程中,树形菜单是一种常见的用户界面元素,它以层级结构展示数据,通常用于网站导航、文件系统浏览或数据库记录的展示。本压缩包包含两个文件:"可以拖动的IEtree树型.htm" 和 "树型结构_lj不错.htm"...

    好看的树形结构菜单

    7. **编程实现**:在JavaScript中,实现树形结构菜单通常涉及递归算法,用于遍历和构建树结构。同时,可能还需要配合数据模型(如JSON对象)来存储和传递菜单数据。 总结来说,“好看的树形结构菜单”是一个结合了...

    JavaScript实现树形菜单

    通过JavaScript实现树形菜单,可以有效地展示这些层次关系,并提供方便的展开、折叠、选择等功能。 实现JavaScript树形菜单主要涉及以下几个关键技术点: 1. 数据结构设计:首先,我们需要定义一个数据结构来存储...

    一个js树形菜单

    综上所述,"一个js树形菜单"项目是一个学习和实践JavaScript核心技能的好例子,它涵盖了数据结构、DOM操作、事件处理、CSS样式等多个方面,对提升Web开发能力大有裨益。通过研究项目中的代码和实现方式,开发者不仅...

    js+jsp树形菜单

    总之,"js+jsp树形菜单"是一个融合了前端与后端技术的实践,它展示了如何利用JavaScript和JSP协同工作,为用户提供交互性强、数据驱动的菜单界面。理解并掌握这一技术,对于Web开发者来说是非常有价值的。

    自己写的JS三层树形菜单,内容基于xml

    本项目是一个基于JavaScript实现的三层树形菜单,其核心内容是通过解析XML文件来动态生成菜单结构。下面将详细阐述这个项目中的关键知识点。 首先,我们关注的是“树形菜单”。树形菜单是一种呈现层次结构数据的...

    js管理类树形菜单

    在Web开发中,树形菜单是一种常见的UI元素,用于展示层次结构的数据,比如文件系统、组织架构或导航菜单。在本主题中,我们将深入探讨如何使用JavaScript来创建和管理类树形菜单。 1. 数据结构:树形菜单的基础是...

    带复选框JS树 Javascript树 JS树 树形菜单

    JavaScript树形菜单是一种在网页中实现层次结构数据展示的交互方式,它通常用于导航、文件管理、选项配置等场景。"带复选框"的JS树形菜单则更进一步,允许用户通过勾选复选框来选择或操作树节点,为用户提供了一种...

    ajax树形菜单 动态显示

    在传统的网页设计中,整个树形菜单可能会一次性加载所有节点,这可能导致页面加载速度慢,尤其是在数据量大或层次深的情况下。而采用Ajax动态加载则可以解决这一问题。 首先,我们需要创建HTML结构来呈现树形菜单的...

    vue+elementui实现多层树形菜单

    在本文中,我们将深入探讨如何使用Vue.js框架与Element UI库来实现多层树形菜单。Vue.js是一个轻量级的前端JavaScript框架,以其简洁的API和强大的功能深受开发者喜爱。而Element UI则是一个基于Vue.js的企业级UI...

    js树形菜单,完全兼容

    在本话题中,我们主要讨论的是使用JavaScript实现的树形菜单,它是一种常见的用户界面元素,用于展示层次结构的数据。 树形菜单在网页设计中扮演着重要角色,它可以将复杂的层级关系以简洁直观的方式呈现给用户。...

Global site tag (gtag.js) - Google Analytics