组织机构树形列表实现

news2024/11/17 21:50:02

先看下效果图：
在这里插入图片描述
主要是用xm-select.js组件做的一个树形列表

xm-select.js的说明文档：https://maplemei.gitee.io/xm-select/?select=1#/basic/disabled

实现步骤：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    	// 简单优化一下列表显示
        .xm-label.auto-row {
            display: none;
        }
		
		.level-icon {
		    width: 18px;
			height: 18px;
			margin-top: 9px;
			margin-right: 6px;
		}
		
		.xm-option-content:hover .org-toolbar {
			display: block;
		}
    </style>
</head>
<body>
<div id="demo1"></div>
</body>
<!-- 这个在附件里面 -->
<script src="xm-select.js"></script>
</html>

JavaScript部分：

<script>
	// 生成一个树形列表
    var demo1 = xmSelect.render({
        el: '#demo1',
        radio: true,
        autoRow: true,
        tree: {
            //是否显示树状结构
            show: true,
            //是否展示三角图标
            showFolderIcon: true,
            //是否显示虚线
            showLine: true,
            //间距
            indent: 20,
            //默认展开节点的数组, 为 true 时, 展开所有节点
            expandedKeys: true,
            //是否严格遵守父子模式
            strict: false,
            //是否开启极简模式
            simple: false,
            //点击节点是否展开
            clickExpand: false,
            //点击节点是否选中
            clickCheck: true
        },
        theme: {
            color: '#b9fce2',
        },
		searchTips: '输入关键字搜索',
        model: {
            icon: 'hidden',
            type: 'relative', //默认 absolute
        },
        // 每一行的显示效果，加了图标
        template({ item, sels, name, value }){
			let htmlText = ''
		    if (item.level === 1) {
				htmlText = '<img src="level_1.png" class="level-icon"/>'
			} else if (item.level === 2) {
				htmlText = '<img src="level_2.png" class="level-icon"/>'
			} else if (item.level === 3) {
				htmlText = '<img src="level_3.png" class="level-icon"/>'
			} else if (item.level === 4) {
				htmlText = '<img src="level_4.png" class="level-icon"/>'
			} else if (item.level === 5) {
				htmlText = '<img src="level_5.png" class="level-icon"/>'
			} else {
				htmlText = '<img src="level_6.png" class="level-icon"/>'
			}
			
			if (item.level !== 1) {
				if (item.sync === 1) {
					htmlText += '<img src="sync_yes.png" class="level-icon"/>';
				} else {
					htmlText += '<img src="sync_no.png" class="level-icon"/>';
				}
			}
			
            return htmlText + item.name + '<div  style="width:30px;height:30px;background-color:red;display:none" class="org-toolbar"></div>'
        },
        filterable: true,
        height: 'auto',
        // 这个可以用ajax传过来
        data: function () {
            return [{
                name: '总公司',
                value: -1,
				level: 1,
                children: [{
                    name: '子品牌1',
                    value: 1,
					level: 2,
					sync: 1,
                    children: [{
                        name: '华南分公司',
                        value: -2,
						level: 3,
						sync: 0,
                        children: [
						{
                            name: '一级A1',
                            value: -3,
							level: 4,
							sync: 1,
                            children: [
							{name: '二级B1', value: 14, level: 5}, 
							{name: '二级B2', value: 15, level: 5},
							{name: '二级B3', value: 16, level: 5},
							]
                        }, 
						{name: '一级A2', value: 4, level: 4}, 
						{name: '一级A3', value: 5, level: 4}, 
						{name: '一级A4', value: 6, level: 4}
						]
                    }]
                }, 
				{name: '子品牌2', value: 2, level: 2}
				]
            }]
        },
        // 单击选中行的事件
        on: function (data) {
            if (isNotEmpty(data.arr)) {
            	// 选中行的数据
                data = data.arr[0]
                // 可以进行一些其他操作
            }
        }
    })
</script>