在 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

您只发布了一小部分代码，但可以看出其中有很多问题。

第一个：你应该小心使用的属性类型。例如，colModel 项目的width 属性的值应该是数字而不是字符串（"width" : 100 而不是"width" : "100"）。更重要的是，formatter 属性的值应该是 function 而不是包含函数名称的字符串。 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 需要填充网格的内容（主体）。 Web 浏览器提供了动态操作 HTML 页面内容的接口，但非常重要的是要理解，页面上一个元素的修改跟随 other 元素的修改。例如，如果您在表格中插入一行，则可以更改下方行的位置以及表格下方其他元素的位置。以同样的方式，其他元素的CSS样式也可以改变。因此，在对 HTML 页面进行任何修改后，Web 浏览器必须重新计算页面所有现有元素的许多属性。该过程的名称为回流（请参阅here）。为了提高填充大网格 jqGrid 的性能，请使用以下场景。它收集网格所有主体的内容作为 HTML 字符串片段，然后将网格的<tbody> 元素的innerHTML 属性作为一次操作。它显着提高了大网格填充的性能。现在应该清楚的是，格式化程序必须将 单元格的 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 选项的使用无关。