本文共 2975 字，大约阅读时间需要 9 分钟。

一、问题描述：

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 Map
   
     getAllWaterId(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 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！