怎么在layui中使用tree组件
怎么在layui中使用tree组件？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。
成都创新互联于2013年创立，先为进贤等服务建站，进贤等地企业，进行企业商务咨询服务。为进贤企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
layui是什么
layui是一款采用自身模块规范编写的前端UI框架，它遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，适合新手，并且它还提供了丰富的内置模块，他们皆可通过模块化的方式按需加载，从核心代码到API的每一处细节都经过精心雕琢，非常适合界面的快速开发，能够作为PC网页端后台系统与前台界面的速成开发方案。
HTML：
获取选中节点数据
勾选指定节点
重载实例
搜索
JavaScript：
layui.use(['tree', 'util'], function(){
var $ = layui.$;
var tree = layui.tree
,layer = layui.layer
,util = layui.util
//模拟数据
,data1 = [{
title: '江西'
,id: 1
,children: [{
title: '南昌'
,id: 1000
,children: [{
title: '青山湖区'
,id: 10001
},{
title: '高新区'
,id: 10002
}]
},{
title: '九江'
,id: 1001
},{
title: '赣州'
,id: 1002
}]
},{
title: '广西'
,id: 2
,children: [{
title: '南宁'
,id: 2000
},{
title: '桂林'
,id: 2001
}]
},{
title: '陕西'
,id: 3
,children: [{
title: '西安'
,id: 3000
},{
title: '延安'
,id: 3001
}]
},{
title: '四川（可跳转）'
,id: 4
,href: 'https://www.layui.com/'
,children: [{
title: '成都'
,id: 3000
,checked: true //默认选中
},{
title: '雅安'
,id: 3001
}]
}];
//常规用法
tree.render({
elem: '#test1' //默认是点击节点可进行收缩
,data: data1
,id: 'demoId1'
,showCheckbox: true //是否显示复选框
,isJump: true //是否允许点击节点时弹出新窗口跳转
,showLine: true //是否开启连接线
,edit: ['add', 'update', 'del'] //开启操作节点的图标
,click: function(obj){
var data = obj.data; //获取当前点击的节点数据
layer.msg('状态：'+ obj.state + '
节点数据：' + JSON.stringify(data));
}
});
//按钮事件
util.event('lay-demo', {
getChecked: function(othis){
var checkedData = tree.getChecked('demoId1'); //获取选中节点的数据
layer.alert(JSON.stringify(checkedData), {shade:0});
console.log(checkedData);
}
,setChecked: function(){
tree.setChecked('demoId1', [3, 4]); //勾选指定节点
}
,reload: function(){
//重载实例
tree.reload('demoId1', {});
}
});
//搜索节点值
$('#btn_query').click(function () {
var name = $("#tree_name").val(); //搜索值
var elem = $("#test1").find('.layui-tree-txt').css('color', ''); //搜索文本与设置默认颜色
if (!name) {
return; //无搜索值返回
}
elem.filter(':contains(' + name + ')').css('color', '#FFB800'); //搜索文本并设置标志颜色
elem.parents('.layui-tree-pack').prev().find('.layui-tree-iconClick').click(); //展开选项
//console.log(elem);
})
});看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注创新互联行业资讯频道，感谢您对创新互联的支持。
文章名称：怎么在layui中使用tree组件
分享地址：
http://kswjz.com/article/jcddso.html
