新手菜鸟,上个星期工作需求才学习使用了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));
效果图如下: