javascript - 在jqgrid中调用自定义格式化程序不起作用

Question

我试图从我的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;
}

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

我在浏览器控制台内部进行了检查。那里没有显示错误，表明我的函数已被调用，但是警报和以下代码无法正常工作？

Answer 1

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

第一个：您应该小心使用的属性类型。例如，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属性来定义自定义格式器。请参见定义formatter: "dynamicLink"和formatter: "checkboxFontAwesome4"的the code或another one。

第二个重要问题是了解格式化程序的目标。问题如下。 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选项的使用无关。