自定义格式化器调用的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选项。