easyUI-树形菜单(ComboTree) 无限层级树实现方式（1.0版本）

 对于easyUI实现一个树，是一件很简单的事情，实现形式很多。这里作者将实现，通过数据库获取数据，再将数据通过递归形式装成无限层级json数据，到达无限成级的树结构。需要用到的json插件建附件，希望能对大家有所帮助效果如图 实现步逐1、数据表设计(角色表)
Sql代码  收藏代码

CREATE TABLE `role` (  `id` varchar(32) NOT NULL,  `createDate` datetime NOT NULL,  `modifyDate` datetime NOT NULL,  `name` varchar(64) NOT NULL,  `isSystem` bit(1) NOT NULL,  `description` varchar(256) NOT NULL,  `fatherId` varchar(32) default '0' COMMENT '父id',  PRIMARY KEY  (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8

 2、实体类
Java代码  收藏代码
/** * 实体类 - 角色 */
public class Role extends BaseEntity {  private static final long serialVersionUID = -6614052029623997372L;  private String name;                    //角色名称  private Boolean isSystem;               //是否为系统内置角色  private String description;             //描述  private List<Admin> adminList;            //管理员  private List<Resource> resourceList;  //资源  private String fatherId;                //父角色id  private String fatherName;              //父角色名称  private String children;                //子角色  private String checked;                 //节点是否被选中  public String getName() {  return name;  }  public void setName(String name) {  this.name = name;  }  public Boolean getIsSystem() {  return isSystem;  }  public void setIsSystem(Boolean isSystem) {  this.isSystem = isSystem;  }  public String getDescription() {  return description;  }  public void setDescription(String description) {  this.description = description;  }  public List<Admin> getAdminList() {  return adminList;  }  public void setAdminList(List<Admin> adminList) {  this.adminList = adminList;  }  public List<Resource> getResourceList() {  return resourceList;  }  public void setResourceList(List<Resource> resourceList) {  this.resourceList = resourceList;  }  public String getFatherId() {  return fatherId;  }  public void setFatherId(String fatherId) {  this.fatherId = fatherId;  }  public String getFatherName() {  return fatherName;  }  public void setFatherName(String fatherName) {  this.fatherName = fatherName;  }  public String getChildren() {  return children;  }  public void setChildren(String children) {  this.children = children;  }  public String getChecked() {  return checked;  }  public void setChecked(String checked) {  this.checked = checked;  }
}  3、将角色封装成无限层级的json数据形式的关键代码，前端js调用方法
Java代码  收藏代码
//存放转换后数据的集合
List<Map<String,Object>> comboTreeList  =new ArrayList<Map<String,Object>>();  /** * 返回 treeGrid(树形表格)需要的json格式数据 * 前端调用的就是这个方法 */
@SuppressWarnings("unchecked")
public String backComboTreeTreeRole(){  //得到所有角色  List<Role> list = roleService.getRoleAll();  //调用方法实现角色树  createComboTreeTree(list,"0");  //将集合转换为json输出到页面  Gson gson = new Gson();  String json = gson.toJson(comboTreeList);  try {  ServletActionContext.getResponse().getWriter().print(json);  ServletActionContext.getResponse().getWriter().flush();  ServletActionContext.getResponse().getWriter().close();  }catch (IOException e) {  e.printStackTrace();  }     System.out.println(json);  return null;
}  /** * 将角色封装成树开始 * @param list * @param fid 父id */
private void createComboTreeTree(List<Role> list, String fid) {  for (int i = 0; i < list.size(); i++) {  Map<String, Object> map = null;  Role role = (Role) list.get(i);  if (role.getFatherId().equals("0")) {  map = new HashMap<String, Object>();  //这里必须要将对象角色的id、name转换成ComboTree在页面的显示形式id、text  //ComboTree,不是数据表格，没有在页面通过columns转换数据的属性  map.put("id", list.get(i).getId());         //id  map.put("text",list.get(i).getName());      //角色名  map.put("children", createComboTreeChildren(list, role.getId()));  }  if (map != null)  comboTreeList.add(map);  }
}  /** * 递归设置role树 * @param list * @param fid * @return */
private List<Map<String, Object>> createComboTreeChildren(List<Role> list, String fid) {  List<Map<String, Object>> childList = new ArrayList<Map<String, Object>>();  for (int j = 0; j < list.size(); j++) {  Map<String, Object> map = null;  Role treeChild = (Role) list.get(j);  if (treeChild.getFatherId().equals(fid)) {  map = new HashMap<String, Object>();  //这里必须要将对象角色的id、name转换成ComboTree在页面的显示形式id、text  //ComboTree,不是数据表格，没有在页面通过columns转换数据的属性  map.put("id", list.get(j).getId());  map.put("text", list.get(j).getName());  map.put("children", createComboTreeChildren(list, treeChild.getId()));  }  if (map != null)  childList.add(map);  }  return childList;
}

  jsp页面代码：
Html代码  收藏代码
<td>  <input type="text" name="role.fatherId" <#if role.fatherId == ""> value="0" <#else> value="${role.fatherId}" </#if> hidden = "true"/>  <div id= "comboTree" style="margin-left:0; high:60px; padding-bottom:2px; padding-top:2px; width:210px;"></div>
</td>

    js代码：
Js代码  收藏代码
$(function(){  //加载树  $('#comboTree').combotree({        url:'role!backComboTreeTreeRole.action',  onClick:function(node){  //单用户单击一个节点的时候，触发  $("input[name='role.fatherId']").val(node.id);  },  checkbox:false,  multiple:false  });
});

easyUI-树形菜单(ComboTree) 无限层级树实现方式（1.0版本）相关推荐

雷林鹏分享：jQuery EasyUI 树形菜单 - 创建带复选框的树形菜单
jQuery EasyUI 树形菜单 - 创建带复选框的树形菜单 easyui 的树(Tree)插件允许您创建一个复选框树.如果您点击一个节点的复选框,这个点击的节点信息将向上和向下继承.例如:点击 ...
EasyUI树形菜单后端
前言:在上一篇文章中我们通过EasyUI框架的树(tree).选项卡(tabs)两个组件:做出页面中通过点击菜单,显示菜单对应的页面,但是数据来源并非是活数据,而是写死在JSON文件中的数据,在项目开 ...
easyui树形菜单实现
需求:读取路径配置中的相对路径获取对应的子文件夹及其子文件并形成树形结构,加载xml文件,输入搜索关键字匹配xml里面的value节点的值对应的contact值的集合并进行搜索例如:输入b,找到xm ...
C# 导航栏无限层级树
#region 获取导航栏方法-无限层级 /// <summary> /// 获取导航栏方法-无限层级 /// </summary&g ...
android无限级树形控件,无限分类树，无限层级树
更新记录 3.1(2020-09-09) 修复小程序样式bug 3.0(2020-04-10) 增加保存折叠路径数组,可以还原折叠状态全部折叠,全部打开查看更多当前功能有多选,单选,不选.末级 ...
easyui树形菜单生成算法，及在关系型数据库中的存储方式（非递归，高效算法）
存储结构: 生成树算法: var zNodes = [];// jinja模板从后台取回每一级菜单的 list { % for node in result % }var obj = new Ob ...
树形列（无限级联下拉列的曲线版本）
先上效果图: 1.列表 - 列表设置 - 创建栏,"类型"选择"托管元数据",如下图: 2.选中"托管元数据"后,可以到下面编辑需要的树形啦 ...
jQuery EasyUI使用教程之使用标记创建树形菜单
2019独角兽企业重金招聘Python工程师标准>>> jQuery EasyUI最新试用版下载请猛戳>> 一个树形菜单可以使用标记创建.easyui树形菜单也可以定义在 ...
Java中的无限层级递归树前后端操作解决方案
引言: 抖音真是一个神奇的软件,前两天脑海中浮现了一首歌,知道歌曲的调调,今天打算写博客之前刷了一下抖音,抖音的推荐算法居然给我推送了这首歌,这首歌叫做<一开始说陪你到老的人现在他还好吗> ...

easyUI-树形菜单(ComboTree) 无限层级树实现方式（1.0版本）

easyUI-树形菜单(ComboTree) 无限层级树实现方式（1.0版本）相关推荐

最新文章

热门文章