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;用于描述完成每种功能的事件发…

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

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

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

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

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】工具来构建。但如果想构建其他形状渔网进行相关分析&…

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 地址&…

华为麦芒5(安卓6)termux记录 使用ddns-go,alist

下载0.119bate1版,不能换源,其他源似乎都用不了,如果root可以直接用面具模块 https://github.com/termux/termux-app/releases/download/v0.119.0-beta.1/termux-app_v0.119.0-beta.1apt-android-5-github-debug_arm64-v8a.apk 安装ssh(非必要) pkg install openssh开启ssh …

FPC在蓝牙耳机中有哪些应用?【新立电子】

随着科技的进步和消费者需求的提升&#xff0c;耳机已经从传统的有线连接转变为现在的无线蓝牙耳机&#xff0c;真正做到了便捷出行与极佳的用户体验。而FPC在蓝牙耳机中的应用主要体现在优化耳机的设计与性能上。 蓝牙耳机&#xff0c;主要使用方式是与手机、电脑等移动设备通…

《计算机组成及汇编语言原理》阅读笔记:p121-p122

《计算机组成及汇编语言原理》学习第 8 天&#xff0c;p121-p122 总结&#xff0c;总计 2 页。 一、技术总结 1.memory优化 (1)cache memory remove blank from “Most computers support two different kinds (levels) of cache: level one (L1) cache is built into the …

ffmpeg: stream_loop报错 Error while filtering: Operation not permitted

问题描述 执行ffmpeg命令的时候&#xff0c;报错&#xff1a;Error while filtering: Operation not permitted 我得命令如下 ffmpeg -framerate 25 -y -i /data/workerspace/mtk/work_home/mtk_202406111543-l9CSU91H1f1b3/tmp/%08d.png -stream_loop -1 -i /data/workerspa…

【微信小程序】1|底部图标 | 我的咖啡店-综合实训

底部图标 引言 在微信小程序开发中&#xff0c;底部导航栏&#xff08;tabBar&#xff09;是用户界面的重要组成部分&#xff0c;它为用户提供了快速切换不同页面的功能。今天&#xff0c;我们将通过一个实际案例——“我的咖啡店”小程序&#xff0c;来详细解析如何配置底部图…

c++编译过程初识

编译过程 预处理&#xff1a;主要是执行一些预处理指令&#xff0c;主要是#开头的代码&#xff0c;如#include 的头文件、#define 定义的宏常量、#ifdef #ifndef #endif等条件编译的代码&#xff0c;具体包括查找头文件、进行宏替换、根据条件编译等操作。 g -E example.cpp -…