treeselect渲染不出来

提问 未结 2 76
陈三岁
悬赏:20飞吻
版本:扩展组件 浏览器:谷歌
我按照官网上的案例再添加了两个<input>,分别是tree3,tree4。访问页面时4个数据能打印,但是有时能渲染4个treeselect,刷新后有时只能渲染出两个treeselect。
<!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">测试3</label>
<div class="layui-input-block">
<input type="text" id="tree3" lay-filter="tree3" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label for="" class="layui-form-label">测试4</label>
<div class="layui-input-block">
<input type="text" id="tree4" lay-filter="tree4" 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);
}
});

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);
}
});

treeSelect.render({
// 选择器
elem: '#tree3',
// 数据
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);
}
});

treeSelect.render({
// 选择器
elem: '#tree4',
// 数据
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);
}
});

// 通过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>
回帖