基于Layui与jQuery.treetable实现树形表格的方法

Layui树形表格实现概述

在Web项目开发中，树形结构的数据展示需求较为常见。本文将介绍一种基于Layui框架结合jQuery.treetable插件来实现树形表格的具体方案。

数据层要求：父ID字段

要实现层级数据的正确展示，后端返回的数据结构中必须包含标识层级关系的字段，通常称为父ID（parentId）。因此，数据库设计时需确保相关表结构支持存储该字段。

后端接口负责提供层级数据，具体代码实现如下：

 @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页面中，需要引入必要的JavaScript库文件，包括Layui核心包以及jQuery.treetable相关的插件脚本。

<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>

前端JavaScript代码主要负责初始化表格并处理数据。通过Ajax请求获取后端返回的JSON数据后，需按照插件要求的格式对数据进行解析和处理，最后调用初始化方法渲染树形结构。

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及相关插件实现树形表格的完整流程，供开发者参考。