jqGrid 新增 合計行 footDate

做你的貓發表於2019-01-17
jQuery(table_id).jqGrid({
                url : url,//元件建立完成之後請求資料的url
                datatype : "json",//請求資料返回的型別。可選json,xml,txt
                postData:paramObj,
                rownumbers: true,
                rowNum : rownum,//一頁顯示多少條
//                rowList : [ 10, 20,30 ],//可供使用者選擇一頁顯示多少條
                pager : list_id,//表格頁尾的佔位符(一般是div)的id
                height:'auto',
                jsonReader:{
                    sidx:"sidx",
                    root:"list",
                    total:"totalPage",
                    page:"currentPage",
                    records:"rowNumber",
                    repeatitems:false
                },
//                sortname : 'id',//初始化的時候排序的欄位
//                sortorder : "desc",//排序方式,可選desc,asc
                footerrow:true,
                gridComplete:function(){
                     if(rownum==22){//該判斷只是我的jqGrid是公用的方法，加合計是單獨的表格有這一需求
                         var sum_sent=$(table_id).getCol('sendAmount',false,'sum');
                         var sum_return=$(table_id).getCol('returnAmount',false,'sum');
                         var sum_ratio =(Number(sum_return)/Number(sum_sent))*100;
                         var ratio=sum_ratio.toFixed(2);
                         $(table_id).footerData('set', {city: '總計',sendAmount:sum_sent,returnAmount:sum_return,returnRatio:ratio});
//這裡總共用到了兩個方法和兩個屬性  
//屬性：1、footerrow:true    2、gridComplete
//方法：1、getCol(name,true/false,sum/avg/count)  2、footerData
                     }
                },
                mtype : "post",//向後臺請求資料的ajax的型別。可選post,get
                viewrecords : true,//定義是否要顯示總記錄數
                caption :'',//表格的標題名字
                colNames :['賬期', '地市', '發貨量','退貨量', '退貨率'],//jqGrid的列顯示名字
                colModel :[      {name : 'month',index : 'list.month',width : 100}, 
                         {name : 'city',index : 'list.city',width : 80},
                         {name : 'sendAmount',index : 'list.sendAmount',width : 250}, 
                         {name : 'returnAmount',index : 'list.returnAmount',width : 150,align : "right"}, 
                         {name : 'returnRatio',index : 'list.returnRatio',width : 250,align : "right",formatter:function(cellvalue, options, rowObject){return cellvalue+'%';}}
                       ]
            }).trigger('reloadGrid');

去這裡看吧 你要的都有

http://blog.mn886.net/jqGrid/

 

相關文章