select2 下拉框回显问题 树形菜单 部门结构的

 版本:Select2 4.0.3 | https://github.com/select2/select2/blob/master/LICENSE.md

原项目用jsp bootstrap 

测试了快一天 终于在kimi上找到结果了 原来的select2 不支持层级结构的回显 需要改成数组的不带层级的方式给到select2 才能正常选择回显  另外需要自已渲染出来层级结构 要不然都是平级的

要在Select2中获取选中项的层级信息,可以通过在数据对象中添加一个表示层级的属性来实现。以下是一个基于搜索结果的解决方案,它展示了如何在Select2中为每个选项添加层级信息,并在选中时获取该层级:

HTML部分:

 

html

<select id="selectWithHierarchy" style="width: 300px;"><!-- Select2将会填充选项 -->
</select>

JavaScript部分:

 

javascript

$(document).ready(function() {// 假设您的数据结构如下,包含父节点和子节点,以及层级信息var data = [{id: '1',text: 'Parent 1',level: 1, // 层级信息children: [{id: '1-1',text: 'Child 1',level: 2},{id: '1-2',text: 'Child 2',level: 2}]},{id: '2',text: 'Parent 2',level: 1,children: [{id: '2-1',text: 'Child 3',level: 2},{id: '2-2',text: 'Child 4',level: 2}]}];// 将树形数据转换为Select2需要的格式,并添加层级关系function formatDataWithHierarchy(data) {var result = [];data.forEach(function(item) {result.push({id: item.id,text: item.text,level: item.level});if (item.children) {result = result.concat(formatDataWithHierarchy(item.children));}});return result;}var formattedData = formatDataWithHierarchy(data);// 初始化Select2$('#selectWithHierarchy').select2({data: formattedData,placeholder: "Select an option",allowClear: true,templateResult: function (data) {// 自定义结果显示,包含层级关系return '<div class="select2-result-repository__meta"><div class="select2-result-repository__title">' + new Array(data.level).join('&nbsp;&nbsp;&nbsp;') + data.text + '</div></div>';},templateSelection: function (data) {// 自定义选择结果显示,包含层级关系return data.text;}});// 监听选择变化事件,获取选中项的层级$('#selectWithHierarchy').on('select2:select', function (e) {var selectedData = e.params.data;console.log("Selected item's level: " + selectedData.level); // 输出选中项的层级});
});

在这个示例中,我们首先定义了一个包含父节点和子节点的树形结构数据,并为每个节点添加了一个level属性来表示层级信息。然后,我们创建了一个formatDataWithHierarchy函数,该函数递归地遍历数据,并将层级信息添加到每个节点中。

templateResult函数中,我们使用HTML的<div>标签和&nbsp;实体来表示层级关系,层级越深,前面的空格就越多。这样,Select2下拉列表中的选项就会显示层级关系。

最后,我们监听了Select2的select2:select事件,当用户选择一个选项时,事件的参数e.params.data包含了选中项的数据,包括层级信息。我们可以通过这个数据来获取选中项的层级,并进行相应的处理。

这个解决方案提供了一个通用的方法来允许Select2选择父节点并显示层级关系,同时能够获取选中项的层级信息。您可以根据实际情况进行调整和优化。

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

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

相关文章

解决 vue3 中 echarts图表在el-dialog中显示问题

原因&#xff1a; 第一次点开不显示图表&#xff0c;第二次点开虽然显示图表&#xff0c;但是图表挤在一起&#xff0c;页面检查发现宽高只有100px,但是明明已经设置样式宽高100% 这可能是由于 el-dialog 还没有完全渲染完成&#xff0c;而你的 echarts 组件已经开始尝试渲染图…

计算机网络习题( 第3章 物理层 第4章 数据链路层 )

第3章 物理层 一、单选题 1、下列选项中&#xff0c;不属于物理层接口规范定义范畴的是&#xff08; &#xff09;。 A、 接口形状 B、 引脚功能 C、 传输媒体 D、 信号电平 正确答案&#xff1a; C 2、在物理层接口特性中&#xff0c;用于描述完成每种功能的事件发…

Unity SpriteAtlasManager.atlasRequested趟坑

坑1 场景一加载&#xff0c;unity就触发了SpriteAtlasManager.atlasRequested&#xff0c;如果这时候没有设置SpriteAtlasManager.atlasRequested回调&#xff0c;就会触发这个告警&#xff1a; SpriteAtlasManager.atlasRequested wasnt listened to 解决这个很简单&…

通俗易懂!使用Excel和TF实现Transformer

本文旨在通过最通俗易懂的过程来详解Transformer的每个步骤&#xff01; 假设我们在做一个从中文翻译到英文的过程&#xff0c;我们的词表很简单如下&#xff1a; 中文词表&#xff1a;[机、器、学、习] 英文词表[deep、machine、learning、chinese] 先来看一下Transformer的…

智慧楼盘二维、三维组件融合 720三维全景可视化

本系统通过数字孪生技术&#xff0c;实现小区楼盘系统的可视化展示&#xff0c;整合楼盘内各个系统的数据源&#xff0c;将楼盘模型与房间模型、720三维全景图相结合&#xff0c;实现了从楼盘周边到室内布局的全方位展示&#xff0c;为购房者提供全方位的可视化信息。 整个项目…

adb无法连接到安卓设备【解决方案】报错:adb server version (40) doesn‘t match this client (41);

下载老版本Platformtools​​​​​​​​​​​​​​https://dl.google.com/android/repository/platform-tools_r28.0.2-windows.zip?hlzh-cn 替换原来的platform-tools文件夹即可。 问题原因分析&#xff1a;电脑端adb client版本&#xff08;41&#xff09;和安卓端adb …

QT QCombox QSS样式问题

/*combobox 样式*/ QComboBox#FileterComboBox,QComboBox#DateRangeComboBox{background-color: #262626; /* 背景颜色 */color: #e0e0e0; /* 文本颜色 */border-radius:16px;font-family: "Microsoft YaHei"; /* 文本字体族 */font-size: 18px; /* 文…

Unittest02|TestSuite、TestRunner、HTMLTestRunner、处理excel表数据、邮件接收测试结果

目录 八、测试套件TestSuite和测试运行器TestRunner 1、基本概念 2、创建和使用测试套件 3、 自动发现测试用例、创建测试套件、运行测试 4、生成html的测试报告&#xff1a;HTMLTestRunner 1️⃣导入HTMLTestRunner模块 2️⃣运行测试用例并生成html文件 九、unittest…

NIPS2014 | GAN: 生成对抗网络

Generative Adversarial Nets 摘要-Abstract引言-Introduction相关工作-Related Work对抗网络-Adversarial Nets理论结果-Theoretical Results实验-Experiments优势和不足-Advantages and disadvantages缺点优点 结论及未来工作-Conclusions and future work研究总结未来研究方…

【已解决】pyinstaller打包ico图片报错:OSError: [WinError 225] 无法成功完成操作,因为文件包含病毒或潜在的垃圾软件。

起因&#xff1a; pyinstaller加上 --icon 参数打包时报错。 命令如下&#xff1a; 解决&#xff1a; 关闭 Windows 的病毒防护即可&#xff0c;步骤如下。 点屏幕右下角通知栏&#xff0c;进入“病毒和威胁防护”&#xff1a; 打开&#xff1a; 关闭实时保护&#xff08…

011-spring-整合三方框架的命名空间原理(重要)

根据context标签来学习了解 <context:property-placeholder location"jdbc.properties"/> <bean id"dataSource" class"com.alibaba.druid.pool.DruidDataSource"><property name"driver" value"${db.driver}&quo…

No.29 笔记 | CTF 学习干货

大家好呀&#xff01;我刚参加了美国线上CTF比赛&#xff0c;收获超多&#xff0c;特别感谢老师教我的干货知识。今天就和大家分享我的学习笔记。CTF像刺激冒险&#xff0c;有挑战有惊喜。 学习中我懂了很多知识技能&#xff0c;像密码学、Web安全、Misc题型等&#xff0c;它们…

sonarqube 安装及使用

一、官网参考地址 相关版本下载地址 配置全局变量 .bash_profileexport SONAR_HOME=/Users/jd/soft/sonar-scanner-6.2.1.4610 export PATH=$PATH:$SONAR_HOME/bin export SQ_HOST=http://127.0.0.1:9000/ export SQ_TOKEN=squ_dbb1913e095a92a727a918a9ba6b1af94b007748二、…

使用ArcGIS/ArcGIS pro绘制六边形/三角形/菱形渔网图

在做一些尺度分析时&#xff0c;经常会涉及到对研究区构建不同尺度的渔网进行分析&#xff0c;渔网的形状通常为规则四边形。构建渔网的方法也很简单&#xff0c;使用ArcGIS/ArcGIS Pro工具箱中的【创建渔网/CreateFishnet】工具来构建。但如果想构建其他形状渔网进行相关分析&…

Java实现观察者模式

一、前言 观察者模式&#xff0c;又称为发布订阅模式&#xff0c;是一种行为设置模式&#xff0c;允许对象之间建立一对多的依赖关系&#xff0c;这样当一个对象状态改变时&#xff0c;它的所有依赖者&#xff08;观察者&#xff09;都会收到通知并自动更新。 二、具体实现 …

pytorch MoE(专家混合网络)的简单实现。

专家混合&#xff08;Mixture of Experts, MoE&#xff09;是一种深度学习模型架构&#xff0c;通常用于处理大规模数据和复杂任务。它通过将输入分配给多个专家网络&#xff08;即子模型&#xff09;&#xff0c;然后根据门控网络&#xff08;gating network&#xff09;的输出…

NAT 技术如何解决 IP 地址短缺问题?

NAT 技术如何解决 IP 地址短缺问题&#xff1f; 前言 这是我在这个网站整理的笔记,有错误的地方请指出&#xff0c;关注我&#xff0c;接下来还会持续更新。 作者&#xff1a;神的孩子都在歌唱 随着互联网的普及和发展&#xff0c;IP 地址的需求量迅速增加。尤其是 IPv4 地址&…

7-9 二分查找字符

目录 题目描述 输入格式: 输出格式: 输入样例: 输出样例: 详细代码&#xff08;手写二分&#xff09;&#xff1a; 详细代码&#xff08;使用自带函数&#xff09;&#xff1a; 题目描述 输入一行&#xff0c;首先是一个不包含空格的字符串s&#xff0c;接着是一个字符c&#x…

Spring Boot 自动配置:从 spring.factories 到 AutoConfiguration.imports

Spring Boot 提供了强大的自动配置功能&#xff0c;通过约定优于配置的方式大大简化了应用开发。随着版本迭代&#xff0c;自动配置的实现方式也逐渐优化&#xff0c;从早期的 spring.factories 文件到最新的 META-INF/spring/org.springframework.boot.autoconfigure.AutoConf…

洪水灾害多智能体分布式模拟示例代码

1. 环境定义&#xff1a;支持灾害动态、地理数据和分布式架构 import numpy as np import random import matplotlib.pyplot as plt# 新疆主要城市及邻接关系 XINJIANG_CITIES {Urumqi: [Changji, Shihezi],Changji: [Urumqi, Shihezi, Turpan],Shihezi: [Urumqi, Changji, K…