easyui grid 增加合计行

时间:2024-10-21 10:02:56

一、首先,easyui  grid 的 showfooter 属性设置为 true

$aplgrid.datagrid({
data: globalExpenseClaimForm.ExpenseClaimItemLists,
title: "申请信息",
width: 1140,
singleSelect: false,
showFooter: true, //其他代码
});

  

二、用于渲染的数据 有特定的格式

(a)后台直接返回特定的格式

如下所示:  

{
"rows": [
{
"CreateDate": "24/07/2018",
"BillCode": "UN123",
"TotalPrice":30
}
],
"footer":[
{
"BillCode": "合计(元)",
"TotalPrice":0
}
]
}

  (b)当后台返回的格式不符合预期的时候,

1)我们可以对获取的数据 进行 转化,最终成为需要的格式

如下:

        globalExpenseClaimForm.ExpenseClaimItemLists = {
rows: globalExpenseClaimForm.ExpenseClaimItemList, footer: [{ AmountWithTax: null, InvoiceCode: "合计(元)"}]
};

     2)再把该对象赋值 给easyui grid 的 data 属性

      如下:

 $aplgrid.datagrid({
data: globalExpenseClaimForm.ExpenseClaimItemLists, //其他代码
})

      3)在提交的时候,记得把之前的对象转过来

我之前是把获取的json 对象 新加 了一个符合格式的 属性

那在提交的时候就把这个属性删掉就可以了

如下:

delete globalExpenseClaimForm.ExpenseClaimItemLists;