2015.05.13

jqGrid

jqGrid formatoptions+autoNumericで接尾辞を付加する

例えばある列で”12,345,678 byte”のように表示させたい場合は
formatterのタイプを指定し、formatoptionsにてsuffixを設定します。

formatter: 'number',
formatoptions: { decimalSeparator: ".", thousandsSeparator: ",", decimalPlaces: 0, defaultValue: '0 byte', suffix: ' byte' },

以下のようになります。
12
入力時はカンマなしで表示されます。
11

入力時にもカンマを付加しつつ、jqGridのsuffixを付加する場合は
JQueryプラグイン autoNumericを使用します。

autoNumeric.jsを読み込ませて
該当列のeditoptionsを以下のようにします。

editoptions: {
    maxlength: 8,
    dataInit: function (elem) {

    $(elem).css('ime-mode', 'disabled');

    var a = $(elem).val();
    var b = a.replace(" byte", "");
    $(elem).val(b);

    $(elem).css('text-align', 'right');
    $(elem).autoNumeric('init', {vMin:0, vMax:99999999});
},

これにより、入力時にもカンマが付加されます。
13
これでうまくいけそうに思えますが、実際は
14
となり、期待する表示にはなりません。

対応策として
Form Editing Events
beforeSubmitに対して以下の内容で追記します。(※col3が該当列です)

beforeSubmit:function(postdata, formid) {
    postdata['col3'] = $('#col3').autoNumeric('get');
    return [true, ''];
},

要はpostデータにカンマを取り除いた値を渡しています。
これにより接尾辞が付加された値が正常に表示されます。