使用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 相关文章推荐
jQuery ctrl+Enter shift+Enter实现代码
Feb 07 Javascript
javascript克隆对象深度介绍
Nov 20 Javascript
Jquery动态进行图片缩略的原理及实现
Aug 13 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
May 08 Javascript
JS实现从连接中获取youtube的key实例
Jul 02 Javascript
基于javascript实现泡泡大冒险网页版小游戏
Mar 23 Javascript
JS实现的打字机效果完整实例
Jun 20 Javascript
jQuery序列化表单成对象的简单实现
Nov 29 Javascript
详解Javascript数据类型的转换规则
Dec 12 Javascript
JS给按钮添加跳转功能类似a标签
May 30 Javascript
vue-ajax小封装实例
Sep 18 Javascript
深入解析vue 源码目录及构建过程分析
Apr 24 Javascript
生成无限制的微信小程序码的示例代码
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
PHP变量内存分配问题记录整理
2013/11/27 PHP
PHP经典面试题集锦
2015/03/19 PHP
PHP加密技术的简单实现
2016/09/04 PHP
jquery 3D球状导航的文章分类
2010/07/06 Javascript
Javascript中的this绑定介绍
2011/09/22 Javascript
JS获取农历日期具体实例
2013/11/14 Javascript
JS正则表达式验证数字代码
2014/01/28 Javascript
JavaScript基础教程之alert弹出提示框实例
2014/10/16 Javascript
JavaScript获取页面中第一个锚定文本的方法
2015/04/03 Javascript
$.extend 的一个小问题
2015/06/18 Javascript
Jquery基础教程之DOM操作
2015/08/19 Javascript
jquery验证邮箱格式是否正确实例讲解
2015/11/16 Javascript
浅谈js中子页面父页面方法 变量相互调用
2016/08/04 Javascript
微信小程序 自己制作小组件实例详解
2016/12/22 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
2018/12/14 Javascript
JavaScript Array对象使用方法解析
2019/09/24 Javascript
JS跨浏览器解析XML应用过程详解
2020/10/16 Javascript
python中WSGI是什么,Python应用WSGI详解
2017/11/24 Python
Python Pexpect库的简单使用方法
2019/01/29 Python
使用Python对Dicom文件进行读取与写入的实现
2020/04/20 Python
Python多线程threading创建及使用方法解析
2020/06/17 Python
Python3.7安装pyaudio教程解析
2020/07/24 Python
基于PyTorch中view的用法说明
2021/03/03 Python
英国家庭、花园、汽车和移动解决方案:Easylife Group
2018/05/23 全球购物
送给他或她的礼物:FUN.com
2018/08/17 全球购物
俄罗斯金苹果网上化妆品和香水商店:Goldapple
2019/12/01 全球购物
英语专业个人求职自荐信
2013/09/21 职场文书
资深财务管理人员自我评价
2013/09/22 职场文书
自我评价的范文
2014/02/02 职场文书
校园安全教育广播稿
2014/02/17 职场文书
2014年财务人员工作总结
2014/11/11 职场文书
2014小学数学教研组工作总结
2014/12/06 职场文书
社区艾滋病宣传活动总结
2015/05/07 职场文书
迎新生晚会主持词
2015/06/30 职场文书
2019学校运动会开幕词
2019/05/13 职场文书
Python实现文本文件拆分写入到多个文本文件的方法
2021/04/18 Python