jQuery easyUI datagrid 增加求和统计行的实现代码_jquery

在datagrid的onLoadSuccess事件增加代码处理。

<style type="text/css">

    .subtotal { font-weight: bold; }/*合计单元格样式*/
  </style>
  <script type="text/javascript">
    function onLoadSuccess() {
      //添加“合计”列
      $('#table').datagrid('appendRow', {
        Saler: '<span class="subtotal">合计</span>',
        TotalOrderCount: '<span class="subtotal">' + compute("TotalOrderCount") + '</span>',
        TotalOrderMoney: '<span class="subtotal">' + compute("TotalOrderMoney") + '</span>',
        TotalOrderScore: '<span class="subtotal">' + compute("TotalOrderScore") + '</span>',
        TotalTrailCount: '<span class="subtotal">' + compute("TotalTrailCount") + '</span>',
        Rate: '<span class="subtotal">' + ((compute("TotalOrderScore") / compute("TotalTrailCount")) * 100).toFixed(2) + '</span>'
      });
    }
    //指定列求和
    function compute(colName) {
      var rows = $('#table').datagrid('getRows');
      var total = 0;
      for (var i = 0; i < rows.length; i++) {
        total += parseFloat(rows[i][colName]);
      }
      return total;
    }
  </script> 

以上这篇jQuery easyUI datagrid 增加求和统计行的实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索easyui
, datagrid
求和
easyui datagrid 求和、easyui datagrid 统计、jquery easyui 统计图、easyui datagrid、easyui datagrid 分页,以便于您获取更多的相关知识。

时间: 2024-08-31 11:16:20

jQuery easyUI datagrid 增加求和统计行的实现代码_jquery的相关文章

jQuery easyUI datagrid 增加求和统计行

在datagrid的onLoadSuccess事件增加代码处理.     <style type="text/css">         .subtotal { font-weight: bold; }/*合计单元格样式*/     </style>     <script type="text/javascript">         function onLoadSuccess() {             //添加&quo

jQuery EasyUI中对表格进行编辑的实现代码_jquery

效果图: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8&

扩展easyui.datagrid,添加数据loading遮罩效果代码_jquery

在使用的过程中,发现easyui目前还缺少一些小功能或是未开放出来 拿datagrid插件来说,数据加载提供了两种方式远程和本地数据加载,但只有远程数据加载时才会显示数据加载的遮罩层,在数据加载完成后隐藏遮罩层:而本地数据加载时则不会出现遮罩,这应该是考虑到本地数据加载的速度很快则没有使用遮罩的必要 不过呢,在实际的项目开发过程中使用时,没有考虑使用url方式加载数据,则采用了loadData方法来异步加载数据,这个时候就很有必要显示遮罩层来提示用户当前正在加载数据,分析easyui的datag

jQuery Easyui datagrid editor为combobox时指定数据源实例_jquery

当在datagrid行内部应用添加编辑操作时,引入combobox是非常方便的操作,我在引入combobox时对数据源这快做个总结,在做demo的过程中遇到个问题,就是当你选择了下拉框的值后点击保存,此时显示的是value值,而不是text值,这时使用格式化函数解决此问题. var Address = [{ "value": "1", "text": "CHINA" }, { "value": "

jquery easyui datagrid实现增加,修改,删除方法总结_jquery

本文实例讲述了jquery easyui datagrid实现增加,修改,删除的方法.分享给大家供大家参考,具体如下: 页面: <body> <form id="form1" runat="server"> <table id="tt"> </table> </form> </body> 引用的JS: <link rel="stylesheet" t

jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码_jquery

1.先给出问题解决后的代码 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%> <% String path = request.getContextPath(); S

jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果_jquery

1.实现行的上移.下移. 说明: 1.1 通过datagrid生成的表格有固定的格式,比如,表格div的class名是datagrid-view.比如每一行tr都有id和datagrid-row-index属性等. 1.2 在上移和下移以后,我们将移动以后的两行的id和datagrid-row-index属性也必须互换,这样能保证datagrid-row-index=0的行肯定是页面显示的表格的第一行,=1的是第二行等等.将来保存的时候,就是通过取这个属性值找某一行的数据的. function

jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据_jquery

废话不多说了,直接给大家贴代码了. 关键代码如下所示: /// 最近一次使用编辑行 一切正常 ///<summary> ///初始化数据容器 ///</summary> function InitGrid(){ var lastIndex; $("#grid").datagrid({ url:'', loadMsg:'数据加载中,请稍后......', border:false, fitColumns:true, remoteSort:false, onDblC

jquery easyui datagrid 某列的数据为0或空时,这个列不显示

问题描述 jquery easyui datagrid 某列的数据为0或空时,这个列不显示 jquery easyui datagrid 某列的数据为0或空时,怎么让这个列不显示. 解决方案 问题是你所有行的此列都是0没有..要是有些列不是0那不是也被隐藏了, 如果是只要有0或者为空就隐藏,自己遍历下返回的数据,然后调用hideColumn执行隐藏此列$('#dg').datagrid('hideColumn','列名称') 解决方案二: jquery easyui datagrid 列宽按百分