溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
樹形結構在項目中使用是比較，下面我來介紹一種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" > <div ></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實現樹形結構的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
