ext js中的树treepanel

最新推荐文章于 2024-09-19 19:39:48 发布

无影代码刀

最新推荐文章于 2024-09-19 19:39:48 发布

阅读量584

点赞数

分类专栏： extjs 文章标签： ext null json spring mvc 数据库

本文链接：https://blog.csdn.net/qinyetao1003/article/details/7941470

版权

extjs 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

今天用ext做一个简单的树形菜单，第一次做，所以当中也出现了很多小问题，但是最终还是解决了！入门用，慢慢完善！首先把代码贴出来：

后台代码（我没有经过数据库就在后台自己填充了一些数据）这是一个spring mvc的controller 返回一个list 会自动转化为json数据 treepanel里面默认的是需要json数组：

@RequestMapping("role/getRoleList.do")
@ResponseBody
public List<SysRole> getRoleList(Model model) {
  List<SysRole> roleList = new ArrayList<SysRole>();

  List<SysRole> childRoleList1 = new ArrayList<SysRole>();
  SysRole childRole1 = new SysRole(3, "部门经理",true);
  childRoleList1.add(childRole1);
  SysRole role = new SysRole(1, "角色组1", childRoleList1,false);

  List<SysRole> childRoleList2 = new ArrayList<SysRole>();
  SysRole childRole2 = new SysRole(4, "项目经理",true);
  childRoleList2.add(childRole2);
  SysRole role2 = new SysRole(2, "角色组2", childRoleList2,false);

  List<SysRole> childRoleList3=new ArrayList<SysRole>();
  SysRole childRole3=new SysRole(5,"程序员 ",true);
  childRoleList3.add(childRole3);
        SysRole role3=new SysRole(6, "角色组3", childRoleList3,false);

        SysRole role4=new SysRole(7, "直接角色", true);
  roleList.add(role);
  roleList.add(role2);
  roleList.add(role3);
  roleList.add(role4);
  return roleList;
}

后面到前台的json数组格式为：

[{"children":[{"children":null,"text":"部门经理","roleId":3,"leaf":true}],"text":"角色组1","roleId":1,"leaf":false},{"children":[{"children":null,"text":"项目经理","roleId":4,"leaf":true}],"text":"角色组2","roleId":2,"leaf":false},{"children":[{"children":null,"text":"程序员 ","roleId":5,"leaf":true}],"text":"角色组3","roleId":6,"leaf":false},{"children":null,"text":"直接角色","roleId":7,"leaf":true}]

注意：前台默认的时候需要children text leaf来表示所以我的model类里面也用这几个名字作为字段名称，否则显示不出来，当然你也可以前台去转换，我这里没有做，这样做简单方便！

前台代码：

// 加载所有的角色
   var rolesLoader = new Ext.tree.TreeLoader({
    dataUrl : 'role/getRoleList.do' //这里请求得到数据
   });

   var rootNode = new Ext.tree.AsyncTreeNode({
    id : 'RoleList',
    text : '角色列表',
    loader : rolesLoader

   });

var roleTreePanel =new Ext.tree.TreePanel({
    width : 250,
    height : 360,
    autoScroll : true,
    autoDestroy : true,
    root : rootNode

}）;

最终生成的树形结构为：