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

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

开发中需要实现这样一个功能：会员管理添加时的充值模板可以复选框勾选多个充值模板，这里存的数据是多个充值模板的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;

        }

    }

}

 

 

 

需要特别注意的有两点：
（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;

                        }

                    }

                }

            });

        }

    }

}

 

 

https://blog.csdn.net/qq_34896730/article/details/102680255