jquery - jqgrid:空数字列值显示空白

Question

在我正在开发的 jqgrid 中，我根据第一行中的数据将格式化程序应用于多个列。因此，如果第一行包含内容值“PERCENT”，我将格式化程序应用于实际值列，将值格式化为带小数位的数字。

我遇到的问题是，当列包含数值或 null 时，格式化程序会将 null 值格式化为“0.00”。

我设置了以下 jsFiddle 来显示发生了什么。我需要的是当 json 值为 null 时，var1Value、var2Value 和 var3Value 列显示空白，而不是“0.00”。这可能吗？

https://jsfiddle.net/msobczak/7prbs3tu/6/

代码如下:

var mainGrid = {
  "total": 1,
  "page": 1,
  "pageSize": 20,
  "records": 1,
  "rows": [{
    "id": 7259,
    "var1Name": "2015 Median Age",
    "var1Contents": "MEDIAN",
    "var1IsString": 0,
    "var1IsNumber": 1,
    "var1Value": "44",
    "var2Name": "% '15 HHs",
    "var2Contents": "PERCENT",
    "var2IsString": 0,
    "var2IsNumber": 1,
    "var2Value": "2.07",
    "var3Name": "Wine At Home",
    "var3Contents": "INDEX",
    "var3IsString": 0,
    "var3IsNumber": 1,
    "var3Value": "135"
  }, {
    "id": 7259,
    "var1Name": "2015 Median Age",
    "var1Contents": "MEDIAN",
    "var1IsString": 0,
    "var1IsNumber": 1,
    "var1Value": null,
    "var2Name": "% '15 HHs",
    "var2Contents": "PERCENT",
    "var2IsString": 0,
    "var2IsNumber": 1,
    "var2Value": null,
    "var3Name": "Wine At Home",
    "var3Contents": "INDEX",
    "var3IsString": 0,
    "var3IsNumber": 1,
    "var3Value": null
  }]
};

GridFunctions = {
  formatVariable: function(gridId, columnName, variableValue, variableContents, isNumber) {
    if (variableValue != undefined && variableContents != undefined) {
      switch (variableContents) {
        case "MEDIAN":
          $(gridId).jqGrid("setColProp", columnName, {
            formatter: 'number',
            defaultvalue: null
          });
          $(gridId).jqGrid("setColProp", columnName, {
            formatoptions: {
              thousandsSeparator: ',',
              decimalPlaces: 0
            }
          });
          break;

        case "COUNT":
          $(gridId).jqGrid("setColProp", columnName, {
            formatter: 'number'
          });
          $(gridId).jqGrid("setColProp", columnName, {
            formatoptions: {
              thousandsSeparator: ',',
              decimalPlaces: 0
            }
          });
          break;

        case "RATIO":
          $(gridId).jqGrid("setColProp", columnName, {
            formatter: 'number'
          });
          $(gridId).jqGrid("setColProp", columnName, {
            formatoptions: {
              thousandsSeparator: ',',
              decimalPlaces: 0
            }
          });
          break;

        case "PERCENT":
          $(gridId).jqGrid("setColProp", columnName, {
            formatter: 'number',
            defaultvalue: null
          });
          $(gridId).jqGrid("setColProp", columnName, {
            formatoptions: {
              thousandsSeparator: ',',
              decimalPlaces: 2
            }
          });
          break;

        case "INDEX":
          if (isNumber == 1) {
            $(gridId).jqGrid("setColProp", columnName, {
              formatter: 'number'
            });
            $(gridId).jqGrid("setColProp", columnName, {
              formatoptions: {
                thousandsSeparator: ',',
                decimalPlaces: 0
              }
            });
          }
          break;
      }
    }
  }
}

$(document).ready(function() {
  $("#jqGrid").jqGrid({
    datatype: function(postdata) {

      $('#' + 'load_' + 'jqGrid').show();

      var json = mainGrid;

      var thisGridId = "#jqGrid";

      var columnName = "var1Value";
      var varName = json.rows[0].var1Name;

      // Dynamically change column header for the variable 1 column
      GridFunctions.formatVariable(thisGridId, columnName, json.rows[0].var1Value, json.rows[0].var1Contents, json.rows[0].var1IsNumber);

      varName = json.rows[0].var2Name;
      columnName = "var2Value";

      // Dynamically change column header for the variable 2 column
      GridFunctions.formatVariable(thisGridId, columnName, json.rows[0].var2Value, json.rows[0].var2Contents, json.rows[0].var2IsNumber);

      varName = json.rows[0].var3Name;
      columnName = "var3Value";

      // Dynamically change column header for the variable 3 column
      GridFunctions.formatVariable(thisGridId, columnName, json.rows[0].var3Value, json.rows[0].var3Contents, json.rows[0].var3IsNumber);

      var thegrid = $('#jqGrid')[0];
      thegrid.addJSONData(json);

      $('#' + 'load_' + 'jqGrid').hide();
    },
    page: 1,
    colModel: [{
        label: 'ID',
        name: 'id',
        width: 50,
        hidden: false,
        key: true,
        editable: true,
        sortable: false,
        editrules: {
          edithidden: true
        }
      },
      // Variable 1
      {
        label: 'var1Value',
        name: 'var1Value',
        width: 90,
        sortable: true,
        hidden: false,
        align: 'right'
      },

      // Variable 2
      {
        label: 'var2Value',
        name: 'var2Value',
        width: 90,
        sortable: true,
        hidden: false,
        align: 'right'
      },

      // Variable 3
      {
        label: 'var3Value',
        name: 'var3Value',
        width: 90,
        sortable: true,
        hidden: false,
        align: 'right'
      }
    ],
    viewrecords: true,
    width: 800,
    shrinkToFit: false,
    height: '100%',
    rowNum: 20,
    pager: "#jqGridPager"
  });
});

Answer 1

首先你的代码很难阅读。如果我正确理解您的问题，那么您只需使用 formatter: "number" 并设置默认值。

您当前的代码使用

$(gridId).jqGrid("setColProp", columnName, {
    formatter: 'number',
    defaultvalue: null
});
$(gridId).jqGrid("setColProp", columnName, {
    formatoptions: {
        thousandsSeparator: ',',
        decimalPlaces: 0
    }
});

与

相同

$(gridId).jqGrid("setColProp", columnName, {
    formatter: 'number',
    defaultvalue: null,
    formatoptions: {
        thousandsSeparator: ',',
        decimalPlaces: 0
    }
});

该代码包含一些错误。您需要的属性的正确名称是 defaultValue 而不是 defaultvalue，并且该属性需要在 formatoptions 内部设置。如果您需要显示空单元格，则可以使用 defaultValue: "" 或更好的 defaultValue: " ":

$(gridId).jqGrid("setColProp", columnName, {
    formatter: 'number',
    formatoptions: {
        thousandsSeparator: ',',
        decimalPlaces: 0,
        defaultValue: " "
    }
});

此外，我不建议您使用datatype作为函数。您将禁用 jqGrid 的许多有用功能，而没有任何好处。在我看来，您的实际代码从服务器加载数据，并且您希望根据服务器响应的数据更改列属性。您可以在这种情况下使用 datatype: "json" 并使用 beforeProcessing 回调在 jqGrid 处理数据之前“预处理”数据。请参阅the answer了解更多详情。