jqgrid currency formatter

问题:

In Jqgrid for currency formatter there is only thousandsSeparator is available but i want lakhsSeparator

colModel: [
            {name: 'Code', index: 'Code', width: 55, editable: true, sortable: true },
        { name: 'Ammount', index: 'Ammount', width: 100, editable: true, sortable: false, formatter: 'currency', formatoptions: { prefix: '($', suffix: ')', thousandsSeparator: ','} },
          ],

here in place of thousandsSeparator i want lakhsSeparator.

回答1:

I find the question very interesting. I suggest don't implement the Globalize plugin. Here and here you can find additional information about it.

The usage will be simple. One should define custom formatter which uses Globalize.format and unformatter which uses Globalize.parseFloat functions. For example

formatter: function (v) {
    // uses "c" for currency formatter and "n" for numbers
    return Globalize.format(Number(v), "c");
},
unformat: function (v) {
    return Globalize.parseFloat(v);
}

For more comfort I would recommend to define numberTemplate and currencyTemplate for example like

var numberTemplate = {align: 'right', sorttype: 'number', editable: true,
        searchoptions: { sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge', 'nu', 'nn', 'in', 'ni']},
        formatter: function (v) {
            return Globalize.format(Number(v), "n");
        },
        unformat: function (v) {
            return Globalize.parseFloat(v);
        }},
    currencyTemplate = {align: 'right', sorttype: 'number', editable: true,
        searchoptions: { sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge', 'nu', 'nn', 'in', 'ni']},
        formatter: function (v) {
            return Globalize.format(Number(v), "c");
        },
        unformat: function (v) {
            return Globalize.parseFloat(v);
        }};

and use there in colModel like

{ name: 'amount', index: 'amount', width: 150, template: currencyTemplate },
{ name: 'age', index: 'age', width: 52, template: numberTemplate },

The demo uses "en-IN" locale and display results like on the picture below

回答2:

You can add this functionality to currency the formatter. First you would need to modify the built in NumberFormat function. To do this you can run below script after loading jqGrid script files:

$.fmatter.util.NumberFormat = function(nData,opts) {
    if(!$.fmatter.isNumber(nData)) {
        nData *= 1;
    }
    if($.fmatter.isNumber(nData)) {
        var bNegative = (nData < 0);
        var sOutput = nData + "";
        var sDecimalSeparator = (opts.decimalSeparator) ? opts.decimalSeparator : ".";
        var nDotIndex;
        if($.fmatter.isNumber(opts.decimalPlaces)) {
            var nDecimalPlaces = opts.decimalPlaces;
            var nDecimal = Math.pow(10, nDecimalPlaces);
            sOutput = Math.round(nData*nDecimal)/nDecimal + "";
            nDotIndex = sOutput.lastIndexOf(".");
            if(nDecimalPlaces > 0) {
                if(nDotIndex < 0) {
                    sOutput += sDecimalSeparator;
                    nDotIndex = sOutput.length-1;
                }
                else if(sDecimalSeparator !== "."){
                    sOutput = sOutput.replace(".",sDecimalSeparator);
                }
                while((sOutput.length - 1 - nDotIndex) < nDecimalPlaces) {
                    sOutput += "0";
                }
            }
        }
        if(opts.thousandsSeparator) {
            var sThousandsSeparator = opts.thousandsSeparator;
            nDotIndex = sOutput.lastIndexOf(sDecimalSeparator);
            nDotIndex = (nDotIndex > -1) ? nDotIndex : sOutput.length;
            var sNewOutput = sOutput.substring(nDotIndex);
            var nCount = -1;
            for (var i=nDotIndex; i>0; i--) {
                nCount++;
                if ((nCount%3 === 0) && (i !== nDotIndex) && (!bNegative || (i > 1))) {
                    sNewOutput = sThousandsSeparator + sNewOutput;
                }
                sNewOutput = sOutput.charAt(i-1) + sNewOutput;
            }
            sOutput = sNewOutput;
        }
        else if(opts.lakhsSeparator) {
            var sLakhsSeparator = opts.lakhsSeparator;
            nDotIndex = sOutput.lastIndexOf(sDecimalSeparator);
            nDotIndex = (nDotIndex > -1) ? nDotIndex : sOutput.length;
            var sNewOutput = sOutput.substring(nDotIndex);
            var nCount = -1;
            var i = nDotIndex;
            while (i > 0) {
                for (var nCount = 0; nCount < 7 && i > 0; nCount++) {
                    sNewOutput = sOutput.charAt(i-1) + sNewOutput;
                    if (((nCount === 2) || (nCount === 4) || (nCount == 6)) && (!bNegative || (i > 1))) {
                        sNewOutput = sLakhsSeparator + sNewOutput;
                    }
                    i--;
                }
            }
            sOutput = sNewOutput;
        }
        sOutput = (opts.prefix) ? opts.prefix + sOutput : sOutput;
        sOutput = (opts.suffix) ? sOutput + opts.suffix : sOutput;
        return sOutput;

    } else {
        return nData;
    }
};

Now you can define your formatting options like this:

colModel: [
        { name: 'Code', index: 'Code', width: 55, editable: true, sortable: true },
        { name: 'Ammount', index: 'Ammount', width: 100, editable: true, sortable: false, formatter: 'currency', formatoptions: { prefix: '($', suffix: ')', thousandsSeparator: null, lakhsSeparator: ',' } },
        ...
],

That should give you the required result.