如何将点转换为逗号任意数量的小数位

Free jqgrid data comes as json string from server. It can contain different number of decimal places like

免费的jqgrid数据来自服务器的json字符串。它可以包含不同数量的小数位

amount: "300.1", 
tax: "20.12", 
total: "320.123"

This data should appear as comma separated in jqgrid columns like

此数据应在jqgrid列中以逗号分隔显示

300,1    20,12    320,123

Locale file grid.locale-et.js was created for this with contents

使用内容为此创建了区域设置文件grid.locale-et.js.

formatter: {
    integer: {
        thousandsSeparator: " ",
        defaultValue: "0"
    },
    number: {
        decimalSeparator: ",",
        thousandsSeparator: " ",
        decimalPlaces: 2,
        defaultValue: "0,00"
    },

and template: 'number' option in colmodel is used. This shows all columns with 2 digits like

和模板：使用colmodel中的'number'选项。这显示了所有具有2位数字的列

300,10    20,12    320,12

How to fix this so that columns will display proper numbers of decimal places?

如何解决这个问题，以便列显示正确的小数位数？

I tried in colmodel

我尝试了colmodel

"template":"number",
"decimalPlaces":4

but it still shows 2 decimal places. Without using template proper number of decimal places is shown.

但它仍然显示2位小数。不使用模板显示正确的小数位数。

Testcase is at http://jsfiddle.net/xssnr1gn/3/

测试用例位于http://jsfiddle.net/xssnr1gn/3/

It contains

它包含

 { id: "20",  invdate: "2007-10-02", name: "test2",  note: "note2",  amount: "300.1", tax: "20.12", closed: false, ship_via: "FE", total: "320.123" },

but output is 2 decimal places for every column.

但是每列的输出是小数点后2位。

Update

更新

If decimalPlaces: 2, is removed, jqgrid looks like

如果删除了decimalPlaces：2，则jqgrid看起来像

Issues:

问题：

1. decimal separator is changed to .
2. 小数分隔符更改为。
3. There are variable number of decimal places
4. 可变小数位数
5. The is non-understandable value 7 146 2.8
6. 这是不可理解的价值7 146 2.8
7. for some numbers space appears before decimal point
8. 对于某些数字空格出现在小数点之前

Data from server contains fixed number of decimal places. How to show exactly the same number of decimal places as it is in server data ?

来自服务器的数据包含固定数量的小数位。如何显示与服务器数据完全相同的小数位数？

1 个解决方案

#1

http://jsfiddle.net/xssnr1gn/4/

http://jsfiddle.net/xssnr1gn/4/

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:predefined_formatter

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:predefined_formatter

You need to apply the formatter and formatoptions

您需要应用formatter和formatoptions

formatter: "number", formatoptions: {decimalSeparator:",", thousandsSeparator: " ", decimalPlaces: 4, defaultValue: '0.0000'}

And full code:

完整代码：

$(function () {
    "use strict";
    var mydata = [
            { id: "10",  invdate: "2007-10-01", name: "test",   note: "note",   amount: "", tax: "", closed: true,  ship_via: "TN", total: "" },
            { id: "20",  invdate: "2007-10-02", name: "test2",  note: "note2",  amount: "300.1", tax: "20.12", closed: false, ship_via: "FE", total: "320.123" },
            { id: "30",  invdate: "2007-09-01", name: "test3",  note: "note3",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
            { id: "40",  invdate: "2007-10-04", name: "test4 test4 test4",  note: "note4",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
            { id: "50",  invdate: "2007-10-31", name: "test5",  note: "note5",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
            { id: "60",  invdate: "2007-09-06", name: "test6",  note: "note6",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
            { id: "70",  invdate: "2007-10-04", name: "test7",  note: "note7",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
            { id: "80",  invdate: "2007-10-03", name: "test8",  note: "note8",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
            { id: "90",  invdate: "2007-09-01", name: "test9 test9 test9 test9 test9",  note: "note9",  amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },
            { id: "100", invdate: "2007-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true,  ship_via: "TN", total: "530.00" },
            { id: "110", invdate: "2007-09-08", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
            { id: "120", invdate: "2007-09-10", name: "test12", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }
        ],
        $grid = $("#list"),
        initDateEdit = function (elem) {
            $(elem).datepicker({
                dateFormat: "dd-M-yy",
                autoSize: true,
                changeYear: true,
                changeMonth: true,
                showButtonPanel: true,
                showWeek: true
            });
        },
        initDateSearch = function (elem) {
            setTimeout(function () {
                initDateEdit(elem);
            }, 50);
        };

    $grid.jqGrid({
        data: mydata,
        colNames: ["", "Client", "Date", "Amount", "Tax", "Total", "Closed", "Shipped via", "Notes"],
        colModel: [
            { name: "act", template: "actions" },
            { name: "name", align: "center", width: 100, editrules: {required: true} },
            { name: "invdate", width: 82, align: "center", sorttype: "date", frozen: true,
             formatter: "date", formatoptions: { newformat: "d-M-Y", reformatAfterEdit: true }, datefmt: "d-M-Y",
             editoptions: { dataInit: initDateEdit },            
             searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDateSearch } },
            { name: "amount", width: 62, template: "number",
             formatter: "number", formatoptions: {decimalSeparator:",", thousandsSeparator: " ", decimalPlaces: 4, defaultValue: '0.0000'},
               editoptions: {
                   type: "number", 
                   step: "0.01",
                   min: "0.00",
                   max: "1000",
                   pattern: "[0-9]+([\.|,][0-9]+)?",
                   title: "This should be a number with up to 2 decimal places."
               } },
            { name: "tax", width: 45, template: "number", autoResizableMinColSize: 40 },
            { name: "total", width: 53, template: "number" },
            { name: "closed", width: 60, template: "booleanCheckboxFa" },
            { name: "ship_via", width: 76, align: "center", formatter: "select",
             edittype: "select", editoptions: { value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "IN" },
             stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;FE:FedEx;TN:TNT;IN:IN" } },
            { name: "note", width: 43, edittype: "textarea", sortable: false }
        ],
        cmTemplate: { editable: true, autoResizable: true },
        autoResizing: { compact: true },
        iconSet: "fontAwesome",
        rowNum: 10,
        rowList: [5, 10, 20, "10000:All"],
        viewrecords: true,
        autoencode: true,
        pager: true,
        sortname: "invdate",
        sortorder: "desc",
        searching: { defaultSearch: "cn", searchOperators: true }
    })
        .jqGrid("filterToolbar")
        .jqGrid("gridResize");
});