jeecg填充自带的下拉框

最新推荐文章于 2025-03-17 16:54:55 发布
最新推荐文章于 2025-03-17 16:54:55 发布
阅读量2.7k 收藏 3
点赞数
CC 4.0 BY-SA版权
分类专栏： jeecg
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_37099009/article/details/99293380
本文介绍在Jeecg框架中如何将查询框转换为下拉筛选框，通过使用replace属性，可以轻松实现下拉数据的自定义，无需每次都增加数据字典，简化了开发流程。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在jeecg中的数据显示中 当query=‘true’ 会在表单顶端生成一个筛选框

  <t:dgCol title="姓名" field="realname" query="true" width="120"></t:dgCol>

如果要把它变成下拉框,自带的文档说明是需要连接数据字典,或者数据库表

在这里插入图片描述不可能每次做下拉数据,都不可能每次需要在后台加数据字典吧?
在这里插入图片描述
于是发现网上有说replace方法 这方法特隐蔽 文档都没仔细说明
在这里插入图片描述
用法是<t:dgCol title="年龄" field="age"query="true" replace ="五十周岁及以上_50,六十周岁及以上_60,全部_全部" width="120"></t:dgCol>
相当于实际上就是加个这个属性 replace ="显示字段_对应的值"

然后你就会发现你的框体变成了一个下拉框~

jeecg下拉框功能的实现
Aeyewp的博客
04-06 1万+
接下来我们介绍的只是jeecg中的一种下拉框的使用方法，用到的是replace方法，首先我们贴一下代码：<t:datagrid actionUrl="smsQueryAllController.do?datagrid" name="userQueryAllList" queryMode="group" fitColumns="true" idField="id"> <t:dgCol field="
jeecg 之下拉框
weixin_38673922的博客
11-16 1557
<!--QD_Area 为字典表数据--> <j-dict-select-tag v-model="formData.area" dictCode="QD_Area" :trigger-change="true" @change="getType" /> data() { return { formData:{ area:'崂山区' } } } methods: { getType(e){ this.formData.area = e
jeecg前端生成下拉框和里面的值 字典Code
Java&Develop的博客
04-01 1210
jeecg前端生成下拉框和里面的值
JEECG框架自定义下拉框
weixin_33907511的博客
02-24 3849
JEECG 框架下的 t:select 下拉框控件，只能是定义数据字典或者数据库中字段，如果在此控件中 ，下拉框的内容不能满足，我们该怎么办？ 如下图 合同号的下拉框： 前端部分： <input id="cpNo" name="cpNo" type="hidden" value='${opmJobPage.cpNo}' /><select id="contractNo"...
Vue JeecgBoot 下拉选使用数据字典，设置默认值，默认选中第一个值 - 附完整示例
m0_48968874的博客
06-19 6770
vue jeecg - boot 下拉选使用数据字典，设置默认值，默认选中第一个值
jQGrid动态填充select下拉框的选项值(动态填充)
01-08
在某些场景下，我们需要动态地填充select下拉框的选项值，以实现更灵活的数据输入。本篇文章将详细探讨如何在jQGrid中实现这一功能。 首先，理解`select`下拉框的基本概念。在HTML中，`<select>`元素用于创建一个...
jeecgboot表单下拉框角色
11-01
在 Jeecg Boot 表单中，下拉框通常用于选择列表数据，例如角色管理场景中，你可以创建一个“角色”实体 Role，并将其关联到用户表作为用户的角色选项。 在表单设计中，可能会使用动态加载数据的方式，如 `Select` ...
jeecg 行内编辑下拉框多选
05-26
在 JEECG 行内编辑中，如果需要使用下拉框多选，可以按照以下步骤进行操作： 1. 在数据库中创建一个字段，类型为varchar或text，用于存储多选结果。 2. 在 JEECG 中创建一个数据字典，用于存储下拉框中的选项。 3...
jeecgboot-vue3可搜索下拉框
最新发布
y199710的博客
03-17 224
【代码】jeecgboot-vue3可搜索下拉框。
[Jeecg]使用antdVue实现自定义下拉框式部门选择组件
lzz3717845的博客
11-05 2359
最近使用了Jeecg自带的antdVue弹出式部门选择组件，相对于整个页面来说，感觉弹出式不太协调，于是动手编写了下拉框式部门选择组件。下面给小伙伴儿们演示一下具体编写过程。
bootstrap树形下拉框 下拉框树形菜单
11-15
bootstrap树控件使用bootstrap-treeview.js树形控件在下拉框select中显示，带树形的下拉框
JeecgBoot自定义表单操作配置下拉框数据字典
qq_42613224的博客
02-18 1943
2.校验字段里填写对应的数据字典Code。1.页面属性勾选是否查询。
jeecgboot 数据字典下拉框j-dict-select-tag使用
热门推荐
level_Tiller的博客
09-04 2万+
页面配置数据字典product_type 后端 @Dict(dicCode = "product_type") private String type; 前端 <j-dict-select-tag v-decorator="['type', validatorRules.type]" placeholder="请选择商品类型" dictCode="product_type" :trigger-change="true" @change="getType
【已解决】JEECGBOOT中前端JDicSelectTag下拉框选中值未回填
m0_67856140的博客
01-01 1567
JDictSelectTag下拉框，选值无效，v-model和v-decorator用法详解
jeecg的下拉列表
weixin_30254435的博客
02-14 280
jeecg里面下拉列表的使用 ①建立数据字典seo_id <t:dictSelect field="operationPromotionAccount" typeGroupCode="seo_id" title="推广账号" > ②设置默认值 <t:dictSelect field="businessTypeIntention" extendJson="{class:'...
java input下拉列表_使用input实现下拉框功能
weixin_33289151的博客
02-16 1826
之前在做这个博客的写文章功能时，心里冒出了这样一个需求：当对文章进行标签选择时，可以直接点击input，实现下拉框功能，选择已有的标签，如若需要给文章添加新的标签，则直接添加即可。这个关键的技术点，就是如何使得input实现下拉框功能。你无须引用任何的插件，这里我使用html5即可实现。首先，展示一下效果图：火狐的展示图还是挺丑的，我再截一个360浏览器(谷歌浏览器最近让我卸载了)的展示效果图：那...
Java 导入导出excel，excel下拉框，excel为文本格式
微笑乀
04-24 1485
Java 导入导出excel，excel下拉框，excel为文本格式
Jeecg-boot年份选择组件
Sdnu08gis的专栏
05-09 3180
日期选择框（DatePicker）设置mode = "year"，弹出面板以年份显示，但是无法选择，也无法关闭面板。这是因为<DatePicker mode="year" />不等于YearPicker，<RangePicker mode="month" />不等于MonthRangePicker。mode属性是在 antd 3.0 时，为了控制面板展现状态而添加的属性，以支持展示时间面板等需求而添加的。mode只会简单的改变当前显示的面板，不会修改默...
navicate 字段长度设置无效_JeecgBoot开发页面，下拉框组件选值无效，哪配置错了？...
weixin_39608526的博客
12-08 1420
代码托管：Github和Gitee，国内用户使用Gitee下载速度较快。系统环境：Win10/Ubuntu，JDK8，maven，node，docker。依赖服务：Docker，MySQL8，Redis5一，问题Jeecg技术社区有用户提交一个issue，JDictSelectTag组件，trigger-change="true"选中无效。根据贴出来的问题代码，使用了v-model关联参数，同时设...
jeecg二级 下拉框
01-18
### 关于Jeecg框架中二级下拉框的实现 在Jeecg框架内，为了实现二级下拉框的功能，通常会利用其前后端分离的优势以及内置的数据交互机制来完成。具体来说，在前端部分可以借助Vue.js组件化特性构建联动菜单；而后端则负责提供相应的API接口用于获取各级选项数据。 #### 前端实现 (Vue) 对于前端而言，可以通过监听第一个下拉框的选择变化事件触发第二个下拉框的内容更新。下面是一个简单的例子： ```vue <template> <div class="dropdown-container"> <!-- 第一个下拉框 --> <a-select v-model:value="selectedFirstLevel" @change="handleFirstChange"> <a-select-option v-for="item in firstLevelOptions" :key="item.value">{{ item.label }}</a-select-option> </a-select> <!-- 第二个依赖前者的下拉框 --> <a-select v-if="secondLevelOptions.length > 0" v-model:value="selectedSecondLevel"> <a-select-option v-for="item in secondLevelOptions" :key="item.value">{{ item.label }}</a-select-option> </a-select> </div> </template> <script lang="ts"> import { defineComponent, ref } from 'vue'; export default defineComponent({ setup() { const selectedFirstLevel = ref(''); const selectedSecondLevel = ref(''); // 初始化一级分类列表 const fetchFirstLevelData = async () => { try { let response = await axios.get('/api/get-first-level-data'); return response.data; } catch(error){ console.error('Failed to load data', error); } }; // 根据选中的第一级ID加载第二级数据 const handleFirstChange = async value => { try{ let response = await axios.post(`/api/get-second-level-data`,{parentId: value}); setSecondLevelOptions(response.data); }catch(error){ console.error('Error fetching child options:',error); } }; function setSecondLevelOptions(data) { this.secondLevelOptions = data.map(item=>({value:item.id,label:item.name})); } return { selectedFirstLevel, selectedSecondLevel, firstLevelOptions: [], secondLevelOptions: [], handleFirstChange, fetchFirstLevelData }; }, mounted(){ this.fetchFirstLevelData().then((data)=>{ this.firstLevelOptions=data.map(item=>({value:item.id,label:item.name})) }); } }); </script> ``` 此代码片段展示了如何创建两个相互关联的选择框，并通过`@change`事件处理器实现了当用户改变第一个选择框时自动刷新第二个选择框内容的效果[^1]。 #### 后端 API 接口设计 后端需要准备两个主要的服务接口：一个是用来返回所有的一级类别信息；另一个则是接收父类别的 ID 参数并据此查询对应的子级别条目。这两个接口的具体路径可以根据实际需求定义，比如 `/api/get-first-level-data` 和 `/api/get-second-level-data` 。这些接口应该能够处理来自客户端发出的请求并将适当的结果集作为 JSON 数据发送回去[^2]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值