使用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 相关文章推荐
用cssText批量修改样式
Aug 29 Javascript
jquery 仿QQ校友的DIV模拟窗口效果源码
Mar 24 Javascript
jQuery隔行变色与普通JS写法的对比
Apr 21 Javascript
js获取url参数值的两种方式
Sep 10 Javascript
jquery实现的鼠标拖动排序Li或Table
May 04 Javascript
用JavaScript实现页面重定向功能的教程
Jun 04 Javascript
JS中setTimeout的巧妙用法前端函数节流
Mar 24 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
Sep 04 Javascript
BootStrap select2 动态改变值的方法
Feb 10 Javascript
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
vue倒计时刷新页面不会从头开始的解决方法
Mar 03 Javascript
浅谈JS for循环中使用break和continue的区别
Jul 21 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
搜索引擎技术核心揭密
2006/10/09 PHP
php中的MVC模式运用技巧
2007/05/03 PHP
在PHP中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
PHP中使用循环实现的金字塔图形
2014/11/08 PHP
JavaScript 计算图片加载数量的代码
2011/01/01 Javascript
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
2011/07/28 Javascript
基于jQuery的图片左右无缝滚动插件
2012/05/23 Javascript
JavaScript中的getTime()方法使用详解
2015/06/10 Javascript
js基于cookie方式记住返回页面用法示例
2016/05/27 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
2016/08/17 Javascript
jQuery检查元素存在性(推荐)
2016/09/17 Javascript
jQuery实现简单的网页换肤效果示例
2016/09/18 Javascript
vue上传图片组件编写代码
2017/07/26 Javascript
ECMAscript 变量作用域总结概括
2017/08/18 Javascript
JS实现按钮添加背景音乐示例代码
2017/10/17 Javascript
js生成word中图片处理方法
2018/01/06 Javascript
浅谈Vue下使用百度地图的简易方法
2018/03/23 Javascript
解决layui的input独占一行的问题
2019/09/10 Javascript
Python 初始化多维数组代码
2008/09/06 Python
python使用range函数计算一组数和的方法
2015/05/07 Python
python使用clear方法清除字典内全部数据实例
2015/07/11 Python
python实时获取外部程序输出结果的方法
2019/01/12 Python
网易2016研发工程师编程题 奖学金(python)
2019/06/19 Python
Python算法中的时间复杂度问题
2019/11/19 Python
python几种常用功能实现代码实例
2019/12/25 Python
numba提升python运行速度的实例方法
2021/01/25 Python
CSS3的常见transformation图形变化用法小结
2016/05/13 HTML / CSS
UGG雪地靴荷兰官网:UGG荷兰
2016/09/09 全球购物
荷兰优雅女装网上商店:Heine
2016/11/14 全球购物
软件测试工程师结构化面试题库
2016/11/23 面试题
求职自荐信格式
2013/12/04 职场文书
简单英文演讲稿
2014/01/01 职场文书
大学学习个人的自我评价
2014/02/18 职场文书
解除同居协议书
2015/01/29 职场文书
python基础之文件处理知识总结
2021/05/23 Python
JavaCV实现照片马赛克效果
2022/01/22 Java/Android