easyUI之ajax请求单个列数据显示在datagrid中

效果如下：

前端：

  columns: [
                    [{field: 'no',title: 'No.', align: 'center', titleAlign: true,
                            formatter: function (value, row, index) {//设置自动增长列
                                index += 1;//设置起始序号为1，如果不加这行代码序号就会从0开始
                                return index++;//根据行的数量不断自增
                            }},
                        {field: 'id', title: '编号', checkbox: true, align: 'center', titleAlign: true},
                        {field: 'ppoQty', title: '采购数量', align: 'center', titleAlign: true},
                        {field: 'status', title: '到货否', align: 'center', titleAlign: true},
                        {field: 'arrivalNumber',id: 'arrivalNumber',title: '到货数量',align: 'center', titleAlign: true,
                            formatter: function (value, row, index) {
                                if (row.pn != null || row.ppoNo != null) {
                                    arrivalNumber = showGrQty(value, row);
                                }
                                return arrivalNumber;
                            }
                        },
                        {field: 'currency', title: '币别', align: 'center', titleAlign: true},
                        { field: 'att', title: '附件', align: 'center', titleAlign: true,
                            formatter: function (value, row, index) {
                                if (row.att != null)
                                    return '<a style="color:blue" target="_blank"  href="/mfpqm/' + row.att + '" >' + row.att + '</a>' + '</br>';
                            }}
                    ] ],

Ajax请求数据：
注：这里async必须设置为 false，否则请求不到数据。
原因如下：

async. 默认是 true，即为异步方式,
ajax执行后，会继续执行ajax后面的脚本，直到服务器端返回数据后，触发$.ajax里的success方法，这时候执行的是两个线程。
async 设置为 false，
则所有的请求均为同步请求，在没有返回值之前，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

 //      获取已收货数量
    function showGrQty(value, row) {
        var arrivalNumber;
        $.ajax({
            url: "queryPnInFo.do",
            type: "post",
            data: {ppoNo: row.ppoNo, pn: row.pn},
            async: false,
            dataType: "json",
            success: function (data) {
                if (data.grQtyList != null) {
                    arrivalNumber = data.grQtyList;
                } else {
                    arrivalNumber = 0;
                } 
         }
   });
        return arrivalNumber;
    }

后端Constroller如下：

    @RequestMapping(value = "/queryPnInFo.do",method = RequestMethod.POST)
    @ResponseBody
    public JSONObject queryBuInfo(@RequestParam("pn") String pn,@RequestParam(value = "ppoNo", required = false)String ppoNo){
        Map<String,Object> map =new HashMap<>();
        map.put("grQtyList",igrMapper.getGRQty(ppoNo,pn));
        return (JSONObject) JSONObject.toJSON(map);
    }

映射文件如下：

 <select id="getGRQty" resultType="java.lang.Integer">
    SELECT SUM(GR_Qty) FROM igr WHERE 1=1
    <if test="ppoNo != null and ppoNo !=''">and PPO_No=#{ppoNo}</if>
    <if test="pn!=null">  AND PN=#{pn}</if>
  </select>