如何将点转换为逗号以保留小数位数 [英] How to convert point to comma for any number of decimal places

问题描述

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

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

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

此数据应以逗号分隔在jqgrid列中，例如

This data should appear as comma separated in jqgrid columns like

300,1    20,12    320,123

为此创建了包含内容的语言环境文件grid.locale-et.js

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

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

使用colmodel中的

和template: 'number'选项.这将显示所有带有2位数字的列，例如

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

300,10    20,12    320,12

如何解决此问题，以使列显示正确的小数位数?

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

我在colmodel中尝试过

I tried in colmodel

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

，但仍显示2个小数位. 如果不使用模板，则会显示正确的小数位数.

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

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

包含

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

但是输出是每列2个小数位.

but output is 2 decimal places for every column.

更新

如果删除decimalPlaces: 2,，则jqgrid看起来像

If decimalPlaces: 2, is removed, jqgrid looks like

问题:

1. 小数点分隔符更改为.
2. 小数位数可变
3. 不可理解的值7 146 2.8
4. 对于某些数字，小数点前会出现空格

1. decimal separator is changed to .
2. There are variable number of decimal places
3. The is non-understandable value 7 146 2.8
4. for some numbers space appears before decimal point

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

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 ?

推荐答案

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

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

您需要应用formatter和formatoptions

You need to apply the formatter and formatoptions

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

完整代码:

$(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");
});

这篇关于如何将点转换为逗号以保留小数位数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！