jQuery easyUI datagrid 增加求和统计行

简介:

在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>
目录
相关文章
EasyUI datagrid 从左至右递归合并表格
EasyUI datagrid 从左至右递归合并表格
111 2
EasyUI DataGrid 假分页
EasyUI DataGrid 假分页
171 0
|
JavaScript 前端开发 搜索推荐
JQuery EasyUI -- 日历选择器,2024年最新程序员经验分享
JQuery EasyUI -- 日历选择器,2024年最新程序员经验分享
|
JavaScript 前端开发
EasyUi js 加载数据表格DataGrid
EasyUi js 加载数据表格DataGrid
|
前端开发
easyui datagrid 的 tip实现
easyui datagrid 的 tip实现
410 0
|
JSON 监控 数据格式
Easy UI datagrid的学习
Easy UI datagrid的学习
265 0
Easyui datagrid 编辑结束时combobox显示value而不显示text
Easyui datagrid 编辑结束时combobox显示value而不显示text
203 1
EasyUI中datagrid的行编辑模式中,找到特定的Editor,并为其添加事件
EasyUI中datagrid的行编辑模式中,找到特定的Editor,并为其添加事件
623 0
EasyUI DataGrid 可编辑列级联操作
EasyUI DataGrid 可编辑列级联操作
192 0
easyui datagrid reload后自动全选解决
easyui datagrid reload后自动全选解决
227 0