Easy UI的树形菜单的异步加载

   新手菜鸟,上个星期工作需求才学习使用了easyUI,学习的过程走了很多弯路。就想着写个笔记,自己回忆起来容易,以后的新鸟看了也能快速上手。求大神勿喷!

   easy ui是别人写好的框架,要使用别人的框架,就需要按照别人的路子来走,所以,首先得了解它的规则。

   树形菜单的话, 它从后台传到前台的json数据格式是这样:

  • id:节点id,对载入远程数据很重要。
  • text:显示在节点的文本。
  • state:节点状态,'open' or 'closed',默认为'open'。当设置为'closed'时,拥有子节点的节点将会从远程站点载入它们。
  • checked:表明节点是否被选择。
  • attributes:可以为节点添加的自定义属性。
  • children:子节点,必须用数组定义

   举一个简单的例子:[{"id":"CRM_01_01","text":"成交客户维护","state":"closed"},{"id":"CRM_01_02","text":"成交客户查询","state":""}]

  知道了前后端交互的数据格式,功能的实现就简单了许多,下面都列举出来了。我做的是一个非常简单的例子,想要丰富功能的话,可以查看easyui文档,方法事件的介绍很详细。

  前端代码如下:

一、HTML部分代码

<div id="tree"></div>
二、js代码
$(function(){
		$("#tree").tree({
			url:"appPAction!demo.action", 
			//显示加减号
			lines:true,
			animate:true,
			//展开前 
			onBeforeExpand:function(node){
                        // 异步加载的地址并传递参数 
                      $("#tree").tree("options").url ="appPAction!demo.action?"+node.id; 
                   },}); });
        


三、后端代码:后台使用的是Spring MVC的模式,只粘贴controller层的方法
 String parentModuleId=id;   
//查询数据库,取出数据
 List<AppPermission> list=appPermissionManager.query(parentModuleId);
List<Map<String,Object>> item=new ArrayList<Map<String,Object>>();
Map<String,Object> it=null;
//遍历集合,将数据按照格式一一封装好
 for(AppPermission app:list){ it=new HashMap<String,Object>();
//当前节点的ID,也是子节点的父ID,一定要传到前台的
it.put("id", app.getModuleId());
//树形菜单节点对应的标题
  it.put("text", app.getModuleName());
//查询数据库,判断当前节点是否有子节点
 List<AppPermission> list1=appPermissionManager.query(app.getModuleId());
if(list1==null||list1.size()==0){
//若是没有子集,
it.put("state","");}
else{
it.put("state", "closed");
}
 item.add(it);}
//返回数据到前台(调用的方法)
  ResponseUtils.renderJson(this.response, JsonUtil.listtojson(item));



效果图如下:




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值