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

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

充值模板展示数据格式化
   需要特别注意的有两点:
(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;
                        }
                    }
                }
            });
        }
    }
}

你可能感兴趣的:(Bootstrap)