jqgrid 根据其他列单元格值计算总列单元格数量 [英] jqgrid calculate total column cells amount depending on other column cell values

问题描述

使用 jqgrid 的 setFooterData 函数计算总量后，如 this question，这是我的网格和函数:

After using jqgrid's setFooterData function to calculate the total amount like in this question , this is my grid and functions:

<script type="text/javascript">

    function calculateTotal(grid_ , column_id_)
    {
        var _total_amount = 0;
        var i = getColumnIndexByName(grid_ , column_id_); 

        // TO ADD - calculate only if row "status" cell = "1:Confirmed"
        $("tbody > tr.jqgrow > td:nth-child("+(i+1)+")" , grid_[0]).each(function()
        {
            _total_amount += Number(getTextFromCell(this));
        });

        return _total_amount;
    }

    function getColumnIndexByName(grid_ , column_id_)
    {
        var cm = grid_.jqGrid('getGridParam','colModel');
        for (var i=0,l=cm.length; i<l; i++)
        {
            if (cm[i].name===column_id_)
            {
                return i; // return the index
            }
        }
        return -1;
    }

    function getTextFromCell(cellNode)
    {
        return cellNode.childNodes[0].nodeName === "INPUT"?
                  cellNode.childNodes[0].value:
                  cellNode.textContent || cellNode.innerText;
    }

    $(document).ready(function () {

        var grid = $("#list"),lastSel;

        grid.jqGrid({
            url:'url',
            datatype: "xml",
            loadonce:true ,
            async: false,
            colNames: ['Inv No', 'Name' , 'Amount' , 'Status'],
            colModel: [
                { name: 'id', index: 'id', width: 65, sorttype: 'int', hidden: true },
                { name: 'name', index: 'name', editable: true, width: 90, sortable: false },
                { name: 'amount', index: 'amount', editable: true, width: 70, formatter: 'number', align: 'right', sortable: false },
                {name:'status',index:'status', width:90, sorttype:"int" , editable:true,
                  edittype:"select", formatter:'select',
                  editoptions:
                  {
                     value:"1:Confirmed ;2:Open ; 3:Rejected" ,
                     dataInit: function(elem)
                     {
                        $(elem).width(90);
                     }
                  }
                },
            ],
            rowNum: 1000,
            pager: '#pager',
            viewrecords: true,
            sortorder: "desc",                
            height: "100%",                
            footerrow:true,
            xmlReader: {
                                          root:"rows",
                                          row:"row",
                                          repeatitems:false
                                       },
            shrinkToFit: false,
            beforeSelectRow: function(row_id_, e)
            {
            },
            onSelectRow: function(id)
            {
                 grid.jqGrid('saveRow' , lastSel , false, 'clientArray');
                 grid.editRow(id , false);
                 lastSel=id;
            },
            loadComplete:function()
            {
                grid.jqGrid('footerData' , 'set' , {name:'TOTAL:' , amount: calculateTotal(grid , 'amount')});
            }
        });            
    });    
</script>

我的问题是如何根据状态"组合框中的值计算总金额.仅当状态"单元格内的值等于已确认"(= 1)时，我才想对金额求和.

My question Is how can I calculate the total amount sum depending on the value that is iniside the "status" combobox. I want to sum the amount only if the value iniside the "status" cell is equels to "Confirmed" (=1).

如何做到这一点?

谢谢.

推荐答案

我做了 new demo 我使用了另一种方法来枚举网格中的单元格(参见 答案).

I made new demo where I used another way to enumerate the cells in the grid (see the answer).

在演示中，我将 getTextFromCell 和 calculateTotal 函数的代码修改为:

In the demo I modified the code of getTextFromCell and calculateTotal functions to the following:

var getTextFromCell = function(cellNode) {
        if (cellNode.childNodes[0].nodeName.toUpperCase() === "SELECT") {
            var selOptions = $("option:selected", cellNode);
            if (selOptions.length>0) {
                return selOptions.text();
            }
        }
        return cellNode.childNodes[0].nodeName.toUpperCase() === "INPUT"?
               cellNode.childNodes[0].value:
               cellNode.textContent || cellNode.innerText;
    },
    calculateTotal = function() {
        var totalAmount = 0,
            iAmount=getColumnIndexByName(grid,'amount'),
            iStatus=getColumnIndexByName(grid,'status');
        var i=0, rows = grid[0].rows, rowsCount = rows.length, row, status;

        for(;i<rowsCount;i++) {
            row = rows[i];
            if (row.className.indexOf('jqgrow') !== -1) {
                status = getTextFromCell(row.cells[iStatus]);
                if (status === "Confirmed") {
                    totalAmount += Number(getTextFromCell(row.cells[iAmount]));
                }
            }
        }

        grid.jqGrid('footerData','set',{name:'TOTAL Confirmed',amount:totalAmount});
    };

现在总行中将显示金额"列中所有值的总和，但仅考虑状态"列中具有已确认"的行.

Now in the total lines will be displayed the sum of all values from the 'Amount' columns, but only the rows having "Confirmed" in the 'Status' column will be taken in the consideration.

这篇关于jqgrid 根据其他列单元格值计算总列单元格数量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！