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。