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

Dear 丶 2022-09-26 03:30 210阅读 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 条评论，210人围观）

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

相关阅读

相关 017：将普通json 处理为 el-tree 树形结构

![在这里插入图片描述][32d2a1d099334cfba6adc4f84dd79e22.png_pic_center] 第017个查看专栏目录: [VUE][] —

短命女/ 2024年03月16日 19:27/ 0 赞/ 66 阅读

相关树形菜单的实现方式

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

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

相关 easyui树形菜单实现

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关《easyUI的树形菜单》

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

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

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

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

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