java下拉框绑定数据_Java+layui 下拉框树形数据展示

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

选择后

下拉选择

前端代码:

引入文件,换成自己的目录就可以了

页面

*部 门

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");

}

});

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

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

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

后台返回参数统一封装,所以参数格式类似这种{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 children;

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

//查询部门树形数据

private List getDeptTree(){

List deptList = deptMapper.queryAllDept();

List 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 deptList) {

for (Department item : deptList){

if (department.getId().equals(item.getpId())){

if (department.getChildren() == null){

department.setChildren(new ArrayList());

}

department.getChildren().add(findChildren(item,deptList));

}

}

return department;

}