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
    }
  ]

最后效果

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值