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

news2024/12/28 13:21:58

 版本: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.coloradmin.cn/o/2266941.html

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

相关文章

【RabbitMQ的死信队列】

死信队列 什么是死信队列死信队列的配置方式死信消息结构 什么是死信队列 消息被消费者确认拒绝。消费者把requeue参数设置为true(false)&#xff0c;并且在消费后&#xff0c;向RabbitMQ返回拒绝。channel.basicReject或者channel.basicNack。消息达到预设的TTL时限还一直没有…

详解从输入url到页面渲染

当你在浏览器中输入一个 URL 并按下回车键&#xff0c;浏览器会经历一系列步骤来加载并渲染页面。这些步骤包括 DNS 解析、缓存处理、建立连接、发送请求、接收响应、解析 HTML、构建 DOM 树和 CSSOM 树、执行 JavaScript、布局和绘制等。以下是这些步骤的详细解释&#xff0c;…

从 GitLab.com 到 JihuLab.com 的迁移指南

本文分享从 GitLab.com 到 JihuLab.com 的迁移指南。 近期&#xff0c;GitLab Inc. 针对其 SaaS 产品做了限制&#xff0c;如果被判定为国内用户&#xff0c;则会建议使用其在国内的发布版本极狐GitLab。从 GitLab SaaS 产品&#xff08;GitLab.com&#xff09;迁移到极狐GitL…

AIA - IMSIC之二(附IMSIC处理流程图)

本文属于《 RISC-V指令集基础系列教程》之一,欢迎查看其它文章。 1 ​​​​​​​通过IMSIC接收外部中断的CSR 软件通过《AIA - 新增的CSR》描述的CSR来访问IMSIC。 machine level 的 CSR 与 IMSIC 的 machine level interrupt file 可相互互动;而 supervisor level 的 CSR…

Python爬虫实战(保姆级登网页信息爬取教程)

此blog为爬虫实战教学&#xff0c;代码已附上&#xff0c;可以复制运行。若要直接看实战代码翻到博客后半部分。 本文使用selenium库进行爬虫&#xff0c;实现爬取数据操作&#xff0c;此库是通过模仿用户的操作进行对页面的处理。了解了这个思维模式&#xff0c;可以对代码进…

国产三维CAD正强势崛起

CAD软件作为现代工业设计和制造领域不可或缺的核心工具&#xff0c;其重要性不言而喻。它极大地提升了设计效率与精度&#xff0c;缩短了产品开发周期&#xff0c;为企业的创新与发展注入了强大动力。随着全球市场竞争的日益激烈&#xff0c;以及当前国际局势的复杂多变&#x…

编码滤波技术-SAO

1. AVS中的SAO样值偏移自适应补偿技术&#xff0c;首先将正在处理的块往左上移动了四行四列&#xff0c;超过图像边界的部分丢弃&#xff0c;右、下图像边界部分补齐。 也就是偏移前在图像边缘的块&#xff0c;进行去除和扩展得到偏移后的块。图像内部的块&#xff0c;正常往左…

Leetcode打卡:查询数组中元素出现的位置

执行结果&#xff1a;通过 题目 3159 查询数组中元素出现的位置 给你一个整数数组 nums &#xff0c;一个整数数组 queries 和一个整数 x 。 对于每个查询 queries[i] &#xff0c;你需要找到 nums 中第 queries[i] 个 x 的位置&#xff0c;并返回它的下标。如果数组中 x 的出…

【游戏设计原理】32 - 消费者剩余

1. 如何理解消费者剩余原理&#xff1f; 消费者剩余是一种经济学概念&#xff0c;表示消费者愿意为商品支付的最大金额与实际支付金额之间的差额。 简单来说&#xff0c;消费者剩余衡量了消费者从交易中获得的“额外价值”或“剩余利益”。 在传统商业模式下&#xff0c;由于…

肝功能不正常可以过教师入职体检吗?

如何看肝功能报告单 转氨酶正常等于肝功能正常吗?要想看懂肝功能报告单就要看懂各指标含义。 1、总胆红素TbiL正常值是 1.7-17.1μmol/L 急性黄疸型肝炎活动性肝炎肝坏死、肝癌、胰头癌都异常偏高。 2、直接胆红素 DbiL正常值是 0-6.84μmol/L 结石病、肝癌、胰头癌与这项…

CH340系列芯片驱动电路·CH340系列芯片驱动!!!

目录 CH340基础知识 CH340常见类型 CH340引脚功能讲解 CH340驱动电路 CH340系列芯片数据手册 编写不易&#xff0c;仅供学习&#xff0c;请勿搬运&#xff0c;感谢理解 常见元器件驱动电路文章专栏连接 LM7805系列降压芯片驱动电路降压芯片驱动电路详解-CSDN博客 ME62…

(公开源码)基于springboot+vue的在线课程教学管理系统 计算机毕业设计P10046

项目说明 本号所发布的项目均由我部署运行验证&#xff0c;可保证项目系统正常运行&#xff0c;以及提供完整源码。 如需要远程部署/定制/讲解系统&#xff0c;可以联系我。定制项目未经同意不会上传&#xff01; 项目源码获取方式放在文章末尾处 注&#xff1a;项目仅供学…

UE5 把场景转成HDR图

目录 使用影片渲染队列 使用影片渲染队列 以下方法实测 UE5.4 有效 1.打开影片渲染队列窗口。依次打开&#xff1a;窗口—过场动画—影片渲染队列 2.添加Sequence动画。点击“渲染”按钮&#xff0c;选择要渲染的Sequence。 3.设置输出配置。 点击“Unsaved Config”打开配置…

使用RKNN进行YOLOv8人体姿态估计的实战教程:yolov8-pose.onnx转yolov8-pose.rknn+推理全流程

之前文章有提到“YOLOv8的原生模型包含了后处理步骤,其中一些形状超出了RK3588的矩阵计算限制,因此需要对输出层进行一些裁剪”,通过裁剪后得到的onnx能够顺利的进行rknn转换,本文将对转rnkk过程,以及相应的后处理进行阐述。并在文末附上全部源码、数据、模型的百度云盘链…

嵌入式硬件杂谈(八)电源的“纹波”到底是什么?

纹波的引入&#xff1a;在我们嵌入式设备中&#xff0c;很多时候电路电源的纹波很敏感&#xff0c;纹波太大会导致系统不工作&#xff0c;因此设计一个纹波很小的电路就是我们的需求了。 电路的纹波是什么&#xff1f; 纹波&#xff08;Ripple&#xff09;是指电源输出中叠加在…

水电站视频智能监控系统方案设计与技术应用方案

一、背景需求 水电站作为国家重要的能源基地&#xff0c;其安全运行对于保障能源供应和社会稳定具有重要意义。然而&#xff0c;传统的人工监控方式存在着诸多问题&#xff0c;如人力成本高、监控范围有限、反应不及时等。因此&#xff0c;水电站急需引进一种先进的视频智能监控…

MAC M4安装QT使用国内镜像源在线安装

MAC M4安装QT使用国内镜像源在线安装 一、下载安装包1. 访问[https://www.qt.io/](https://www.qt.io/)下载在线安装包2. 下载结果 二、创建QT账户&#xff0c;安装的时候需要三、安装1. 终端打开安装包2. 指定安装源3. 运行安装完的QT 一、下载安装包 1. 访问https://www.qt.…

实现类似gpt 打字效果

1. css的动画&#xff08;animation) css中实现动画有两种方式&#xff1a;transition过渡动画、 animation自定义动画。 具体的可以看MDN链接&#xff1a;https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation 使用keyframes自定义关键帧动画并未其命名使用自定义动…

CV(7)--神经网络训练

前言 仅记录学习过程&#xff0c;有问题欢迎讨论 什么是神经网络&#xff1a; 神经网络是一种模拟人脑神经元工作原理的算法&#xff0c;它由多个神经元组成&#xff0c;每个神经元都接受输入&#xff0c;通过计算产生输出&#xff0c;并将输出传递给其他神经元。神经网络的…

python实战案例笔记:统计出数据中路劲下没有文件的文件夹

数据样例&#xff1a;&#x1f447;有如下excel数据 需求&#xff1a;有如下excel&#xff0c;a.xls&#xff0c;统计出路劲下没有文件的路劲 详细实现代码&#xff1a; import os from openpyxl import Workbook from datetime import datetimedef get_empty_dirs(paths):# …