组织机构树形列表实现

源码地址：https://www.lanzouw.com/itjDc1ydraof

本来上传了源码，但是发现只能VIP才能下载，所以重新上传到蓝奏云上了，链接如下：

先看下效果图：
在这里插入图片描述

可以自己写HTML来自定义每一项的内容显示，包括图中的图标等
可以监听行点击事件

主要是用xm-select.js组件做的一个树形列表

xm-select.js的说明文档：https://maplemei.gitee.io/xm-select/?select=1#/basic/disabled
更新：上面的链接访问不了了，可以直接下载文档到本地，然后打开index.html查看，Gitee文档地址

实现步骤：
4. 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>