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


Posted in Javascript onSeptember 20, 2019

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

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

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

后台代码:

@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实现树形结构的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
跨浏览器的设置innerHTML方法
Sep 18 Javascript
js类 from qq
Nov 13 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
Jun 26 Javascript
Spring MVC中Ajax实现二级联动的简单实例
Jul 06 Javascript
bootstrap提示标签、提示框实现代码
Dec 28 Javascript
用jQuery实现优酷首页轮播图
Jan 09 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
Mar 09 Javascript
vue实现学生信息管理系统
May 30 Javascript
js实现简单音乐播放器
Jun 30 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
Nov 12 Javascript
如何使用 vue-cli 创建模板项目
Nov 19 Vue.js
Vue.js中v-bind指令的用法介绍
Mar 13 Vue.js
生成无限制的微信小程序码的示例代码
Sep 20 #Javascript
浅谈layui分页控件field参数接收对象的问题
Sep 20 #Javascript
vuex根据不同的用户权限展示不同的路由列表功能
Sep 20 #Javascript
微信小程序如何播放腾讯视频的实现
Sep 20 #Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 #Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
Sep 20 #Javascript
微信用户访问小程序的登录过程详解
Sep 20 #Javascript
You might like
Smarty模板快速入门
2007/01/04 PHP
php中的时间显示
2007/01/18 PHP
Yii2超好用的日期和时间组件(值得收藏)
2016/05/05 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
Javascript实例教程(19) 使用HoTMetal(5)
2006/12/23 Javascript
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
2010/03/18 Javascript
jquery 模拟类搜索框自动完成搜索提示功能(改进)
2010/05/24 Javascript
HTML Color Picker(js拾色器效果)
2013/08/27 Javascript
JavaScript实现简单图片滚动附源码下载
2014/06/17 Javascript
JavaScript中数组去除重复的三种方法
2016/04/22 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
2016/05/23 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
2016/10/30 Javascript
微信小程序 弹窗自定义实例代码
2017/03/08 Javascript
Bootstrap Table使用整理(四)之工具栏
2017/06/09 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
2017/11/06 Javascript
Element Input组件分析小结
2018/10/11 Javascript
微信小程序使用swiper组件实现层叠轮播图
2018/11/04 Javascript
对layui中的onevent 和event的使用详解
2019/09/06 Javascript
uni-app微信小程序登录授权的实现
2020/05/22 Javascript
vue 全局封装loading加载教程(全局监听)
2020/11/05 Javascript
python获取网页状态码示例
2014/03/30 Python
wxPython框架类和面板类的使用实例
2014/09/28 Python
linux环境下python中MySQLdb模块的安装方法
2017/06/16 Python
python随机数分布random测试
2018/08/27 Python
解决Python运行文件出现out of memory框的问题
2018/12/03 Python
详解python环境安装selenium和手动下载安装selenium的方法
2020/03/17 Python
Python标准库:内置函数max(iterable, *[, key, default])说明
2020/04/25 Python
美国在线乐器和设备商店:Musician’s Friend
2018/07/06 全球购物
Marc O’Polo俄罗斯官方在线商店:德国高端时尚品牌
2019/12/26 全球购物
大学军训感言200字
2014/02/26 职场文书
小学生勤俭节约演讲稿
2014/08/28 职场文书
2015年技术工作总结范文
2015/04/20 职场文书
班主任寄语2016
2015/12/04 职场文书
2016预备党员培训心得体会
2016/01/08 职场文书
详解分布式系统中如何用python实现Paxos
2021/05/18 Python
宫崎骏十大动画电影,宫崎骏好看的动画电影排名
2022/03/22 日漫