组织机构树形列表实现

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

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

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

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

主要是用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>
  1. 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>

这个组件的功能还有很多,具体可以参考文档

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/10581.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

物联网到底物联了个啥?——青创智通

工业物联网解决方案-工业IOT-青创智通 物联网&#xff0c;这个听起来似乎颇具科技感和未来感的词汇&#xff0c;其实早已悄然渗透到我们生活的方方面面。从智能家居到智慧城市&#xff0c;从工业自动化到医疗健康&#xff0c;物联网技术正在以其独特的魅力改变着我们的生活方式…

2024.04.30校招 实习 内推 面经

绿*泡*泡VX&#xff1a; neituijunsir 交流*裙 &#xff0c;内推/实习/校招汇总表格 1、校招&实习 | 零跑汽车校园招聘 - 三电研发专场&#xff08;内推&#xff09; 校招&实习 | 零跑汽车校园招聘 - 三电研发专场&#xff08;内推&#xff09; 2、校招丨海尔智家2…

【ruoyi】docker部署 captchaImage接口 FontConfiguration空指针异常

后台服务报错captchaImage接口空指针异常&#xff0c;无法启动项目&#xff1a; [http-nio-4431-exec-27] ERROR c.r.f.w.e.GlobalExceptionHandler - [handleRuntimeException,93] - 请求地址/captchaImage,发生未知异常.java.lang.NullPointerException: nullat sun.awt.Font…

鸿蒙开发-ArkTS语言-XML

鸿蒙开发-UI-web 鸿蒙开发-UI-web-页面 鸿蒙开发-ArkTS语言-基础类库 鸿蒙开发-ArkTS语言-并发 鸿蒙开发-ArkTS语言-并发-案例 鸿蒙开发-ArkTS语言-容器 鸿蒙开发-ArkTS语言-非线性容器 文章目录 前言 一、XML概述 二、XML生成 三、XML解析 1.解析XML标签和标签值 2.解析XML属性…

conan2 基础入门(05)-(静态库动态库)(DebugRelease)

conan2 基础入门(05)-(静态库&动态库)(Debug&Release) 文章目录 conan2 基础入门(05)-(静态库&动态库)(Debug&Release)⭐准备预备文件和Code ⭐静态库&动态库静态库动态库 ⭐Debug&ReleaseReleaseDebug END视频教学settings.yml ⭐准备 本文均在windo…

let和const命令

2.1.1 基本用法 ES6新增了let命令&#xff0c;用于生命变量。其用法类似于var&#xff0c;但是所声明的变量只在let命令所在的代码块内有效。 {let a 10&#xff1b;var b 1&#xff1b; }a//ReferenceError&#xff1a;a is not defined b//1上面的代码在代码块中分别用le…

iOS LQG开发框架(持续更新)

基本规则 开发便利性为前提&#xff0c;妥协性能可维护性为前提可读性MVC各部分职责一定要清晰&#xff0c;controll类里面功能尽量抽离成helper&#xff0c;功能一定要清晰&#xff0c;这个非常重要&#xff0c;对代码可读性提升非常高方法内部尽量使用局部变量&#xff0c;最…

【Vue管理后台】用户登录强制修改密码

【Ruoyi管理后台】用户登录强制修改密码 这篇文章已经实现了这个需求&#xff0c;因为个人业务中强制改密页面是进入系统且浮动于其他页面上方&#xff0c;进入强制改密页面的同时其他页面会向后台请求&#xff0c;如果清空token后会造成其他的请求失败。本文整体步骤与参考博文…

经验报告 - SCADE Suite 6 KCG 经历 DO-178B 认证过程中进行的活动

详细内容可参考 ICFP’09 《Experience Report: Using Objective Caml to Develop Safety-Critical Embedded Tools in a Certification Framework》。 数十年前&#xff0c;民用航空电子机构就定义了机载嵌入式代码的认证要求。DO-178B 标准&#xff08;RTCA/DO-178B&#xff…

5.神经网络-激活函数

目录 1. 激活函数不是阶跃函数 1.1 激活函数和阶跃函数都是非线性函数 1.2 激活函数不是阶跃函数 2. sigmoid 函数 2.1 sigmoid 函数表达式 2.2 sigmoid 函数 Python 实现 2.4 sigmoid 函数图 3. ReLU 函数 3.1 ReLU 函数表达式 3.2 ReLU 函数 Python 实现 3.4 ReLU…

线性集合:ArrayList,LinkedList,Vector/Stack

共同点&#xff1a;都是线性集合 ArrayList ArrayList 底层是基于数组实现的&#xff0c;并且实现了动态扩容&#xff08;当需要添加新元素时&#xff0c;如果 elementData 数组已满&#xff0c;则会自动扩容&#xff0c;新的容量将是原来的 1.5 倍&#xff09;&#xff0c;来…

Rust使用HashSet对Vec类型的元素进行去重

在Rust语言中&#xff0c;对Vec类型的元素进行去重&#xff0c;一种常见的方法是使用一个HashSet来帮助我们快速检查元素是否已经存在。以下是使用HashSet对Vec进行去重的示例代码&#xff1a; use std::collections::HashSet;fn main() {let vec_numbers vec![1, 2, 2, 3, 4…

Java后端初始化项目(项目模板)

介绍 emmmm&#xff0c;最近看了一些网络资料&#xff0c;也是心血来潮&#xff0c;想自己手工搭建一个java后端的初始化项目模板来简化一下开发&#xff0c;也就发一个模板的具体制作流程&#xff0c;&#xff08;一步一步搭建&#xff0c;从易到难&#xff09; ok&#xff…

引用类型String的值传递和引用传递

引用传递(pass by reference)是指在调用方法时将实际参数的地址直接传递到方法中,在方法中对参数所进行的修改,将影响到实际参数。 值传递(pass by value)是指在调用方法时将实际参数拷贝一份传递到方法中,在方法中对参数修改,不会影响到实际参数。 基本类型传的是值的拷…

vue2和vue3区别: 探索关键差异

vue2和vue3区别&#xff1a; 探索关键差异 Vue.js 作为流行的前端框架&#xff0c;其版本 3 带来了许多令人兴奋的改进和新功能。虽然 Vue 3 保持了与 Vue 2 的相似性&#xff0c;但也存在一些关键差异需要开发者注意。本文将通过表格形式&#xff0c;清晰地展现 Vue 2 和 Vue …

在多线程程序中,如何保证线程的安全?

在多线程程序中保证线程安全通常涉及以下一些关键技术和策略&#xff1a; 1. 使用同步机制 同步方法&#xff1a;通过在方法签名前添加 synchronized 关键字&#xff0c;确保一次只有一个线程能够执行该方法。同步代码块&#xff1a;通过 synchronized 关键字同步一个代码块&…

刷代码随想录有感(63):将有序数组转换为二叉搜索树(其实时二叉平衡搜索树)

题干&#xff1a; 代码&#xff1a; class Solution { public:TreeNode* traversal(vector<int>& nums, int left, int right){if(left > right)return NULL;int mid left (right - left)/2;TreeNode* NewRoot new TreeNode(nums[mid]);NewRoot->left tra…

文心一言指令:解锁自然语言处理新时代的技术探索

在人工智能领域&#xff0c;自然语言处理&#xff08;NLP&#xff09;一直是研究与应用的热点&#xff0c;它致力于让机器理解、生成并运用人类语言&#xff0c;架起人机交互的桥梁。随着技术的飞速发展&#xff0c;一个全新的概念——“文心一言指令”应运而生&#xff0c;这一…

【GO】go语言中的HTTP标准库 - http编程

上一节已经学习了HTTP的基础知识&#xff0c;本章将学习关于go语言的HTTP编程&#xff0c;最重要的是掌握 net/http 包的用法&#xff0c;以及如何自己编写一个简单的Web服务端&#xff0c;通过客户端访问Server端等。 编写简单的Web 服务器 http.ListenAndServe 启动 Http S…

制作跳动的爱心网页效果

html <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name"viewport" content"widthdevice-width, initial-scale1.0"> <title>跳动的爱心</title> <link rel&q…