使用layui实现树形结构的方法

树形结构在项目中使用是比较，下面我来介绍一种layui做树形结构的方法

树形结构需要获得的数据有父id，所以数据库需要有父id：

后台代码：

 @RequestMapping(value = \"/lists\")
public void getList( HttpServletResponse response) {
List list = this.companyService.getList();
String[] exclude={\"Groups\"};
JsonUtils.printJsonStringFromArrayObjectWithExclude(response, list, exclude);

}

 public List getList(){
ChangeDataSource.changeDataSource(DataSource.dataSource2);
String hql=\" from Company\";
return this.baseDao.exeQueryHql(hql);
} 

html中，需要引入js包

<div id=\"main\" class=\"layui-form\">
<table id=\"treeMenu\" class=\"layui-table\" style=\"margin-top: 2px;\">
<div style=\"clear:both;\"></div>
<tbody>
</tbody>
</table>
</div>
 <script src=\"../layui/layui.js\"></script>
 <script src=\"../js/jquery-1.7.2.js\"></script>
 <script src=\"../js/jquery-ui.js\"></script>
 <script src=\"../js/jquery.treetable.js\"></script>

 <script src=\"../js/jquery.treetablebox.js\"></script>

js中直接按照格式修改数据就可以了

layui.use([ \'layer\', \'element\'], function() {
var layer = layui.layer;
var tNodes = [];
init();
function init() {
var heads = [\"公司名称\", \"部门名称\", \"公司地址\", \"联系人\", \"联系电话\"];
$.ajax({
type: \"post\",
url: basePath + \"/company/lists\",
data:{\"token\":token},
async: true,
success: function(data) {
if(\"暂无数据\" == data) {
layer.msg(\'暂无数据请添加数据\', {
icon: 2,
time: 1000
});
} else {
data = eval(\"(\" + data + \")\");
var tNodes = \'[\';
for(var obj in data) {
var companyName = data[obj].companyName;
var departmentName = data[obj].departmentName;
var address = data[obj].address;
var linkman;
var contactNumber = data[obj].contactNumber;
if(data[obj].linkman.length > 10) {
linkman = data[obj].linkman.substring(0, 10) + \"...\";
} else {
linkman = data[obj].linkman;
if(linkman == \"\" || linkman == null || linkman == \"undefined\") {
linkman = \"暂无\";
}
}
if(departmentName == \"\" || departmentName == null || departmentName == \"undefined\") {
departmentName = \"暂无\";
} else {
departmentName = data[obj].departmentName;
}
if(data[obj].companyId == \"\" || data[obj].companyId == null) {
tNodes += \'{ id: \' + data[obj].companyId + \', pId: \' + data[obj].company + \', name: \"\' + companyName + \'\", td: [\"\' + departmentName + \'\",\"\' + address + \'\",\"\' + linkman + \'\",\"\' + contactNumber + \'\"] },\'
} else {
tNodes += \'{ id: \' + data[obj].companyId + \', pId: \' + data[obj].company + \', name: \"\' + companyName + \'\", td: [\"\' + departmentName + \'\",\"\' + address + \'\",\"\' + linkman + \'\",\"\' + contactNumber + \'\"] },\'
}
}
tNodes += \']\';
tNodes = tNodes.replace(\",]\", \"]\");
tNodes = tNodes.replace(/\\s+/g, \"\");
tNodes = tNodes.replace(/<\\/?.+?>/g, \"\");
tNodes = tNodes.replace(/[\\r\\n]/g, \"\");
$.TreeTable(\"treeMenu\", heads, eval(\"(\" + tNodes + \")\"));
$(\'#treeMenu\').treetable(\'expandAll\');
layui.use(\'form\', function() {
var form = layui.form;
form.render();
form.render(\'select\');
});
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
layer.msg(\'抱歉，服务器刚刚打了个盹！\', {
icon: 2,
time: 2000
});
}
});
}
});

以上这篇使用layui实现树形结构的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。