layui 树形下拉框（单选）基于layui2.5.6版本
引入基础css和JS脚本
<link rel="stylesheet" href="../../../js/layuiadmin/layui/css/layui.css" media="all">
<link rel="stylesheet" href="../../../js/layuiadmin/style/admin.css" media="all">
<script src="../../../js/jquery/jquery-1.11.3.min.js"></script>
<script src="../../../js/layuiadmin/layui/layui.js"></script>
正式HTML代码
<input type="text" id="tree" lay-filter="tree" class="layui-input">
JQuery
<script>
layui.config({
base: '../../../js/layuiadmin/layui/lay/modules/treeSelect/'//引入treeselect.js脚本
}).extend({
treeGrid:'treeSelect'
}).use(['jquery','treeSelect','layer','form'], function(){
var $=layui.jquery;
layer=layui.layer;
var treeSelect= layui.treeSelect;
treeSelect.render({
// 选择器
elem: '#tree',
// 数据
data: '../../../js/ztree/data3.json',//json数据
// 异步加载方式：get/post，默认get
type: 'get',
// 占位符
placeholder: '修改默认提示信息',
// 是否开启搜索功能：true/false，默认false
search: true,
// 点击回调
click: function(d){
console.log(d);
},
// 加载完成后的回调函数
success: function (d) {
console.log(d);
// 选中节点，根据id筛选
// treeSelect.checkNode('tree', 3);
// 获取zTree对象，可以调用zTree方法
// var treeObj = treeSelect.zTree('tree');
// console.log(treeObj);
// 刷新树结构
// treeSelect.refresh();
}
});
});
</script>
JSON数据
[
{
"id": 1,
"name": "zzz",
"open": true,
"children": [
{
"id": 2,
"name": "1",
"open": false,
"checked": true
},
{
"id": 3,
"name": "2",
"open": false,
"checked": true
},
{
"id": 17,
"name": "3z",
"open": false,
"checked": true
}
],
"checked": true
},
{
"id": 4,
"name": "评论",
"open": false,
"children": [
{
"id": 5,
"name": "留言列表",
"open": false,
"checked": false
},
{
"id": 6,
"name": "发表留言",
"open": false,
"checked": false
},
{
"id": 333,
"name": "233333",
"open": false,
"checked": false
}
],
"checked": false
},
{
"id": 10,
"name": "权限管理",
"open": false,
"children": [
{
"id": 8,
"name": "用户列表",
"open": false,
"children": [
{
"id": 40,
"name": "添加用户",
"open": false,
"url": null,
"title": "40",
"checked": false,
"level": 2,
"check_Child_State": 0,
"check_Focus": false,
"checkedOld": false,
"dropInner": false,
"drag": false,
"parent": false
},
{
"id": 41,
"name": "编辑用户",
"open": false,
"checked": false
},
{
"id": 42,
"name": "删除用户",
"open": false,
"checked": false
}
],
"checked": false
},
{
"id": 11,
"name": "角色列表",
"open": false,
"checked": false
},
{
"id": 13,
"name": "所有权限",
"open": false,
"children": [
{
"id": 34,
"name": "添加权限",
"open": false,
"checked": false
},
{
"id": 37,
"name": "编辑权限",
"open": false,
"checked": false
},
{
"id": 38,
"name": "删除权限",
"open": false,
"checked": false
}
],
"checked": false
},
{
"id": 15,
"name": "操作日志",
"open": false,
"checked": false
}
],
"checked": false
}
]
最后效果
相关知识
layui tree下拉框选择
layui 教程 => 干货
Flask搭建的后台系统脚手架
SSM + Layui实现的后台管理系统
虚拟树形选择器 vTree
花点时间搞的一款基于ThinkPHP8.x + Layui架构开发的通用后台管理系统
layui php移动端适配方案
自定义树状下拉框组件实现
vue树形选择器（树形下拉框）
jQuery MiniUI 开发教程 树形控件 创建树：树形结构（一）
网址: layui 树形下拉框（单选）基于layui2.5.6版本 https://m.huajiangbk.com/newsview2489517.html
| 上一篇: jeesite的treesele |
下一篇: Android多级树形选择列表案 |
