bootstrap-suggest插件处理复杂对象时的解决方案
发布日期:2021-10-05 01:18:10
浏览次数:3
分类:技术文章
本文共 2975 字,大约阅读时间需要 9 分钟。
一、问题描述:
在用bootstrap-suggest插件的时候,如果要提示的属性中有关联对象的话,前端页面显示不出来(下面的areaId属性加载不出来) wellInfo类关键属性:public class WellInfo { private String wellId; private Area area; private String wellType; private String abandonWell;
public class Area { private String areaId; private String areaName; private String areaAddress; private String areaPhone; private String areaRemark;
我们利用插件的processData属性来格式化后端传来的JSON数据。
后端代码:
@RequestMapping(value = "/getAllWaterId",method = { RequestMethod.GET,RequestMethod.POST}) @ResponseBody public MapgetAllWaterId(HttpServletRequest req,HttpServletResponse res){ //获取所有注水井编号 List wellInfos=wellInfoService.getAllWaterId(); int count=0; if(wellInfos!=null&&wellInfos.size()>0){ count=wellInfos.size(); } //创建result对象,保存返回结果 Map result=new HashMap<>(2); result.put("count",count); result.put("value",wellInfos); return result; }
jsp页面:
js代码渲染:
//bootstrap-suggest插件加载所有油井 $("#wellId").bsSuggest('init',{ clearable:true, //是否可清除已输入的内容 url:"/opms/wellInfo/getAllOilId", showBtn:true, //是否显示可下拉按钮 ignorecase:true, //前端搜索匹配时,忽略大小写 hideOnSelect:true, //鼠标从列表单击选择了值时,是否隐藏选择列表 listAlign:'auto', //提示列表对齐位置,left/right/auto idField:"wellId", //每组数据的哪个字段作为 data-id,优先级高于 indexId 设置(推荐) keyField :"wellId", //每组数据的哪个字段作为输入框内容,优先级高于 indexKey 设置(推荐) maxOptionCount: 200, // 选择列表最多显示的可选项数量,默认为 200 effectiveFields: ["wellId","wellType","areaId","abandonWell"],// 有效显示于列表中的字段,非有效字段都会过滤,默认全部有效。 effectiveFieldsAlias: { //有效字段的别名对象,用于 header 的显示 "wellId":"井编号", "wellType":"井类型", "areaId":"作业区", "abandonWell":"是否报废" }, processData:function (json) { //格式化数据 var data={ value:[]}; $.each(json.value,function (i,v) { data.value.push({ wellId:v.wellId, wellType:v.wellType, areaId:v.area.areaId, abandonWell:v.abandonWell }); }); return data; }, //UI inputWarnColor: 'rgba(255,0,0,.1)', //输入框内容不是下拉列表选择时的警告色 }).on("onSetSelectValue",function (e,keyword) { }).on("onUnsetSelectValue",function (e) { });
实现效果:
转载地址:https://blog.csdn.net/liufeifeihuawei/article/details/117037543 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
逛到本站,mark一下
[***.202.152.39]2024年03月22日 01时41分28秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
寻找最大和最小数值
2021-06-29
易错点
2021-06-29
ESP32笔记(5) 上传https服务器数据格式定义
2021-06-29
TCP 理论
2021-06-29
ble原理(4)主机的扫描间隔
2021-06-29
NRF52832笔记(11)ble绑定和配对
2021-06-29
链表---理论
2019-04-26
结构体对齐理论
2019-04-26
嵌入式软件的框架
2019-04-26
mcu 内存分配
2019-04-26
C 嵌入式面试题(一)
2019-04-26
CC26x2R1笔记(7)CCS9.2 CC26xx工程设置的环境变量
2019-04-26
CC26x2R1笔记(8)CCS9.2 cc26xx环境的搭建
2019-04-26
NRF52832笔记(12) 详解蓝牙空中升级(BLE OTA)原理与步骤
2019-04-26
c 语言面试题(二)
2019-04-26
NRF52832笔记(13)软件模拟spi 4种模式
2019-04-26
NRF52832笔记(14) 软件模拟I2C
2019-04-26
NRF52832笔记(15)keil 仿真查看变量实时变化
2019-04-26
C语言排序算法
2019-04-26
ESP32笔记(7) OpenSSL下载安装
2019-04-26