jqgrid：空数值列值显示空白

Question

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

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

我设置了以下jsFiddle来显示发生了什么。我需要的是，当json值为空时，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。