javascript 【layui-tree树形组件】ajax动态获取数据

工作里尝试着把mysql数据表中有父子关系的数据转换成json格式，传到前端来刷新，简单记录一下

先看数据表，且听我大白话胡咧咧： 几条数据有父子关系，父对子是1对多的关系 parent表示父id parent=0 表示没有父级（辈分最高！） status=0表示其下没有子辈 status=1表示有孩子

后端java代码：

public void getcltypelist() {

List list = cl_type.dao.find("select * from cl_type");

ArrayList data = new ArrayList();

JSONObject object2 = new JSONObject();

for(int i=0;i

if(list.get(i).get("parent").toString().contentEquals("0")) {

JSONObject object3 = new JSONObject();

ArrayList object4 = new ArrayList();

if(list.get(i).get("status").toString().contentEquals("1")) {

object3.put("id",list.get(i).get("id"));

object3.put("title",list.get(i).get("name").toString());

System.out.println("getChildJSON---"+i);

object4=getChildJSON(list.get(i).get("id").toString());

System.out.println("back---");

System.out.println(object4);

object3.put("children",object4);

}else {

object3.put("id",list.get(i).get("id"));

object3.put("title",list.get(i).get("name").toString());

}

data.add(object3);

System.out.println("data--");

System.out.println(data);

}

}

System.out.println(data);

renderJson(IResult.ok(data));

}

public ArrayList getChildJSON(String id) {

System.out.println("start getChildJSON ---"+ id);

List list = cl_type.dao.find("select * from cl_type where parent = ?",id);

ArrayList data = new ArrayList();

for(int i=0;i

JSONObject object3 = new JSONObject();

ArrayList object4 = new ArrayList();

if(list.get(i).get("status").toString().contentEquals("1")) {

object3.put("id",list.get(i).get("id"));

object3.put("title",list.get(i).get("name").toString());

System.out.println("getChildJSON---"+i);

object4=getChildJSON(list.get(i).get("id").toString());

System.out.println(object4);

object3.put("children",object4);

}else {

object3.put("id",list.get(i).get("id"));

object3.put("title",list.get(i).get("name").toString());

}

data.add(object3);

}

return data;

}

Result类

在这里插入代码片

返回数据： {“msg”:null,“code”:0,“data”:[{“id”:1,“title”:“材料”,“children”:[{“id”:3,“title”:“矿物质颜料”,“children”:[{“id”:6,“title”:“紫粉霜”},{“id”:7,“title”:“樟丹”}]},{“id”:4,“title”:“植物质颜料”},{“id”:5,“title”:“油料”}]},{“id”:2,“title”:“工具”}]}

前端代码： html

javascript

layui.use(['tree', 'util','layer'], function(){

var tree = layui.tree

,layer = layui.layer

,util = layui.util

$.ajax({

type: "post",

url: "/cl/getcltypelist",

dataType: "json",

success: function (result) {

if(result.code == 0){

tree.render({

elem: '#typetree'

,data: result.data

,onlyIconControl: true

,checkbox:false

,edit: ['add', 'update', 'del']

,click: function(obj){

var data = obj.data;

layer.msg('状态：'+ obj.state + '
节点数据：' + JSON.stringify(data));

}

});

}else{

alert("请重试。");

}

}

});

});

页面效果：

参考链接

 您阅读本篇文章共花了：