bootstrap-suggest插件处理复杂对象时的解决方案

文章目录

• ​​一、问题描述：​​
• ​​二、解决办法：​​

• ​​后端代码:​​
• ​​jsp页面：​​
• ​​js代码渲染：​​
• ​​实现效果：​​

• ​​三、插件下载地址：​​

一、问题描述：

在用bootstrap-suggest插件的时候，如果要提示的属性中有关联对象的话，前端页面显示不出来(下面的areaId属性加载不出来)
wellInfo类关键属性:

public class WellInfo {
    private String wellId;  
    private Area area;
    private String wellType;    
    private String abandonWell;

Area类关键属性：

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 Map<String,Object> getAllWaterId(HttpServletRequest req,HttpServletResponse res){
        //获取所有注水井编号
        List<WellInfo> wellInfos=wellInfoService.getAllWaterId();
        int count=0;
        if(wellInfos!=null&&wellInfos.size()>0){
            count=wellInfos.size();
        }
        //创建result对象，保存返回结果
        Map<String,Object> result=new HashMap<>(2);
        result.put("count",count);
        result.put("value",wellInfos);
        return result;
    }

jsp页面：

<label class="col-sm-1 control-label text-right">井编号:</label>
                <div class="col-sm-2">
                    <div class="input-group">
                        <input type="text" class="form-control" name="wellInfo.wellId" id="wellId"/>
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-white dropdown-toggle"
                                    data-toggle="dropdown">
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                            </ul>
                        </div>
                    </div>
                </div>

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) {
        });

实现效果：

可以看到作业区编号已经加载出来了