热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

今天小编就为大家分享一篇使用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包

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(/<\/&#63;.+&#63;>/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实现树形结构的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。


推荐阅读
  • 本文介绍了Java后台Jsonp处理方法及其应用场景。首先解释了Jsonp是一个非官方的协议,它允许在服务器端通过Script tags返回至客户端,并通过javascript callback的形式实现跨域访问。然后介绍了JSON系统开发方法,它是一种面向数据结构的分析和设计方法,以活动为中心,将一连串的活动顺序组合成一个完整的工作进程。接着给出了一个客户端示例代码,使用了jQuery的ajax方法请求一个Jsonp数据。 ... [详细]
  • 本文介绍了在开发Android新闻App时,搭建本地服务器的步骤。通过使用XAMPP软件,可以一键式搭建起开发环境,包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表,并设置相应的属性。最后,给出了创建new表的SQL语句。这个教程适合初学者参考。 ... [详细]
  • 本文介绍了使用AJAX的POST请求实现数据修改功能的方法。通过ajax-post技术,可以实现在输入某个id后,通过ajax技术调用post.jsp修改具有该id记录的姓名的值。文章还提到了AJAX的概念和作用,以及使用async参数和open()方法的注意事项。同时强调了不推荐使用async=false的情况,并解释了JavaScript等待服务器响应的机制。 ... [详细]
  • 本文介绍了高校天文共享平台的开发过程中的思考和规划。该平台旨在为高校学生提供天象预报、科普知识、观测活动、图片分享等功能。文章分析了项目的技术栈选择、网站前端布局、业务流程、数据库结构等方面,并总结了项目存在的问题,如前后端未分离、代码混乱等。作者表示希望通过记录和规划,能够理清思路,进一步完善该平台。 ... [详细]
  • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
  • iOS超签签名服务器搭建及其优劣势
    本文介绍了搭建iOS超签签名服务器的原因和优势,包括不掉签、用户可以直接安装不需要信任、体验好等。同时也提到了超签的劣势,即一个证书只能安装100个,成本较高。文章还详细介绍了超签的实现原理,包括用户请求服务器安装mobileconfig文件、服务器调用苹果接口添加udid等步骤。最后,还提到了生成mobileconfig文件和导出AppleWorldwideDeveloperRelationsCertificationAuthority证书的方法。 ... [详细]
  • 本文介绍了如何使用jQuery和AJAX来实现动态更新两个div的方法。通过调用PHP文件并返回JSON字符串,可以将不同的文本分别插入到两个div中,从而实现页面的动态更新。 ... [详细]
  • Node.js学习笔记(一)package.json及cnpm
    本文介绍了Node.js中包的概念,以及如何使用包来统一管理具有相互依赖关系的模块。同时还介绍了NPM(Node Package Manager)的基本介绍和使用方法,以及如何通过NPM下载第三方模块。 ... [详细]
  • VScode格式化文档换行或不换行的设置方法
    本文介绍了在VScode中设置格式化文档换行或不换行的方法,包括使用插件和修改settings.json文件的内容。详细步骤为:找到settings.json文件,将其中的代码替换为指定的代码。 ... [详细]
  • 使用在线工具jsonschema2pojo根据json生成java对象
    本文介绍了使用在线工具jsonschema2pojo根据json生成java对象的方法。通过该工具,用户只需将json字符串复制到输入框中,即可自动将其转换成java对象。该工具还能解析列表式的json数据,并将嵌套在内层的对象也解析出来。本文以请求github的api为例,展示了使用该工具的步骤和效果。 ... [详细]
  • Java验证码——kaptcha的使用配置及样式
    本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置,包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]
  • 使用正则表达式爬取36Kr网站首页新闻的操作步骤和代码示例
    本文介绍了使用正则表达式来爬取36Kr网站首页所有新闻的操作步骤和代码示例。通过访问网站、查找关键词、编写代码等步骤,可以获取到网站首页的新闻数据。代码示例使用Python编写,并使用正则表达式来提取所需的数据。详细的操作步骤和代码示例可以参考本文内容。 ... [详细]
  • 本文介绍了Android中的assets目录和raw目录的共同点和区别,包括获取资源的方法、目录结构的限制以及列出资源的能力。同时,还解释了raw目录中资源文件生成的ID,并说明了这些目录的使用方法。 ... [详细]
  • Android实战——jsoup实现网络爬虫,糗事百科项目的起步
    本文介绍了Android实战中使用jsoup实现网络爬虫的方法,以糗事百科项目为例。对于初学者来说,数据源的缺乏是做项目的最大烦恼之一。本文讲述了如何使用网络爬虫获取数据,并以糗事百科作为练手项目。同时,提到了使用jsoup需要结合前端基础知识,以及如果学过JS的话可以更轻松地使用该框架。 ... [详细]
  • 从零基础到精通的前台学习路线
    随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ... [详细]
author-avatar
kingsharedn_594
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有