@GetMapping("/tree") @ResponseBody public Tree<DeptDO> tree() { Tree<DeptDO> tree = new Tree<DeptDO>(); tree = sysDeptService.getTree(); return tree; }
控制层代码
@Override public Tree<DeptDO> getTree() { List<Tree<DeptDO>> trees = new ArrayList<Tree<DeptDO>>(); List<DeptDO> SysDepts = sysDeptMapper.list(new HashMap<String,Object>()); for (DeptDO SysDept : SysDepts) { Tree<DeptDO> tree = new Tree<DeptDO>(); tree.setId(SysDept.getDeptNo().toString()); tree.setParentId(SysDept.getParentNo().toString()); tree.setText(SysDept.getDeptName()); Map<String, Object> state = new HashMap<>(); state.put("opened", true); tree.setState(state); trees.add(tree); } // 默认顶级菜单为0,根据数据库实际情况调整 Tree<DeptDO> t = BuildTree.build(trees); return t; }service层代码
package com.zsCat.common.base; import com.alibaba.fastjson.JSON; import java.io.Serializable; import java.util.ArrayList; import java.util.List; import java.util.Map; /** * tree TODO <br> * * @author kangxu2 2017-1-7 * */ public class Tree<T> implements Serializable { /** * 节点ID */ private String id; /** * 显示节点文本 */ private String text; /** * 节点状态,open closed */ private Map<String, Object> state; /** * 节点是否被选中 true false */ private boolean checked = false; /** * 节点属性 */ private Map<String, Object> attributes; /** * 节点的子节点 */ private List<Tree<T>> children = new ArrayList<Tree<T>>(); /** * 父ID */ private String parentId; /** * 是否有父节点 */ private boolean hasParent = false; /** * 是否有子节点 */ private boolean hasChildren = false; public String getId() { return id; } public void setId(String id) { this.id = id; } public String getText() { return text; } public void setText(String text) { this.text = text; } public Map<String, Object> getState() { return state; } public void setState(Map<String, Object> state) { this.state = state; } public boolean isChecked() { return checked; } public void setChecked(boolean checked) { this.checked = checked; } public Map<String, Object> getAttributes() { return attributes; } public void setAttributes(Map<String, Object> attributes) { this.attributes = attributes; } public List<Tree<T>> getChildren() { return children; } public void setChildren(List<Tree<T>> children) { this.children = children; } public boolean isHasParent() { return hasParent; } public void setHasParent(boolean isParent) { this.hasParent = isParent; } public boolean isHasChildren() { return hasChildren; } public void setChildren(boolean isChildren) { this.hasChildren = isChildren; } public String getParentId() { return parentId; } public void setParentId(String parentId) { this.parentId = parentId; } public Tree(String id, String text, Map<String, Object> state, boolean checked, Map<String, Object> attributes, List<Tree<T>> children, boolean isParent, boolean isChildren, String parentID) { super(); this.id = id; this.text = text; this.state = state; this.checked = checked; this.attributes = attributes; this.children = children; this.hasParent = isParent; this.hasChildren = isChildren; this.parentId = parentID; } public Tree() { super(); } @Override public String toString() { return JSON.toJSONString(this); } }
自定义树(封装返回的数据)
package com.zsCat.common.common.utils; import com.zsCat.common.base.Tree; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; public class BuildTree { public static <T> Tree<T> build(List<Tree<T>> nodes) { if (nodes == null) { return null; } List<Tree<T>> topNodes = new ArrayList<Tree<T>>(); for (Tree<T> children : nodes) { String pid = children.getParentId(); if (pid == null || "0".equals(pid)) { topNodes.add(children); continue; } for (Tree<T> parent : nodes) { String id = parent.getId(); if (id != null && id.equals(pid)) { parent.getChildren().add(children); children.setHasParent(true); parent.setChildren(true); continue; } } } Tree<T> root = new Tree<T>(); if (topNodes.size() == 1) { root = topNodes.get(0); } else { root.setId("0"); root.setParentId(""); root.setHasParent(false); root.setChildren(true); root.setChecked(true); root.setChildren(topNodes); root.setText("最外层文件夹"); Map<String, Object> state = new HashMap<>(); state.put("opened", true); root.setState(state); } return root; } public static <T> List<Tree<T>> buildList(List<Tree<T>> nodes, String idParam) { if (nodes == null) { return null; } List<Tree<T>> topNodes = new ArrayList<Tree<T>>(); for (Tree<T> children : nodes) { String pid = children.getParentId(); if (pid == null || idParam.equals(pid)) { topNodes.add(children); continue; } for (Tree<T> parent : nodes) { String id = parent.getId(); if (id != null && id.equals(pid)) { parent.getChildren().add(children); children.setHasParent(true); parent.setChildren(true); continue; } } } return topNodes; } }
工具类操作数据到树中
create table CREATE TABLE `sys_dept` ( `dept_id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT 'ID', `dept_no` varchar(50) DEFAULT NULL COMMENT '机构编码', `parent_no` varchar(50) DEFAULT NULL COMMENT '父机构编码', `dept_name` varchar(255) DEFAULT NULL COMMENT '机构名称', `sort` int(11) DEFAULT NULL COMMENT '排序', `type` varchar(50) DEFAULT NULL COMMENT '机构类型', `isUse` tinyint(4) DEFAULT NULL COMMENT '是否启用 1:启用,0:停用', `isEngineering` tinyint(4) DEFAULT NULL COMMENT '是否为工程部0不是1是', `pattern` varchar(50) DEFAULT NULL COMMENT '模式、在isEngineering基础上会有', `remarks` varchar(255) DEFAULT NULL COMMENT '备注', `del_flag` tinyint(4) DEFAULT '0' COMMENT '是否删除 -1:已删除 0:正常', `create_by` varchar(50) DEFAULT NULL COMMENT '创建人', `create_date` datetime DEFAULT NULL COMMENT '创建时间', `update_by` varchar(50) DEFAULT NULL COMMENT '修改人', `update_date` datetime DEFAULT NULL COMMENT '修改时间', `rank` int(11) DEFAULT NULL COMMENT '级别', PRIMARY KEY (`dept_id`) ) ENGINE=InnoDB AUTO_INCREMENT=32 DEFAULT CHARSET=utf8 COMMENT='部门管理'
<select id="list" resultType="com.zscat.shop.domain.DeptDO"> select `dept_id`,`dept_no`,`parent_no`,`dept_name`,`sort`,`type`,`isUse`,`isEngineering`,`pattern`,`remarks`,`del_flag`,`create_by`,`create_date`,`update_by`,`update_date`,`rank` from sys_dept <where> <if test="deptId != null and deptId != ''"> and dept_id = #{deptId} </if> <if test="deptNo != null and deptNo != ''"> and dept_no = #{deptNo} </if> <if test="parentNo != null and parentNo != ''"> and parent_no = #{parentNo} </if> <if test="deptName != null and deptName != ''"> and dept_name = #{deptName} </if> <if test="sort != null and sort != ''"> and sort = #{sort} </if> <if test="type != null and type != ''"> and type = #{type} </if> <if test="isuse != null and isuse != ''"> and isUse = #{isuse} </if> <if test="isengineering != null and isengineering != ''"> and isEngineering = #{isengineering} </if> <if test="pattern != null and pattern != ''"> and pattern = #{pattern} </if> <if test="remarks != null and remarks != ''"> and remarks = #{remarks} </if> <if test="delFlag != null and delFlag != ''"> and del_flag = #{delFlag} </if> <if test="createBy != null and createBy != ''"> and create_by = #{createBy} </if> <if test="createDate != null and createDate != ''"> and create_date = #{createDate} </if> <if test="updateBy != null and updateBy != ''"> and update_by = #{updateBy} </if> <if test="updateDate != null and updateDate != ''"> and update_date = #{updateDate} </if> <if test="rank != null and rank != ''"> and rank = #{rank} </if> </where> <choose> <when test="sort != null and sort.trim() != ''"> order by ${sort} ${order} </when> <otherwise> order by dept_id desc </otherwise> </choose> <if test="offset != null and limit != null"> limit #{offset}, #{limit} </if> </select>
数据库结构 建表语句 和查询语句
页面和js
<link href="/css/plugins/jsTree/style.min.css" rel="stylesheet">
<link href="/css/plugins/jqTreeGrid/jquery.treegrid.css" rel="stylesheet">
<link href="/css/plugins/bootstrap-table/bootstrap-table.min.css" th:href="@{/css/plugins/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet">
<script src="/js/plugins/jsTree/jstree.min.js"></script>
<script src="/js/plugins/jqTreeGrid/jquery.treegrid.min.js"></script> <script src="/js/plugins/jqTreeGrid/jquery.treegrid.extension.js"></script> <script src="/js/plugins/jqTreeGrid/jquery.treegrid.bootstrap3.js"></script>
<script src="/js/jquery.min.js?v=2.1.4"></script> <script src="/js/bootstrap.min.js?v=3.3.6"></script>
<body class="gray-bg"> <div class="wrapper wrapper-content "> <div class="row"> <div class="col-sm-3"> <div class="ibox ibox-body"> <div class="ibox-title"> <h5>全部分类</h5> </div> <div class="ibox-content"> <div id="jstree"></div> </div> </div> </div> </div> </div>
var prefix = "/ERP/commodity" //请求前缀 $(function() { getTreeData(); load(); }); //从后台获取树数据 function getTreeData() { $.ajax({ type : "GET", url : "/system/sysDept/tree", success : function(tree) { loadTree(tree); } }); } //加载数据 function loadTree(tree) {
$('#jstree').jstree("destroy"); //销毁树,从新加载 $('#jstree').jstree({'core' : {'data' : tree},"plugins" : [ "search" ]});$('#jstree').jstree().open_all();}
$('#jstree').on("changed.jstree", function(e, data) { //方法1 if (data.selected == 0) { var opt = { query : { deptNo : '', } } $('#exampleTable').bootstrapTable('refresh', opt); } else { var opt = { query : { deptNo : data.selected[0], } } $('#exampleTable').bootstrapTable('refresh',opt); } });
$('#jstree').on("changed.jstree", function(e, data) { //方法2 parent.loadPosition(data.selected); var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引 parent.layer.close(index); });
给树结构添加的选择事件