问题
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"
This data should appear as comma separated in jqgrid columns like
300,1 20,12 320,123
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"
},
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?
I tried in colmodel
"template":"number",
"decimalPlaces":4
but it still shows 2 decimal places. Without using template proper number of decimal places is shown.
Testcase is at 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.
Update
If decimalPlaces: 2, is removed, jqgrid looks like
Issues:
- decimal separator is changed to .
- There are variable number of decimal places
- The is non-understandable value
7 146 2.8 - 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 ?
回答1:
http://jsfiddle.net/xssnr1gn/4/
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:predefined_formatter
You need to apply the formatter and 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");
});
来源：https://stackoverflow.com/questions/33849225/how-to-convert-point-to-comma-for-any-number-of-decimal-places