Skip to main content

下拉树

tree

默认配置

tree: {
//是否显示树状结构
show: true,
//是否展示三角图标
showFolderIcon: true,
//是否显示虚线
showLine: false,
//间距
indent: 20,
//默认展开节点的数组, 为 true 时, 展开所有节点
expandedKeys: [],
//是否严格遵守父子模式
strict: true,
//是否开启极简模式
simple: false,
//点击节点是否展开
clickExpand: true,
//点击节点是否选中
clickCheck: true,
},

<div id="demo1" class="xm-select-demo"></div>

<br/>
<div class="layui-form">
<input type="checkbox" name="showFolderIcon" lay-filter="showFolderIcon" lay-skin="primary" title="是否展示三角图标" checked>
<input type="checkbox" name="showLine" lay-filter="showLine" lay-skin="primary" title="是否显示虚线" checked>
<input type="checkbox" name="strict" lay-filter="strict" lay-skin="primary" title="严格父子结构" checked>
<input type="checkbox" name="simple" lay-filter="simple" lay-skin="primary" title="极简模式">

<br/><br/>
<input type="checkbox" name="hidden" lay-filter="hidden" lay-skin="primary" title="隐藏父节点图标">
<input type="checkbox" name="custom" lay-filter="custom" lay-skin="primary" title="自定义图标">
<input type="checkbox" name="all" lay-filter="all" lay-skin="primary" title="展开所有节点">
<input type="checkbox" name="close" lay-filter="close" lay-skin="primary" title="闭合所有节点">
<input type="checkbox" name="key3" lay-filter="key3" lay-skin="primary" title="展开指定节点">

<br/><br/>
<input type="checkbox" name="clickExpand" lay-filter="clickExpand" lay-skin="primary" title="clickExpand" checked>
<input type="checkbox" name="clickCheck" lay-filter="clickCheck" lay-skin="primary" title="clickExpand" checked>

</div>

<div style="margin-top: 20px">间距</div>
<div id="slideTest1"></div>


<script>
layui.form.render();

['showFolderIcon', 'showLine', 'strict', 'simple'].forEach(function(key){
layui.form.on('checkbox('+key+')', function(data){
var treeConfig = {};
treeConfig[key] = data.elem.checked;
demo1.update({
tree: treeConfig
})
});
})

//控制显示父节点的图标
layui.form.on('checkbox(hidden)', function(data){
demo1.update({
iconfont: {
parent: data.elem.checked ? 'hidden' : '',
}
})
});

//自定义图标
layui.form.on('checkbox(custom)', function(data){
let iconfont = data.elem.checked ? {
select: 'layui-icon layui-icon-chart',
unselect: 'layui-icon-ok-circle',
half: 'layui-icon layui-icon-table',
parent: 'layui-icon layui-icon-survey',
} : {
select: '',
unselect: '',
half: '',
parent: '',
}
demo1.update({
iconfont: iconfont
})
layui.form.render();
});

//展开所有节点
layui.form.on('checkbox(all)', function(data){
if(data.elem.checked){
demo1.changeExpandedKeys(true)
}
});

//闭合所有节点
layui.form.on('checkbox(close)', function(data){
if(data.elem.checked){
demo1.changeExpandedKeys(false)
}
});

//展开指定节点
layui.form.on('checkbox(key3)', function(data){
if(data.elem.checked){
demo1.changeExpandedKeys([ -3 ])
}
});

layui.form.on('checkbox(clickExpand)', function(data){
demo1.update({
tree: {
clickExpand: data.elem.checked
}
})
});

layui.form.on('checkbox(clickCheck)', function(data){
demo1.update({
tree: {
clickCheck: data.elem.checked
}
})
});

layui.slider.render({
elem: '#slideTest1',
min: 10,
max: 100,
showstep: true,
input: true,
tips: true,
value: 20,
change: function(value){
demo1.update({
tree: {
indent: value
}
})
}
});

var demo1 = xmSelect.render({
el: '#demo1',
autoRow: true,
filterable: true,
tree: {
show: true,
showFolderIcon: true,
showLine: true,
indent: 20,
expandedKeys: [ -3 ],
},
toolbar: {
show: true,
list: ['ALL', 'REVERSE', 'CLEAR']
},
filterable: true,
height: 'auto',
data: function(){
return [
{name: '销售员', value: -1, disabled: true, children: [
{name: '张三1', value: 1, selected: true, children: []},
{name: '李四1', value: 2, selected: true},
{name: '王五1', value: 3, disabled: true},
]},
{name: '奖品', value: -2, children: [
{name: '奖品3', value: -3, children: [
{name: '苹果3', value: 14, selected: true},
{name: '香蕉3', value: 15},
{name: '葡萄3', value: 16},
]},
{name: '苹果2', value: 4, selected: true, disabled: true},
{name: '香蕉2', value: 5},
{name: '葡萄2', value: 6},
]},
]
}
})
</script>

懒加载的树

tree: {
show: true,
expandedKeys: [ -1 ],
//开启懒加载
lazy: true,
//加载方法
load: function(item, cb){
//item: 点击的节点, cb: 回调函数
//这里模拟ajax
setTimeout(function(){
var name = item.name + 1;
cb([
{name: item.name + 1, value: item.value + '1', children: [] },
{name: item.name + 2, value: item.value + '2' },
])
}, 500)
}
},
<div id="demo2" class="xm-select-demo"></div>

<script>
var demo2 = xmSelect.render({
el: '#demo2',
autoRow: true,
tree: {
show: true,
showFolderIcon: true,
showLine: true,
indent: 20,
expandedKeys: [ -1 ],
lazy: true,
load: function(item, cb){
setTimeout(function(){
if(item.name.endsWith('2')){
return cb([]);
}
cb([
{name: item.name + 1, value: item.value + '1', children: [] },
{name: item.name + 2, value: item.value + '2', children: [] },
])
}, 500)
}
},
height: 'auto',
data(){
return [
{name: '销售员', value: -1, children: [
{name: '张三', value: 100, selected: true, children: []},
{name: '李四1', value: 2, selected: true},
{name: '王五1', value: 3, disabled: true},
]},
{name: '奖品', value: -2, children: [
{name: '奖品3', value: -3, children: [
{name: '苹果3', value: 14, selected: true},
{name: '香蕉3', value: 15},
{name: '葡萄3', value: 16},
]},
{name: '苹果2', value: 4, selected: true, disabled: true},
{name: '香蕉2', value: 5},
{name: '葡萄2', value: 6},
]},
]
}
})
</script>

单选树(radio模式)

//显示为text模式
model: { label: { type: 'text' } },
//单选模式
radio: true,
//选中关闭
clickClose: true,
//树
tree: {
show: true,
//非严格模式
strict: false,
//默认展开节点
expandedKeys: [ -1 ],
},
<div id="demo3" class="xm-select-demo"></div>

<script>
var demo3 = xmSelect.render({
el: '#demo3',
model: { label: { type: 'text' } },
radio: true,
clickClose: true,
tree: {
show: true,
strict: false,
expandedKeys: [ -1 ],
},
height: 'auto',
data(){
return [
{name: '销售员', value: -1, children: [
{name: '张三', value: 100, selected: true, children: []},
{name: '李四1', value: 2, selected: true},
{name: '王五1', value: 3, disabled: true},
]},
{name: '奖品', value: -2, children: [
{name: '奖品3', value: -3, children: [
{name: '苹果3', value: 14, selected: true},
{name: '香蕉3', value: 15},
{name: '葡萄3', value: 16},
]},
{name: '苹果2', value: 4, selected: true, disabled: true},
{name: '香蕉2', value: 5},
{name: '葡萄2', value: 6},
]},
]
}
})
</script>

单选树(on处理模式)

//显示为text模式
model: { label: { type: 'text' } },
//树
tree: {
show: true,
//非严格模式
strict: false,
//默认展开节点
expandedKeys: [ -1, -3 ],
},
//处理方式
on: function(data){
if(data.isAdd){
return data.change.slice(0, 1)
}
},
<div id="demo4" class="xm-select-demo"></div>

<script>
var demo4 = xmSelect.render({
el: '#demo4',
model: { label: { type: 'text' } },
tree: {
show: true,
strict: false,
expandedKeys: [ -1 ],
},
on: function(data){
if(data.isAdd){
return data.change.slice(0, 1)
}
},
height: 'auto',
})

//这里模拟ajax
setTimeout(function(){
demo4.update({
data: [
{name: '销售员', value: -1, children: [
{name: '张三', value: 100, children: []},
{name: '李四1', value: 2},
{name: '王五1', value: 3, disabled: true},
]},
{name: '奖品', value: -2, children: [
{name: '奖品3', value: -3, children: [
{name: '苹果3', value: 14},
{name: '香蕉3', value: 15},
{name: '葡萄3', value: 16},
]},
{name: '苹果2', value: 4, disabled: true},
{name: '香蕉2', value: 5},
{name: '葡萄2', value: 6},
]},
]
})

//设置默认值
demo4.setValue([
{name: '李四1', value: 2},
{name: '苹果3', value: 14},
], null, true)

}, 300)

</script>

默认展开所有节点

tree: {
show: true,
//展开所有节点
expandedKeys: true,
},
<div id="demo5" class="xm-select-demo"></div>

<script>
var demo5 = xmSelect.render({
el: '#demo5',
tree: {
show: true,
expandedKeys: true,
},
height: 'auto',
data: [
{name: '销售员', value: -1, children: [
{name: '张三', value: 100, children: []},
{name: '李四1', value: 2},
{name: '王五1', value: 3, disabled: true},
]},
{name: '奖品', value: -2, children: [
{name: '奖品3', value: -3, children: [
{name: '苹果3', value: 14},
{name: '香蕉3', value: 15},
{name: '葡萄3', value: 16},
]},
{name: '苹果2', value: 4, disabled: true},
{name: '香蕉2', value: 5},
{name: '葡萄2', value: 6},
]},
]
})

</script>