对于easyUI实现一个树形表格,是一件很简单的事情,实现形式很多。
这里作者将实现,通过数据库获取数据,再将数据通过递归形式装成无限层级json数据,到达无限成级的树形表格结构。
需要用到的json插件建附件,希望能对大家有所帮助
效果如图
实现步逐
1、数据表设计(角色表)
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、实体
/** * 实体类 - 角色 * */ 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-xiongmin private String fatherName; //父角色名称-xiongmin 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调用方法
//存放转换后数据的集合 List<Map<String,Object>> treeGridList =new ArrayList<Map<String,Object>>(); /** * 返回 treeGrid(树形表格)需要的json格式数据 */ public String backTreeGridTreeRole(){ //得到所有角色 List<Role> list = roleService.getRoleAll(); //调用方法实现角色树 createTreeGridTree(list,"0"); //将集合转换为json输出到页面 Gson gson = new Gson(); String json = gson.toJson(treeGridList); 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 createTreeGridTree(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>(); //这里无所谓怎么转都行,因为在页面easyUI插件treeGrid提供了数据转换的columns属性,具体看相关的js代码 map.put("id", list.get(i).getId()); //id map.put("name", list.get(i).getName()); //角色名 map.put("children", createTreeGridChildren(list, role.getId())); } if (map != null) treeGridList.add(map); } } /** * 递归设置role树 * @param list * @param fid * @return */ private List<Map<String, Object>> createTreeGridChildren(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>(); //这里无所谓怎么转都行,因为在页面easyUI插件treeGrid提供了数据转换的columns属性,具体看相关的js代码 map.put("id", list.get(j).getId()); map.put("name", list.get(j).getName()); map.put("children", createTreeGridChildren(list, treeChild.getId())); } if (map != null) childList.add(map); } return childList; }
jsp页面
<div id= "treeGrid" style="width:285px;"></div>
js代码
$(function(){ $('#treeGrid').treegrid({ url:'role!backTreeGridTreeRole.action', idField: 'id', treeField:'name', columns: [[ {title: '角色id', field: 'id', width: 280, hidden:true}, {title: '角色名称', field: 'name', width: 280} ]] }) });
相关推荐
JAVA实现EASYUI树形表格(TreeGrid)代码,gradle项目,内含gradle文件夹和mysql数据库文件,解压后导入mysql数据库,文件夹导入eclipse即可使用。首次使用请更新gradle项目下载JAR包,不然报错。
这是我自己总结出来easyui-textbox和easyui-combobox的onchange事件响应实例,绝对可用,网上很多实例都无法运行,这个我亲自测试可用使用才传上来的,供大家参考学习。
jquery-easyui-EDT-1.5.2-build1 jquery-easyui-EDT-1.5.2-build1
主要为大家详细介绍了Java easyui树形表格TreeGrid的实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
jquery-easyui-1.7.0 官方文档以及源码,演示demo,内容详细
NULL 博文链接:https://zhglhy.iteye.com/blog/1766581
jquery-easyui-1.2.2jquery-easyui-1.2.2jquery-easyui-1.2.2
jquery-easyui-EDT-1.4.2-,包括中文文档以及一些示例,静态资源,各种样式
jquery-easyui-1.0.5API 使用说明文档 jquery_easyui_manual_cnjquery-easyui-1.0.5API 使用说明文档 jquery_easyui_manual_cnjquery-easyui-1.0.5API 使用说明文档 jquery_easyui_manual_cn
jQuery EasyUI jquery-easyui-1.5.5.6 版 API 中文版 PDF和chm版本,jQuery
easyui是一种基于jQuery的用户界面插件集合。 easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能。 使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面。 easyui...
jquery-easyui-1.5后台模板.zip jquery-easyui-1.5后台模板.zip jquery-easyui-1.5后台模板.zip jquery-easyui-1.5后台模板.zip
该资源为jquery-easyui-1.5.5版本,包含easyui插件所依赖的js和css
jquery-easyui-1.3.1,兼容IE7.0
Jquery-Easyui-1.2.3以及帮助文档
UI设计在一个系统中的重要性是不容忽视的,我们开发人员要做到:让用户去控制...给你的Easyui-DataGrid 表头添加一点料吧 Easyui-Datagrid—表头灵活显示http://blog.csdn.net/u010293698/article/details/47956865
jquery-easyui-themes,easyui主题包,包含metro-blue metro-gray metro-green metro-orange metro-red ui-cupertino ui-dark-hive ui-pepper-grinder ui-sunny这些主题,具体的php使用方式见:...
用easyui-filebox上传Excel文件(ASP.NET MVC)。包括前端html代码和服务器端的C#代码。我写的,亲测可用。