Question

在我工作的jqgrid中，我根据第一行中的数据将格式化程序应用于多个列。因此，如果第一行包含内容值＆＃34; PERCENT＆＃34;，我将一个formtter应用于实际值列，该值将值格式化为带小数位的数字。

我遇到的问题是，当列包含数值或null时，格式化程序会将空值格式化为＆＃34; 0.00＆＃34;。

我设置了以下jsFiddle以显示正在发生的事情。我需要的是var1Value，var2Value和var3Value列显示空白，而不是＆＃34; 0.00＆＃34;，当json值为null时。这可能吗？

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: "&#160;"
    }
});

此外，我不建议您使用datatype作为功能。您将无任何优势地禁用jqGrid的许多有用功能。在我看来，您的真实代码从服务器加载数据，并且您希望根据服务器响应中的数据更改列属性。您可以在案例中使用datatype: "json"并使用beforeProcessing回调来预处理＆＃34;数据之前的数据将由jqGrid处理。有关详细信息，请参阅the answer。

jqgrid：显示null为空数字列值

1 个答案: