使用
下载Layui-TreeSelect源码
模块下载地址:https://gitee.com/wujiawei0926/treeselect
获取核心 js 文件 treeSelect.js
文件目录 /module/treeSelect/treeSelect.js
将模块 正确的引用到页面中
例如:
<script src="/static/layuiadmin/layui/layui.js"></script>
<script>
layui.config({
base: '/static/layuiadmin/' //静态资源所在路径
}).extend({
index: 'lib/index' //主入口模块
}).use(['index', 'form','contlist','tree','treeSelect'], function(){
var $ = layui.$ ,form = layui.form,treeSelect= layui.treeSelect;
示例demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>树形下拉选择器</title>
<link rel="stylesheet" href="assets/layui/css/layui.css">
<script src="assets/layui/layui.js"></script>
<script src="module/common.js"></script>
<style wjw>
</style>
</head>
<body style="padding: 25px;">
<div class="layui-container layui-form">
<div class="layui-form-item">
<label for="" class="layui-form-label">使用文档</label>
<div class="layui-input-block">
<a class="layui-btn layui-btn-primary" href="https://wujiawei0926.gitee.io/treeselect/docs/doc.html">点击打开</a>
</div>
</div>
<div class="layui-form-item">
<label for="" class="layui-form-label">测试1的相关操作</label>
<div class="layui-input-block">
<button class="layui-btn" id="btnDestory">销毁</button>
<button class="layui-btn" id="btnRevoke">撤销选中节点</button>
</div>
</div>
<div class="layui-form-item">
<label for="" class="layui-form-label">测试1</label>
<div class="layui-input-block">
<input type="text" id="tree" lay-filter="tree" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label for="" class="layui-form-label">测试2</label>
<div class="layui-input-block">
<input type="text" id="tree2" lay-filter="tree2" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label for="" class="layui-form-label">layer</label>
<div class="layui-input-block">
<button id="layer" class="layui-btn">点击打开</button>
</div>
</div>
</div>
<script>
layui.use(['treeSelect', 'form', 'layer'], function () {
var treeSelect= layui.treeSelect,
form = layui.form,
$ = layui.jquery,
layer = layui.layer;
treeSelect.render({
// 选择器
elem: '#tree',
// 数据
data: 'data/data3.json',
// 请求头
headers: {},
// 异步加载方式:get/post,默认get
type: 'get',
// 占位符
placeholder: '修改默认提示信息',
// 是否开启搜索功能:true/false,默认false
search: true,
// 一些可定制的样式
style: {
folder: {
enable: true
},
line: {
enable: true
}
},
// 点击回调
click: function(d){
console.log(d);
},
// 加载完成后的回调函数
success: function (d) {
console.log(d);
// 选中节点,根据id筛选
treeSelect.checkNode('tree', 3);
console.log($('#tree').val());
// 获取zTree对象,可以调用zTree方法
var treeObj = treeSelect.zTree('tree');
console.log(treeObj);
// 刷新树结构
treeSelect.refresh('tree');
}
});
treeSelect.render({
// 选择器
elem: '#tree2',
// 数据
data: 'data/data3.json',
// 异步加载方式:get/post,默认get
type: 'get',
// 占位符
placeholder: '占位符',
// 是否开启搜索功能:true/false,默认false
search: true,
style: {
folder: {
enable: false
},
line: {
enable: 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('tree');
}
});
// 通过layer打开
$('#layer').click(function(){
layer.open({
type: 1,
title: 'Layer',
content: $('.layui-container'),
area: ['500px', '300px']
});
});
$('#btnDestory').click(function(){
treeSelect.destroy('tree');
});
$('#btnRevoke').click(function(){
treeSelect.revokeNode('tree', function(d){
console.log(d);
console.log(d.treeId);
});
});
});
</script>
</body>
</html>
数据格式参考
[
{
"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
}
]
(踩坑)问题记录
因为在修改页面中需要有默认选中的功能,在使用官方提供的方法: treeSelect.checkNode('tree', 3);
时报错 Cannot read property ‘getNodeByParam’ of null
原因:该方法 checkNode('tree', 3)
需要在渲染完成后执行,即在 success 回调方法中使用
treeSelect.render({
elem: '#tree', // 选择器
data: '/cms/ArticleType/readType1', // 数据
headers: {}, // 请求头
type: 'get', // 异步加载方式:get/post,默认get
placeholder: '修改默认提示信息', // 占位符
search: true, // 是否开启搜索功能:true/false,默认false
style: { // 一些可定制的样式
folder: {
enable: true
},
line: {
enable: true
}
},
click: function(d){ // 点击回调
console.log(d);
},
success: function (d) { // 加载完成后的回调函数
console.log(d)
treeSelect.checkNode('tree',par_rowdata.id);
treeSelect.refresh('tree');
},
});
另外特别注意:
<input type="text" id="tree" lay-filter="tree" class="layui-input">
treeSelect.checkNode('tree', 3);
中 tree 对应的是 html 中的 lay-filter="tree"
中的 tree
数字 3 则是要默认选中 的ID值