自定義格式化器調用的jqGrid沒有奏效

Question

我想從我的jqgrid.I調用格式化功能把警告我格式化函數內。但它不是worked.I跟着http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_formatter教程。

這裏是我的代碼

function jqGridMethod() { 
    var jsonData = { 
     "model" : [ { 
      "name" : "code", 
      "index" : "code", 
      "width" : "100", 
      "sortable" : false, 
      "editable" : false, 
      formatter : "showlink", 
      formatoptions : { 
       baseLinkUrl : 'javascript:', 
       showAction : "seasonEdit('", 
       addParam : "');" 
      } 
     }, { 
      "name" : "name", 
      "index" : "name", 
      "width" : 100 
     },{ 
      "name" : "colorCode", 
      "index" :"colorCode" , 
      "width" : 100, 
      formatter:colorformatter 

     },{ 
      "name" : "startDay", 
      "index" : "startDay", 
      "width" : 100 
     }, { 
      "name" : "startMonth", 
      "index" : "startMonth", 
      "width" : 100 
     },{ 
      "name" : "endDay", 
      "index" : "endDay", 
      "width" : 100 
     },{ 
      "name" : "endMonth", 
      "index" : "endMonth", 
      "width" : 100 
     },{ 
      "name" : "encryption", 
      "index" : "encryption", 
      "width" : "100", 
      "hidden" : true, 
     } ], 
     "sort" : { 
      "sortcount" : "2", 
      "sortColumn1" : "#jqgh_jqGrid_list_grid_code", 
      "sortColumn2" : "#jqgh_jqGrid_list_grid_name" 
     }, 
     "column" : [ "Code", "Name","Color","Start Day","Start Month","End Day","End Month", "Encryption" ], 
     "url" : { 
      "serverurl" : "/pms/season/list" 
     }, 
    }; 
    jqGridData(jsonData); 
} 
///////////////////////////////// 


    function colorformatter(cellvalue, options, rowObject) 
{ 
    //return '<img src="'+cellvalue+'" />'; 

    alert("cellvalue"+cellvalue); 
// format the cellvalue to new format 
    var myGrid = $('#jqGrid_list_grid'), 
    selRowId = myGrid.jqGrid ('getGridParam', 'selrow'), 
    celValue = myGrid.jqGrid ('getCell', selRowId, 'Color'); 
return cellvalue; 
} 

有任何一點毛病我code.Why不要我的警報得到工作？

我我的瀏覽器中檢查console.No那裏顯示的錯誤，它表明我的函數被調用，但該警報和下面的代碼不被工作？

Answer 1

您只發布了一小部分代碼，但可以看到很多問題。

第一招：你應該在使用的屬性類型小心。例如colModel項width屬性的值應該是多少，而不是串（"width" : 100代替"width" : "100"）。更重要的是，formatter屬性的值應該是函數而不是包含該函數名稱的字符串。 JavaScript解析JavaScript代碼並查看在同一範圍內定義的所有變量（例如，您可以直接在函數jqGridMethod內定義colorformatter函數）或在外部範圍內定義。如果通過使用Ajax調用從服務器獲得colModel，則不能直接指定函數，因爲JSON不支持函數類型。在這種情況下，您應該使用jqGrid 4.7或更高版本（我建議使用free jqGrid 4.9.2）。它允許您定義使用自定義格式化程序的常用模板，並使用字符串作爲formatter屬性的值。詳情請參閱here。或者，您可以通過設置$.fn.fmatter對象的colorformatter屬性來定義自定義格式器。參見定義formatter: "dynamicLink"和formatter: "checkboxFontAwesome4"的the code或another one。

的第二個重要問題是理解格式化的目標。問題是以下。 jqGrid需要填充網格的內容（body）。 Web瀏覽器提供了動態地處理HTML頁面內容的界面，但是理解頁面上一個元素的修改需要修改其他元素，這一點非常重要。例如，如果在表格中插入一行，則可以更改下方行的位置和表格下方其他元素的位置。以同樣的方式其他元素的CSS樣式也可以改變。因此，網頁瀏覽器必須重新計算在對HTML頁面進行任何修改後，頁面所有現有元素的許多屬性。該過程具有名稱重排（參見here）。爲了提高填充大型電網jqGrid的性能，請使用以下方案。它收集所有網格的內容作爲HTML字符串片段然後將innerHTML的屬性<tbody>網格的元素設置爲一個操作。它大大提高了大型電網的填充性能。現在應該清楚格式化程序必須返回單元格的HTML片段作爲字符串。以同樣的方式，您不能使用myGrid.jqGrid ('getCell', selRowId, 'Color')從網格體中獲取值，因爲在之前自定義格式化程序將被稱爲，則會填充正文。

如果自定義格式化程序需要訪問來自同一行另一列的值，則應使用options或rowObject參數。在使用free jqGrid的情況下，您可以刪除rowObject參數，因爲您需要的所有信息已在options之內。當前填充行的rowid位於options.rowId。來自當前行輸入數據的值可以在options.rowData中找到。要獲得Color列的值，您可以使用options.rowData.Color。

如果您必須使用舊版本的jqGrid，那麼您應該使用rowObject參數。 rowObject對象的數據格式取決於很多因素。在網格初始填充期間，rowObject對象包含數據，其格式相同，如從服務器返回的輸入數據。如果您加載格式

{ 
    "total": "xxx", 
    "page": "yyy", 
    "records": "zzz", 
    "rows": [ 
     {"id":"12", "cell":["cell11", "cell12", "cell13"]}, 
     {"id":"34", "cell":["cell21", "cell22", "cell23"]}, 
      ... 
    ] 
} 

來自服務器的數據，那麼你應該使用rowObject[i]訪問Color列，你必須使用i相當於在colModel陣列Color列的數量。 options.pos可能是您應該使用的索引而不是i，但該值可以區分爲1至3取決於您使用或不使用選項multiselect: true，subGrid: true或rownumbers: true。

如果您使用的輸入數據的另一種格式

{ 
    "total": "xxx", 
    "page": "yyy", 
    "records": "zzz", 
    "rows": [ 
     {"id":"12", "colName1":"cell11", "Color":"cell12", ...}, 
     {"id":"34", "colName1":"cell21", "Color":"cell22", ...}, 
      ... 
    ] 
} 

然後rowObject.Color會得到你需要的數據。

在使用情況下，輸入數據的第一個（陣列）格式和使用loadonce: true此外，您將有更復雜的情況。在初始加載數據時，您必須使用rowObject[2]來訪問Color，但在稍後填寫網格時，rowObject的格式將被更改，您將不得不使用rowObject.Color代替。所以你將不得不測試rowObject是否是數組，並使用相應的格式。 rowObject.Color || rowObject[2]的使用可以讓你有良好的效果。

我描述了rowObject的詳細格式，以便您瞭解使用簡化代碼的免費jqGrid 4.9.2的好處。您可以使用options.rowData.Color訪問與輸入數據格式無關的Color，並且獨立於使用loadonce: true選項。