bootstrap-table中formatter使用ajax返回数据进行回显

一时失言乱红尘 2023-05-31 02:52 20阅读 0赞

### bootstrap-table中formatter使用ajax返回数据进行回显 ###

*   *   *   *  一、后台controller请求
             *  二、对应列中，formatter操作

开发中需要实现这样一个功能：会员管理添加时的充值模板可以复选框勾选多个充值模板，这里存的数据是多个充值模板的id,但是列表需要显示这个充值模板的名称，故需要在formatter中使用ajax进行后台交互查询出这些id对应的模板名称，现对ajax返回数据绑定问题做个记录。

#### 一、后台controller请求 ####

/*
     数据列表回显充值模板名字
      */
     @PostMapping("/selectRechageSchemeNameByIds")
     @ResponseBody
     public R selectRechageSchemeNameByIds(String ids) {
        
       String idArray[] = ids.split(",");
       StringBuilder rechageSchemeName = new StringBuilder();
       if (idArray.length > 0) {
        
           for (String id : idArray) {
        
               MemberRechargeScheme memberRechargeScheme = memberRechargeSchemeService.selectMemberRechargeSchemeById(Long.valueOf(id));
               if (memberRechargeScheme != null) {
        
                   rechageSchemeName.append(memberRechargeScheme.getRechageSchemeName() + ",");
               }
           }
       }
       if (rechageSchemeName.length() > 0) {
        
           rechageSchemeName.deleteCharAt(rechageSchemeName.length() - 1);
       }
       R r = R.success();
       r.put("rechageSchemeName", rechageSchemeName);
       return r;
    }

#### 二、对应列中，formatter操作 ####

{
        
        field: 'rechargeSchemeId',
        title: '充值模板',
        formatter: function (value, row, index) {
        
            if (value.length > 0) {
        
                var rechageSchemeName;
                $.ajax({
        
                    url: prefix + "/selectRechageSchemeNameByIds", //请求后台
                    type: "post",
                    data: {
        "ids": value},
                    async: false,
                    success: function (data) {
        
                        if (data.code == 0) {
        
                            if (data.rechageSchemeName.length > 0) {
        
                                rechageSchemeName = data.rechageSchemeName;
                            }
                        }
                    }
                });
                return rechageSchemeName;
            }
        }
    }

![充值模板展示数据格式化][20191022130943323.png]  
需要特别注意的有两点：  
（1）、ajax请求必须设置为同步请求： async: false,异步请求返回的数据无法回显。  
（2）、不可在success方法中直接返回data.rechageSchemeName，需要设置变量rechageSchemeName，给它赋值之后再返回此变量。下面这种方式数据无法回显：

{
        
        field: 'rechargeSchemeId',
        title: '充值模板',
        formatter: function (value, row, index) {
        
            if (value.length > 0) {
        
                $.ajax({
        
                    url: prefix + "/selectRechageSchemeNameByIds", //请求后台
                    type: "post",
                    data: {
        "ids": value},
                    async: false,
                    success: function (data) {
        
                        if (data.code == 0) {
        
                            if (data.rechageSchemeName.length > 0) {
        
                                return data.rechageSchemeName;
                            }
                        }
                    }
                });
            }
        }
    }

[20191022130943323.png]: /images/20230531/4be164baa5324c6fa4956c6ab2ae2b24.png