EasyUI中DataGrid表格增加最底下的汇总行

文章介绍了一种方法,通过EasyUI的datagrid组件结合JavaScript,实现在表格中动态添加总计行,并对选中的数据行进行求和计算。主要涉及datagrid的onLoadSuccess事件、appendRow方法以及自定义函数进行总计和求和操作。
摘要由CSDN通过智能技术生成

解决思路:

用datagrid的appendRow方法,增加一行,具体的汇总结果用单独的方法去计算

第一步:

在下面增加onSuccess


$("#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,

        onCheck:function (rowIndex, rowData){

            setTimeout(function(){//延时执行自己体会效果

                debugger;

                reckon();

            },0.001);

        },

        onUncheck:function (rowIndex, rowData){

            setTimeout(function(){

                reckon();

            },0.001);

        },

        onLoadSuccess: onLoad

    });

下面实现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">合&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;计:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + '共&nbsp;' + sumTotal() + '&nbsp;单</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;

}

原文链接:使用EasyUI的datagrid实现报表统计,添加总计行,选中数据行的求和计算等_datagrid 总计_骑的博客-CSDN博客

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值