7.1 KiB
7.1 KiB
下拉树
tree
默认配置
tree: {
//是否显示树状结构
show: true,
//是否展示三角图标
showFolderIcon: true,
//是否显示虚线
showLine: false,
//间距
indent: 20,
//默认展开节点的数组, 为 true 时, 展开所有节点
expandedKeys: [],
//是否严格遵守父子模式
strict: true,
},
:::demo
<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>
</div>
<div style="margin-top: 20px">间距</div>
<div id="slideTest1"></div>
<script>
layui.form.render();
['showFolderIcon', 'showLine', 'strict'].forEach(function(key){
layui.form.on('checkbox('+key+')', function(data){
var treeConfig = {};
treeConfig[key] = data.elem.checked;
demo1.update({
tree: treeConfig
})
});
})
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(){
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)
}
},
:::demo
<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 ],
},
:::demo
<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)
}
},
:::demo
<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,
},
:::demo
<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>
:::