javascript - parse - jquery number js

jsGrid edita cantidad de pago

Question

Estoy usando el plugin jQuery jsGrid para visualizar y editar pagos. Aunque es una excelente opción, no puedo usar los campos de compilación para editar un ''Monto de pago''. Si utilizo el tipo ''número'', no puedo ingresar dígitos después del lugar decimal. Si utilizo el tipo ''texto'', puedo ingresar valores no numéricos.

Aquí está mi código hasta ahora

 $("#jsGrid").jsGrid({
width: "100%",
height: "auto",
editing: true,
paging: true,
autoload: true,
loadIndication: true,
loadIndicationDelay: 500,
loadMessage: "Please, wait...",
loadShading: true,
controller: {
loadData: function () {
return $.ajax({
type: "GET",
url: AJAX_URL_GET_CALCULATED_AFFECTED_PAYMENTS,
data: { ''startDate'': startDate, ''endDate'': endDate },
dataType: "json",
cache: false,
});
},
},
fields: [
{ name: "PaymentDate", title: "Payment Date", type: "text", width: 150, editing: false, },
{ name: "PaymentEndDate", title: "Payment End Date", type: "text", width: 150, editing: false, },
{ name: "PaymentStatusDisplay", title: "Payment Status", type: "text", width: 150, align: "center", editing: false, },
{
name: "PaymentAmount", title: "Payment Amount", type: "number", width: 100, align: "center", editing: true,
itemTemplate: function(value) {
return "$" + value;
},
},
{ type: "control", deleteButton: false, editButton: true, editButtonTooltip: "Edit Amount", }
]
});

¿Alguien ha utilizado este complemento obtuvo un ejemplo o se las arregló para crear un tipo de campo personalizado o utilizar las plantillas de campo para editar un campo en jsGrid para permitir solo valores de moneda (número, coma, decimales)

Gracias de antemano.

Answer 1

A continuación, le mostramos cómo puede formatear el valor para mostrar. Esto imprimirá el número en el siguiente formato $ 1,000.00.

Declara la función:

function formatNumberForDisplay(numberToFormat) {
var formatter = new Intl.NumberFormat(''en-US'', {
style: ''currency'',
currency: ''USD'',
digits: 2,
});
return formatter.format(numberToFormat);
}

y luego solo usarlo en el método itemTemplate:

 itemTemplate: function(value) {
return formatNumberForDisplay(value) ;
},

Answer 2

Puede definir su campo personalizado de la siguiente manera:

function MoneyField(config) {
jsGrid.NumberField.call(this, config);
}
MoneyField.prototype = new jsGrid.NumberField({
itemTemplate: function(value) {
return "$" + value.toFixed(2);
}
filterValue: function() {
return parseFloat(this.filterControl.val() || 0);
},
insertValue: function() {
return parseFloat(this.insertControl.val() || 0);
},
editValue: function() {
return parseFloat(this.editControl.val() || 0);
}
});
jsGrid.fields.money = MoneyField;

Ahora puede usarlo en campo especificando type="money"