Jquery 带有超链接的自定义数字格式化程序

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

我使用的是jQuery1.8.3和jQGrid4.4.0。它有一个Rate列，充当打开包含分解详细信息的模式框的链接。问题是Rate列中的值纯粹是数字，我使用了一个自定义模板将格式设置为其值，但由于link（自定义格式设置程序），格式会关闭

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

var mydata=[
{Id:“2”，要素：“盐”，数量：“10.00”，费率：“21200.00”，成本：“200.00”}，
{Id:“3”，要素：“糖”，数量：“20.00”，费率：“32500.00”，成本：“600.00”}
],
viewNumTemplate={
对齐：“右”，
类：'numberPadding'，
格式化程序：“数字”，
formatoptions:{decimalSeparator:“.”，千位分隔符：”，小数点：2，defaultValue:'0.00'}，
可排序：false，
宽度：100
},
getColumnIndexByName=函数（网格，columnName）{
var cm=grid.jqGrid（'getGridParam'，'colModel'）；
对于（变量i=0，l=cm.length；itr.jqgrow>td:n子项（“+（i+1）+”），网格[0]）。每个（函数（）{
totalRate+=Number（getTextFromCell（this）.replace（“，”，”）；
})
jqGrid（'footerData'，'set'，{Rate:totalRate.toFixed（2）}，false）；
};
函数OpenInModal（id）{
//打开一个模式窗口以渲染元素的分解率。
}
$（文档）.ready（函数（）{
var oGrid=$（'tbCmpContents'）；
oGrid.jqGrid({
数据：mydata，
数据类型：“本地”，
colNames:['Id'，'Element'，'Qty'，'Rate'，'Cost']，
colModel：[
{name:'Id'，index:'Id'，hidden:true，key:true}，
{name:'Element'，index:'Element'，宽度：120，可排序：true}，
{name:'Qty'，index:'Qty'，width:100，格式化程序：'number'，align:'right'，sortable:false}，
{name:'Rate'，index:'Rate'，宽度：100，模板：viewNumTemplate，
格式化程序：函数（cellvalue、options、rowObject）{
返回“”；
}
},
{name:'Cost'，index:'Cost'，width:100，formatter:'number'，align:'right'，sortable:false}
],
自动宽度：正确，
高度：“自动”，
rowNum:10，
行列表：[10,20,30]，
gridview：没错，
自动编码：正确，
ignoreCase：是的，
sortname:'元素'，
排序器：“asc”，
标题：“复合内容”，
editurl:'客户端阵列'，
是的，
有一次：是的，
gridComplete:函数（）{
计算总数（$（本））；
$（“#tbCmpContents tr:last”）.addClass（'ireg-jqgrid-lastrow'）；
$（“tr.footrow td”）.addClass（'ireg-jqgrid-lastrow'）.addClass（'ireg-jqgrid-footer'）；
}
});
});

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

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

---

示例代码：

我把你的问题读了三遍，我有点不清楚你想实现什么。你想要一个用逗号、小数位格式化的数字，但仍然可以作为超链接吗？@Mark，很抱歉没有把事情说得很清楚。“速率”列中的值是基于某些DB值计算的。当用户单击rate列中的任何值（数字）时，我会在模式窗口中显示该值的分解。问题是，如果我将“速率”列转换为超链接，我会丢失我不想要的数字格式。因此，我需要知道是否有任何内置的方式来实现数字格式的超链接功能。我知道的另一种方法是创建一个自定义函数，该函数将返回给定数字的格式化字符串。希望这有助于理解。