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

Posted 2023-05-07

【中文标题】如何将任意小数位数的点转换为逗号

【英文标题】：How to convert point to comma for any number of decimal places

【发布时间】：2015-11-21 22:16:25

【问题描述】：

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

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

这些数据应该在 jqgrid 列中显示为逗号分隔，例如

300,1    20,12    320,123

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

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

和template: 'number' colmodel 中的选项被使用。这显示了所有带有 2 位数字的列，例如

300,10    20,12    320,12

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

我在 colmodel 中尝试过

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

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

测试用例位于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 位。

更新

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

问题：

小数点分隔符改为. 小数位数可变 这是不可理解的值7 146 2.8 对于某些数字，小数点前出现空格

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

【问题讨论】：

如果您在数字格式化程序中遗漏了decimalPlaces: 2,，会发生什么情况？

我更新了问题并描述了结果，如果它被遗漏了。

嗯，不简单。我猜你需要Custom formatter

【参考方案1】：

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

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

您需要应用格式化程序和格式选项

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");
);

【讨论】：

这假定列中的所有行都具有相同的小数位数。如果金额列在不同的行中具有不同的小数位数，则会失败。例如jsfiddle.net/3xoLrkk4/1 不会根据源数据显示金额列。如何解决这个问题，以便在单列中显示可变的小数位数？

这也不限制手动输入的最大数量。我在***.com/questions/33853914/… 发布了这个如何解决？