引入基础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，默认gettype: 'get',// 占位符placeholder: '修改默认提示信息',// 是否开启搜索功能：true/false，默认falsesearch: 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}]