Leedom

Appearance

On this page

下拉树 ​

tree ​

默认配置

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

<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>

懒加载的树 ​

js
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)
	}
},
html
<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模式) ​

js
//显示为text模式
model: { label: { type: 'text' } },
//单选模式
radio: true,
//选中关闭
clickClose: true,
//树
tree: {
	show: true,
	//非严格模式
	strict: false,
	//默认展开节点
	expandedKeys: [ -1 ],
},
html
<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处理模式) ​

js
//显示为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)
	}
},
html
<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>

默认展开所有节点 ​

js
tree: {
	show: true,
	//展开所有节点
	expandedKeys: true,
},
html
<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>

Copyright © 2022-present Leedom