zoukankan      html  css  js  c++  java
  • 统计easyui datagrid某列之和显示在对应列下面

    项目需求要在表格下面加一行统计求和的,结果网上搜寻了一堆,要么说的不详细,高深大牛们的见解;要么实现不了,搜寻老半天修改出一个可以用的,做一下学习记录,新手菜鸟,欢迎指正和新解决方案。

    最终效果图:

    JS代码

    editcount = 0;
                var objTable=$("#personManage");
                objTable.datagrid({ pagination: true,
                                      pagePosition:'bottom',
                                      onLoadSuccess: compute,//加载完毕后执行计算
                                      fitColumns:false,
                                      enableHeaderClickMenu:false,
                                      singleSelect:false,
                                      autoRowHeight:true,
                                      nowrap:true,
                    url:'${ctx}/cpv3QuotationCtrl/costGather?RndId='+Math.random(),
                    loadFilter:pagerFilter,
                    queryParams:buildParams(),
                    toolbar:"#toolbar",
                    rownumbers:true,
                    showFooter: true,
                    columns: [[
                        { field: 'EVAL', title: '费用类别', 80,align:'center'},
                        { field: 'CON', title: '合同报价', 80,align:'center'},
                        { field: 'PCOST', title: '成本预算', 80,align:'center'},
                        { field: 'BOR', title: '预借款', 80,align:'center'}
                    ]]
                  // fitColumns:true//自适应宽度、可以水平滚动
                });
     function compute() {//计算函数
                var rows = $('#personManage').datagrid('getRows')//获取当前的数据行
                var ptotal = 0//计算listprice的总和
                ,utotal=0//统计unitcost的总和
                ,btotal=0;//统计unitcost的总和
                for (var i = 0; i < rows.length; i++) {
                    ptotal += rows[i]['CON'];
                    utotal += rows[i]['PCOST'];
                    btotal += rows[i]['BOR'];
                }
                //新增一行显示统计信息
                $('#personManage').datagrid('appendRow', { EVAL: '<b>统计:</b>', CON: ptotal, PCOST: utotal ,BOR : btotal});
            }

    JSP页面

    <table id="personManage">
         </table>
  • 相关阅读:
    8.C++-类的关键字
    BFS-九宫格重排(详解)
    7.C++类与封装的概念
    4.数码相框-freetype多行显示,居中显示
    3.数码相框-通过freetype库实现矢量显示
    Linux-iconv命令、并批处理将所有GBK文件转换为UTF8(18)
    2.数码相框-编码(ASCII/GB2312/Unicode)介绍,并使LCD显示汉字字符(2)
    1.数码相框-相框框架分析(1)
    Kotlin 之操作符重载
    Andorid-解决View重复点击的思路
  • 原文地址:https://www.cnblogs.com/yeyuchangfeng/p/4536793.html
Copyright © 2011-2022 走看看