后端产生数据:
@PostMapping("treeDepartment")
@ResponseBody
public Object treeDepartment(){
Tools.logger.info("进入treeDepartment");
List<Department> departments=departmentService.findAllDepartments();
List<CompanyInfo> companyInfos=companyInfoService.findAllCompanyInfos();
List<Department> departmentsAll=new ArrayList<>();
for (int i = 0; i < companyInfos.size(); i++) {
Department department=new Department();
department.setDeptId(companyInfos.get(i).getCompInfoId());
department.setDeptName(companyInfos.get(i).getCompInfoName());
department.setDeptParentId("0");
departmentsAll.add(department);
}
for (int i = 0; i < departments.size(); i++) {
if(departments.get(i).getDeptParentId().equals("0")){
departments.get(i).setDeptParentId(departments.get(i).getCompInfoId());
}
}
departmentsAll.addAll(departments);
Tools.logger.info("离开treeDepartment");
return departmentsAll;
}
js方法:递归集合成树
/**
* 将list装换成tree
* @param {Object} myId 数据主键id
* @param {Object} pId 数据关联的父级id
* @param {Object} list list集合
*/
function listToTree(myId,pId,myName,list){
function exists(list, parentId){
for(var i=0; i<list.length; i++){
if (list[i][myId] == parentId) return true;
}
return false;
}
//树节点
var nodes = [];
// get the top level nodes
for(var i=0; i<list.length; i++){
var row = list[i];
row.title=row[myName];
if (!exists(list, row[pId])){
nodes.push(row);
}
}
var toDo = [];
for(var i=0; i<nodes.length; i++){
toDo.push(nodes[i]);
}
while(toDo.length){
var node = toDo.shift(); // the parent node
// get the children nodes
for(var i=0; i<list.length; i++){
var row = list[i];
row.title=row[myName];
if (row[pId] == node[myId]){
//var child = {id:row.id,text:row.name};
if (node.children){
node.children.push(row);
} else {
node.children = [row];
}
toDo.push(row);
}
}
}
return nodes;
}
使用layui生成树状图
jQuery.support.cors = true;
$.ajax({
type: 'POST',
dataType: 'json',
async: false,
url: ctx + '/treeDepartment',
data: {},
xhrFields: {
withCredentials: true
},
crossDomain: true,
contentType: 'application/x-www-form-urlencoded;charset=utf-8',
success: function (data) {
tree.render({
elem: '#deptParent' //绑定元素
, click: function (obj) {
console.log(obj.data); //得到当前点击的节点数据
console.log(obj.state); //得到当前节点的展开状态:open、close、normal
console.log(obj.elem); //得到当前节点元素
console.log(obj.data.children); //当前节点下是否有子节点
$('#deptParentId').val(obj.data.deptId);
$('#deptParentId1').val(obj.data.deptName);
}
, data: listToTree("deptId","deptParentId","deptName",data)
});
},
error: function () {
console.log('异常!');
}
});