统计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: ‘费用类别‘, width:80,align:‘center‘},
                    { field: ‘CON‘, title: ‘合同报价‘, width:80,align:‘center‘},
                    { field: ‘PCOST‘, title: ‘成本预算‘, width:80,align:‘center‘},
                    { field: ‘BOR‘, title: ‘预借款‘, width: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>
时间: 2024-08-07 08:34:13

统计easyui datagrid某列之和显示在对应列下面的相关文章

easyui datagrid 诡异的无法显示问题

举个应用场景的例子来说明: 在采购单的编辑页面,上方为采购单自身的属性信息,下方使用tabs控件,加入两个tab页,分别为采购明细列表(DataGrid)和审核记录列表(DataGrid),即一个主业务实体携带两个子业务实体的情况,子业务实体中datagrid采用js代码请求后台数据加载并显示. 在采购单编辑页面初始化的时候,使用tabs控件的add方法,设置Content属性为嵌入iframe function AddSubTab(name, url) { $("#subTabs")

jquery easyui datagrid 保存/加载自定义配置每列属性

直接附上源代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Format DataGrid Columns - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="css/material/ea

Easyui datagrid 显示隐藏列

html: <div style="float: left; width: 1450px; height:auto;  "> <table id="List" class="easyui-datagrid" title="基站信息列表" width="1450px" style="height:580px;" data-options="rownumbers:

[Easyui - Grid]为easyui的datagrid、treegrid增加表头菜单,用于显示或隐藏列

为easyui的datagrid.treegrid增加表头菜单,用于显示或隐藏列 /** * @author 孙宇 * * @requires jQuery,EasyUI * * 为datagrid.treegrid增加表头菜单,用于显示或隐藏列,注意:冻结列不在此菜单中 */ var createGridHeaderContextMenu = function(e, field) { e.preventDefault(); var grid = $(this);/* grid本身 */ var

Easyui Datagrid 修改显示行号列宽度

EasyUI中Datagrid的第一列显示行号,可是如果数据量大的的时候,显示行号的那一列数据会显示不完全的. 可以通过修改Datagrid的样式来解决这个问题,在样式中加入下面这个样式,就可以自己修改显示行号列的宽度了 .datagrid-header-rownumber,.datagrid-cell-rownumber{ width:40px; }

实现easyui datagrid在没有数据时显示相关提示内容

本示例实现easyui datagrid加载/查询数据时,如果没有相关记录,则在datagrid中显示没有相关记录的提示信息,效果如下图所示 本实例要实现如下图所示的效果: 本示例easyui版本为1.3.4,如果运行后没有效果,自己检查easyui版本 不同版本对appendRow和mergeCells支持不一样,参数不一致什么的. 无法隐藏分页导航容器,可以用chrome开发工具或者firebug查看分页导航容器的样式和原始datagrid table表格的关系. 源代码如下 $(funct

jQuery Easyui datagrid动态列绑定

前几天有人在使用jQuery EasyUI的datagrid时,遇到不会动态绑定列的情况,而网上给出的例子可能也是比较早的处理办法,竟然需要修改easyui源码,其实解决这问题的思路是很简单,我们只需修改要显示的列即可.那位朋友最后改为这种处理时,发现还是有问题,最终我发现她返回不是合法json,里边多个方括号,这里推荐大家使用本站的JSON在线校验格式化工具来验证返回json是否正确. 这里我们以上篇文章中类似的简单json来说明这个问题,比如后台要根据当前用户的权限返回不同的json: 分享

easyui datagrid的列编辑

[第十五篇]easyui datagrid的列编辑,同时插入两张表的数据进去 看图说话. 需求:插入两张表,上面的表单是第一张表的内容,下面的两个表格是第二张详情表的内容,跟第一张表的id关联 第二张表有一个列是需要用户手动填写添加的. 国际惯例,上代码 <div id="cc" class="easyui-layout" style="width: 100%; height: 380px;"> <div data-option

JQuery EasyUI 学习——Struts2与EasyUI DataGrid数据表格结合使用显示数据库数据

因为EasyUI DataGrid只要取出后台传过来的一定格式的JSON数据,就可以在前台页面数据表格中,以一定形式显示数据库中的数据.此处,我们使用Struts2框架整合DataGrid,实现数据的显示. 一.页面内容 为了在页面中显示数据库中字段内容,需要定义一个table,通过EasyUI内部设计,自动显示数据,如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF