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

心若自由何处是束缚

于 2023-07-27 17:16:28 发布

阅读量1.8k

点赞数

文章标签：前端 javascript 开发语言 easyui

原文链接：https://blog.youkuaiyun.com/tuomazhao/article/details/89351887

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决思路：

用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 总计_骑的博客-优快云博客