在jqgrid中调用的自定义格式化程序无效

Posted 2021-04-19

我试图从我的jqgrid调用格式化程序函数。我在格式化程序函数中放了一个警告，但它没有用。我按照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;
}

我的代码有什么问题吗？为什么我的警报不起作用？

我检查了我的浏览器控制台。没有显示错误，它表示我的函数被调用，但该警报和后续代码无法正常工作？

答案

您只发布了一小部分代码，但内部可以看到许多问题。

第一个：你应该小心使用的属性类型。例如，width项目的colModel属性的值应该是数字而不是字符串（"width" : 100而不是"width" : "100"）。更重要的是，formatter属性的值应该是函数而不是包含函数名称的字符串。 JavaScript解析JavaScript代码并查看在同一范围内定义的所有变量（例如，您可以直接在函数colorformatter中定义jqGridMethod函数）或外部范围。如果通过使用Ajax调用从服务器获取colModel，则无法直接指定函数，因为JSON不支持函数类型。在这种情况下你应该使用jqGrid 4.7或更高版本（我建议使用free jqGrid 4.9.2）。它允许您定义使用自定义格式化程序的常用模板，并使用字符串作为formatter属性的值。有关详细信息，请参阅here。或者，您可以通过设置colorformatter对象的$.fn.fmatter属性来定义自定义格式化程序。参见the code或another one，它定义了formatter: "dynamicLink"和formatter: "checkboxFontAwesome4"。

第二个重要问题是理解格式化程序的目标。问题如下。 jqGrid需要填充网格的内容（正文）。 Web浏览器提供了动态操作html页面内容的界面，但是理解，页面上一个元素的修改遵循其他元素的修改是非常重要的。例如，如果在表格中插入一行，则可以更改下面行的位置和表格下方其他元素的位置。同样，其他元素的CSS样式也可以更改。因此，在HTML页面的任何修改之后，Web浏览器必须重新计算页面的所有现有元素的许多属性。该过程的名称为reflow（请参阅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，它对应Color数组中的colModel列的数量。 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选项的使用。