新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
使用layui實現(xiàn)樹形結構的方法
樹形結構在項目中使用是比較,下面我來介紹一種layui做樹形結構的方法
創(chuàng)新互聯(lián)專注于企業(yè)網(wǎng)絡營銷推廣、網(wǎng)站重做改版、右玉網(wǎng)站定制設計、自適應品牌網(wǎng)站建設、H5頁面制作、商城網(wǎng)站開發(fā)、集團公司官網(wǎng)建設、成都外貿(mào)網(wǎng)站建設、高端網(wǎng)站制作、響應式網(wǎng)頁設計等建站業(yè)務,價格優(yōu)惠性價比高,為右玉等各大城市提供網(wǎng)站開發(fā)制作服務。
樹形結構需要獲得的數(shù)據(jù)有父id,所以數(shù)據(jù)庫需要有父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包
js中直接按照格式修改數(shù)據(jù)就可以了
layui.use([ 'layer', 'element'], function() { var layer = layui.layer; var tNodes = []; init(); function init() { var heads = ["公司名稱", "部門名稱", "公司地址", "聯(lián)系人", "聯(lián)系電話"]; $.ajax({ type: "post", url: basePath + "/company/lists", data:{"token":token}, async: true, success: function(data) { if("暫無數(shù)據(jù)" == data) { layer.msg('暫無數(shù)據(jù)請?zhí)砑訑?shù)據(jù)', { 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('抱歉,
以上這篇使用layui實現(xiàn)樹形結構的方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持創(chuàng)新互聯(lián)。
標題名稱:使用layui實現(xiàn)樹形結構的方法
網(wǎng)頁網(wǎng)址:http://www.dlmjj.cn/article/ijepgs.html