代码之家 › 专栏 › 技术社区 › Skittles

jsGrid编辑付款金额

currency grid plugins jquery javascript

Skittles · 技术社区 · 9 年前

我正在使用jsGridJQuery插件来显示和编辑付款。虽然这是一个很好的选项,但我无法使用内置字段来编辑“付款金额”。如果我使用“数字”类型,我无法输入小数点后的数字。如果我使用“文本”类型,我可以输入非数字值。

这是迄今为止我的代码

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

有没有人使用过这个插件,比如创建了自定义字段类型,或者使用字段模板在jsGrid中编辑字段,只允许货币值(数字、逗号、小数)

提前谢谢。

2 回复 | 直到 9 年前

tabalin 9 年前

您可以按如下方式定义自定义字段:

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;

现在您可以在字段指定中使用它 type="money"

P.Majk 7 年前

下面是如何格式化显示值。这将以以下格式打印数字$1000.00。

声明函数:

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

      return formatter.format(numberToFormat);
}

然后在itemTemplate方法中使用它:

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