0

我已经完成了大部分要求，但遇到了一个小问题。

我正在使用 jQuery 1.8.3 和 jqGrid 4.4.0。它有一个速率列，用作打开带有分解详细信息的模式框的链接。问题是 Rate 列中的值纯粹是数字，我使用自定义模板将格式设置为其值，但由于链接（自定义格式化程序），格式会消失。

HTML 代码：

<table id="tbCmpContents">
    <tr><td/></tr>
</table>
<div id="divCmpContentsPager"></div>

JS代码：

var mydata = [
    {Id: "2", Element: "Salt",  Qty: "10.00", Rate: "21200.00", Cost: "200.00"},
    {Id: "3", Element: "Sugar", Qty: "20.00", Rate: "32500.00", Cost: "600.00"}
],
viewNumTemplate = {
    align: 'right',
    classes: 'numberPadding',
    formatter: 'number',
    formatoptions: { decimalSeparator: ".", thousandsSeparator: "", decimalPlaces: 2, defaultValue: '0.00' },
    sortable: false,
    width: 100
},
getColumnIndexByName = function (grid, columnName) {
    var cm = grid.jqGrid('getGridParam', 'colModel');
    for (var i = 0, l = cm.length; i < l; i++) {
        if (cm[i].name === columnName) {
            return i; // return the index
        }
    }
    return -1;
},
getTextFromCell = function (cellNode) {
    var cellValue;
    //check for all INPUT types
    if (cellNode.childNodes[0].nodeName == "INPUT") {
        //special case for handling checkbox
        if (cellNode.childNodes[0].type == "checkbox") {
            cellValue = cellNode.childNodes[0].checked.toString();
        }
        else {
            //catch-all for all other inputs - text/integer/amount etc
            cellValue = cellNode.childNodes[0].value;
        }
    }
    //check for dropdown list
    else if (cellNode.childNodes[0].nodeName == "SELECT") {
        var newCell = $("select option:selected", cellNode);
        cellValue = newCell[0].value;
    }
    else {
        cellValue = cellNode.textContent || cellNode.innerText;
    }
    return cellValue;
},
calculateTotal = function (grid) {
    var totalRate = 0.00;

    i = getColumnIndexByName(grid, 'Rate');
    $("tbody > tr.jqgrow > td:nth-child(" + (i + 1) + ")", grid[0]).each(function () {
        totalRate += Number(getTextFromCell(this).replace(",", ""));
    })

    grid.jqGrid('footerData', 'set', { Rate: totalRate.toFixed(2) }, false );
};

function OpenInModal(id) {
    //Open a modal window to render the break-up of rate for an element.
}

$(document).ready(function () {
    var oGrid = $('#tbCmpContents');

    oGrid.jqGrid({
        data: mydata,
        datatype: 'local',
        colNames: ['Id', 'Element', 'Qty', 'Rate', 'Cost'],
        colModel: [
            { name: 'Id', index: 'Id', hidden: true, key: true },
            { name: 'Element', index: 'Element', width: 120, sortable: true },
            { name: 'Qty', index: 'Qty', width: 100, formatter: 'number', align: 'right', sortable: false },
            { name: 'Rate', index: 'Rate', width: 100, template: viewNumTemplate, 
                formatter: function (cellvalue, options, rowObject) {
                    return '<a href="javascript:OpenInModal(\'' + rowObject[0] + '\')">' + cellvalue + '</a>';
                }
            },
            { name: 'Cost', index: 'Cost', width: 100, formatter: 'number', align: 'right', sortable: false }
        ],
        autowidth: true,
        height: 'auto',
        rowNum: 10,
        rowList: [10, 20, 30],
        gridview: true,
        autoencode: true,
        ignoreCase: true,
        sortname: 'Element',
        sortorder: 'asc',
        caption: 'Compound Contents',
        editurl: 'clientArray',
        footerrow: true,
        loadonce: true,
        gridComplete: function () {
            calculateTotal($(this));
            $("#tbCmpContents tr:last").addClass('ireg-jqgrid-lastrow');
            $("tr.footrow td").addClass('ireg-jqgrid-lastrow').addClass('ireg-jqgrid-footer');
        }
    });
});

一种方法是我可以编写一个函数来格式化具有所需格式的数字（如千位分隔符、小数位等）并将其应用于自定义格式化程序函数中的 cellvalue 但我想知道 jqGrid 中是否有任何方法我可以达到同样的效果。

我请求所有 jqGrid 专家提出建议。谢谢大家。

示例代码：jsFiddle

4

0 回答 0