Java+layui 下拉框树形数据展示

这两天做一个小东西,记录下自己使用layui遇到的问题和解决方案,先看最终的效果

选择后
下拉选择

前端代码:
引入文件,换成自己的目录就可以了

<link rel="stylesheet" href="../../lib/layui/css/layui.css">
<script type="text/javascript" src="../../lib/layui/layui.js" charset="utf-8"></script>

页面

<div class="layui-form-item">
                <label  class="layui-form-label">
                    <span class="x-red">*</span>部&emsp;门
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="tree" name="dept_id" lay-filter="tree" class="layui-input" required="" lay-verify="required">
                </div>
            </div>

js部分:
下载treeSelect.js

layui.config({
    base: '../../js/' //treeSelect.js文件所在位置
}).extend({
    treeSelect: 'treeSelect/treeSelect'  // /所在文件夹/文件名称
}).use(['treeSelect','form'], function () {
    var treeSelect= layui.treeSelect;
    treeSelect.render({
        elem: '#tree',// 选择器
        data: '/xxx/', //请求url
        type:'post',
        placeholder: '请选择部门',// 占位符
        search: true,// 是否开启搜索功能：true/false，默认false
        click: function(d){// 点击回调
            console.log(d);
        },
        // 加载完成后的回调函数
        success: function (d) {
            console.log(d);
            //回显数据
            var editUserInfo = JSON.parse(sessionStorage.getItem("editUserInfo"));
            if (editUserInfo){
                console.log(editUserInfo);
                console.log(editUserInfo.dept_id);
                treeSelect.checkNode('tree', editUserInfo.dept_id);
            }
            window.sessionStorage.removeItem("editUserInfo");
        }
    });

这样前端的代码基本完毕了,这里说下遇到的两个问题:

1. 如果部门根节点只有一个的话,根节点不显示图标,我这里的解决方案是添加样式强行添加图标

span.button.root_open:before{content:"\e625";color: black;}
span.button.root_close:before{content:"\e623";color: black; }
span.button.center_close:before
span.button.center_open:before

2. 后台返回参数统一封装,所以参数格式类似这种{code,msg,datas:[] },而datas才是我们需要渲染的参数,这里是改的treeSelect.js里的代码,只需要添加一行就可以了

init: function () {
        $.ajax({
          url: data,
          type: type,
          headers: headers,
          dataType: 'json',
          success: function (d) {
              d = d.outParam.deptTree; //修改的是这里,将返回参数取出重新赋值就可以了
            DATA = d;
            a.hideElem().input().toggleSelect().loadCss().preventEvent();
            $.fn.zTree.init($('#' + TREE_SELECT_BODY_ID), a.setting(), d);
            TREE_OBJ = $.fn.zTree.getZTreeObj(TREE_SELECT_BODY_ID);
            if (search) {
              a.searchParam();
            }
            a.configStyle();
            if (success) {
              var obj = {
                treeId: TREE_SELECT_ID,
                data: d
              };
              success(obj);
            }
          }
        });
        return a;
      }

---

后台部分:
新建部门对象,这里也设置属性open,控制节点的展开和关闭,不过treeSelect回显数据时,如果选中的是子部门,父级部门会自动展开.

public class Department {
    private String id;
    private String code;
    private String name;
    private String pId;
    private Date createTime;
    private Date updateTime;
    private String idPath;
    private String state;
    private List<Department> children;

使用递归查询所有部门信息

//查询部门树形数据
    private List<Department> getDeptTree(){
        List<Department> deptList = deptMapper.queryAllDept();
        List<Department> deptTree = new ArrayList<>();
        for (Department department : deptList){
            if (StringUtils.isBlank(department.getpId())){
                deptTree.add(findChildren(department,deptList));
            }
        }
        return deptTree;
    }

    //递归查询子部门
    private Department findChildren(Department department, List<Department> deptList) {
        for (Department item : deptList){
            if (department.getId().equals(item.getpId())){
                if (department.getChildren() == null){
                    department.setChildren(new ArrayList<Department>());
                }
                department.getChildren().add(findChildren(item,deptList));
            }
        }
        return department;
    }