jquery - ハイパーリンク リンク付きのカスタム数値フォーマッタ

Question

必要なもののほとんどを達成しましたが、小さな問題で立ち往生しています。

jQuery 1.8.3 と jqGrid 4.4.0 を使用しています。分割の詳細を含むモーダル ボックスを開くためのリンクとして機能するレート列があります。問題は、レート列の値が純粋な数値であり、カスタム テンプレートを使用してその値に書式設定を設定しましたが、リンク (カスタム フォーマッタ) が原因で書式設定がオフになることです。

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');
        }
    });
});

解決策の 1 つは、数値を必要な書式設定 (桁区切り記号、小数点以下の桁数など) で書式設定する関数を記述し、それをカスタム フォーマッタ関数の cellvalue に適用できることですが、jqGrid にそれを使用する方法があるかどうか疑問に思っていました。私は同じことを達成することができます。

すべての jqGrid エキスパートに提案をお願いします。よろしくお願いします。

サンプルコード: jsFiddle