easyUI 实现tree树形菜单json的处理

Dear 丶 2022-09-26 03:30 260阅读 0赞

今天使用easyUI想完成一个树形菜单，后台部分的已经写好，传json给前端显示菜单。

发现easyui处理树形菜单的json必须按照它自己的格式，但是我后台的部分已经写好，又不想也不方便去修改。

发现easyui的tree组件提供了loadFilter方法，此方法可以把后台传过来的数据进行过滤，于是我打算在前台处理json。

这些是我的代码，只需修改几处代码就能实现后台json转成easyui规定的json格式了。

//此处是easyui的json格式
    var tree = {
    	id:'',
    	text:'',
    	state:'',
    	checked:'',
    	attributes:'',
    	children:''
    }
    //此处是把后台传过来的json数据转成easyui规定的格式
    function bl(item){
    	var tree = new Object();
    	tree.id = item.id;
    	tree.text = item.name;
    	tree.state = 'open';
    	tree.checked = 'false';
    	tree.attributes = item.url;
    	if(item.child_menus.length != 0){
    		tree.children = jsonbl(item.child_menus);
    	}else{
    		tree.children = [];
    	}
    	return tree;
    }
    function jsonbl(data){
    	var easyTree = [];
    	$.each(data,function(index,item){
    	 easyTree[index] = bl(item);
    	 });
    	return easyTree;
    }
    //此处是easyui调用tree组件的方法(使用easyui的童鞋自然懂得，只需修改请求json的api即可)
    $('#tt').tree({
     	url: '${pageContext.request.contextPath}/sysmenu/all',
    	 loadFilter: function(data){ 
    		return jsonbl(data); 
    	}
    });

发表评论取消回复

表情：

评论列表（有 0 条评论，260人围观）

还没有评论，来说两句吧...

相关阅读

相关树形菜单的实现方式

当我们想要展示层级结构，如文件目录、组织结构或分类目录时，树形菜单是一个直观且有效的解决方案。在Java中，有多种方式可以实现树形菜单，本文将介绍其中几种常见方法，并配有示例代

秒速五厘米/ 2023年10月15日 13:09/ 0 赞/ 135 阅读

相关 easyui树形菜单实现

![815622-20180809134106370-1515825099.png][] ![815622-20180809134229274-654427617.png][

缺乏、安全感/ 2023年06月10日 09:27/ 0 赞/ 102 阅读

相关 easyUI 实现tree树形菜单json的处理

今天使用easyUI想完成一个树形菜单，后台部分的已经写好，传json给前端显示菜单。发现easyui处理树形菜单的json必须按照它自己的格式，但是我后台的部分已经写好，

Dear 丶/ 2022年09月26日 03:30/ 0 赞/ 261 阅读

相关 ztree+json，渲染树形菜单

前面的话：zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发,尤其是树状菜单、树

清疚/ 2022年09月06日 04:51/ 0 赞/ 363 阅读

相关 ztree+json，渲染树形菜单

前面的话：zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发,尤其是树状菜单、树

迷南。/ 2022年09月04日 10:59/ 0 赞/ 327 阅读

相关 easyUI-combotree-树形下拉菜单

======================================我的================================================

骑猪看日落/ 2022年08月20日 11:08/ 0 赞/ 353 阅读

相关基于EasyUI的基础之上实现树形功能菜单

页面展示截图如下： ![Center][]![Center 1][]![Center 2][]![Center 3][] 为了实现以上效果，在开始前必

偏执的太偏执、/ 2022年06月13日 05:19/ 0 赞/ 278 阅读

相关 DTree实现树形菜单

新建一个web工程需要一个index.jsp放在webroot下，一个dtree.js放在webroot下的js（自己new的Folder）里，一个dtree.css放在w

ゝ一纸荒年。/ 2022年06月12日 08:59/ 0 赞/ 381 阅读

相关《easyUI的树形菜单》

1：dao方法 package com.zy.dao; import java.sql.SQLException; import java.

清疚/ 2022年05月10日 02:33/ 0 赞/ 284 阅读

相关 easyui扁平Json生成树形菜单

/ {@link} http://easyui.btboys.com/post-77.html ztree的简单数据结构（扁平pid结构数据

╰半橙微兮°/ 2022年03月18日 02:10/ 0 赞/ 368 阅读