使用EasyUI的datagrid实现报表统计，添加总计行,选中数据行的求和计算等_tuomazhao的博客-CSDN博客
效果图如下：
jsp前台页面：
<table id="datagridTable" class="easyui-datagrid" fitColumns="false" border="true" showFooter="true"> <thead> <tr> <th data-options="field:'ck',checkbox:true,width:5">全选</th> <th data-options="field:'TRADE_ID',width:180,sortable:false,halign:'center',align:'center'">订单编号</th> <th data-options="field:'MAILNO',width:150,sortable:false,halign:'center',align:'center'" >运单号</th> <th data-options="field:'TRADE_DEPT_ID',width:100,sortable:false,halign:'center',align:'center'">渠道编码</th> <th data-options="field:'DEPART_NAME',width:120,sortable:false,halign:'center',align:'center'">渠道名称</th> <th data-options="field:'D_CONTACT',width:100,sortable:false,halign:'center',align:'center'">联系人</th> <th data-options="field:'D_MOBILE',width:100,sortable:false,halign:'center',align:'center'">联系电话</th> <th data-options="field:'D_ADDRESS',width:100,sortable:false,halign:'center',align:'center'">配送地址</th> <th data-options="field:'COMMDITY_NAME',width:100,sortable:false,halign:'center',align:'center'">商品名称</th> <th data-options="field:'PAGE_NUM',sortable:false,halign:'center',align:'center'">件数</th> <th data-options="field:'COMMDITY_NUM',width:100,sortable:false,halign:'center',align:'center'">数量(张)</th> <th data-options="field:'WEIGHT',width:100,sortable:false,halign:'center',align:'center'">重量(KG)</th> <th data-options="field:'FIRST_WEIGHT_FEE',width:100,sortable:false,halign:'center',align:'center'">首重费用(元)</th> <th data-options="field:'FEIGHT_FEE',width:100,sortable:false,halign:'center',align:'center'">续重费用(元)</th> <th data-options="field:'PROT_ORGFEE',width:100,sortable:false,halign:'center',align:'center'">保价原值(元)</th> <th data-options="field:'PROT_FEE',width:100,sortable:false,halign:'center',align:'center'">保价费(元)</th> <th data-options="field:'FEIGHT_FEE_TOTAL',width:100,sortable:false,halign:'center',align:'center'">合计(元)</th> <th data-options="field:'DELIVER_TIME',width:150,sortable:false,halign:'center',align:'center'">配送日期</th> </tr> </thead> </table>js实现：
//列表数据查询function queryDetails(){ var startTime = $.trim($("#startTime").val()); var endTime = $.trim($("#endTime").val()); if(startTime == "undefine" || startTime == null || startTime == ''){ $.walk.alert("请输入交接开始时间！", "info"); return; } if(endTime == "undefine" || endTime == null || endTime == ''){ $.walk.alert("请输入交接结束时间！", "info"); return; } $("#datagridTable").datagrid({ url : baseUrl + "/logisticsStatus/qryLogistcsDeliverDay", queryParams : { startTime:startTime, endTime:endTime }, pageNumber:1, pageSize:5, nowrap:false, pageList:[30,50,100,200,300], pagination: true, loadMsg: "数据加载中....", collapsible: true,// onClickCell:function (rowIndex, field, value){// setTimeout(function(){// reckon();// },1);// }, onCheck:function (rowIndex, rowData){ setTimeout(function(){//延时执行自己体会效果 debugger; reckon(); },0.001); }, onUncheck:function (rowIndex, rowData){ setTimeout(function(){ reckon(); },0.001); }, onLoadSuccess: onLoad });} //计算总计function onLoad(){ //给全选复选框绑定click事件 $(".datagrid-header-check").children('input').bind("click",function(){ setTimeout(function(){ reckon(); },0.001); }); //初始化添加总计行 addTotalRow();}//初始化添加总计行function addTotalRow(){ //添加“合计”列-[添加统计行] $('#datagridTable').datagrid('appendRow',{ TRADE_ID: '<span id="span_font_item">合 计: ' + '共 ' + sumTotal() + ' 单</span>', PAGE_NUM: '<span id="span_font_item">' + compute("PAGE_NUM") + '</span>', COMMDITY_NUM: '<span id="span_font_item">' + compute("COMMDITY_NUM") + '</span>', WEIGHT: '<span id="span_font_item">' + compute("WEIGHT").toFixed(3) + '</span>', FIRST_WEIGHT_FEE: '<span id="span_font_item">' + compute("FIRST_WEIGHT_FEE").toFixed(2) + '</span>', FEIGHT_FEE: '<span id="span_font_item">' + compute("FEIGHT_FEE").toFixed(2) + '</span>', PROT_ORGFEE: '<span id="span_font_item">' + compute("PROT_ORGFEE").toFixed(2) + '</span>', PROT_FEE: '<span id="span_font_item">' + compute("PROT_FEE").toFixed(2) + '</span>', FEIGHT_FEE_TOTAL: '<span id="span_font_item">' + compute("FEIGHT_FEE_TOTAL").toFixed(2) + '</span>' }); //合并单元格 var rowsTotal = $('#datagridTable').datagrid('getRows');//获取最新的所有行 $('#datagridTable').datagrid('mergeCells',{ index: rowsTotal.length - 1, field: 'TRADE_ID', colspan:8 }); //设置添加行的复选框不可见) $(".datagrid-cell-check").children('input')[rowsTotal.length - 1].style.visibility="hidden"; //设置增加过总计标识 isExt = true;} //总计计算function reckon(){ //删除统计行，如果存在统计行则删除后重新添加 if(isExt){ var rows = $('#datagridTable').datagrid('getRows'); $('#datagridTable').datagrid('deleteRow', rows.length - 1); } addTotalRow();} //总选中条数function sumTotal(){ var rows = $('#datagridTable').datagrid('getSelections'); return rows.length;} //指定列求和function compute(colName) { debugger; var rows = $('#datagridTable').datagrid('getSelections'); var total = 0; for (var i = 0; i < rows.length; i++) { total += parseFloat(rows[i][colName]); } return total; }Original url: Access
Created at: 2020-09-22 21:46:18
Category: default
Tags: none
未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到
最新评论