EasyUI Datagrid 实现动态计算总计-优快云博客

本文链接：https://blog.youkuaiyun.com/awen6666/article/details/103616180

本文介绍如何使用EasyUI的Datagrid组件实现商品价格的动态计算和总计显示功能。通过监听编辑事件，自动更新每行的商品总额，并在表格底部实时显示所有商品的总价。同时，考虑到删除操作对总价的影响，文章详细解释了如何在点击删除按钮时，正确更新总价。

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

$(document).ready(function () {
    $("#pnlDg").datagrid({
        onAfterEdit: function(rowIndex,rowData,changes){
            fillTotalPrice(); // 计算所有行总额
   			fillprdAmount(rowIndex,rowData); // 计算该行总额
        }
    });
});
//计算总价
function countPrice(){
    var totalPrice = 0;
    var data = $('#pnlDg').datagrid('getData').rows;  // 返回grid加载的数据
    for(var i=0;i<data.length;i++){
        if(data[i]['delete']!=1){
            totalPrice += Number(data[i].prdPrice*data[i].prdQty);  // js默认字符串相加,需使用Number或者parseFloat转换再相加
        }
    }
    // 判断是否点击删除按钮,如果是总价格还需要减去选中行的
    $("#pnlDg_ctlDel").click(function(){
        var delData = $('#pnlDg').datagrid('getSelected');  // 得到选中行
        delData['delete']=1;
        fillTotalPrice();
    });
 	console.log("totalprice1:"+totalPrice);
    return totalPrice.toFixed(2);  // 四舍五入保留两位小数
}

//将计算后的数据填充到指定panel的control
function fillTotalPrice(){
    $('#pnlInfo').form('load',{
     	quoTotal: countPrice()
    })
}
// 将计算后的数据填充到改行对应总额
function fillprdAmount(rowIndex,rowData){
 	console.log(JSON.stringify(rowData));
    $('#pnlDg').datagrid('updateRow',{
        index: rowIndex,
        row: {
            prdAmount: rowData.prdPrice*rowData.prdQty
        }
    });
}

easyui自动计算