效果如下：

效果图

前端：

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 '' + row.att + '' + '';

}}

] ],

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 map =new HashMap<>();

map.put("grQtyList",igrMapper.getGRQty(ppoNo,pn));

return (JSONObject) JSONObject.toJSON(map);

}

映射文件如下：

SELECT SUM(GR_Qty) FROM igr WHERE 1=1

and PPO_No=#{ppoNo}

AND PN=#{pn}