在 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). It allows you to define common templates which uses custom formatter and to use string as the value of formatter property. See here for details. Alternatively you can defined custom formatters by setting colorformatter property of $.fn.fmatter object. See the code or another one 定义 formatter: "dynamicLink" 和 formatter: "checkboxFontAwesome4".

第二个重要问题是了解格式化程序的目标。问题如下。 jqGrid 需要填充网格的内容（主体）。 Web 浏览器提供了动态操作 HTML 页面内容的接口，但理解这一点非常重要，页面上一个元素的修改会跟随其他元素的修改。例如，如果您在 table 中插入一行，则可以更改下方行的位置以及 table 下方其他元素的位置。同样，其他元素的CSS样式也可以改变。因此，在对 HTML 页面进行任何修改后，Web 浏览器必须 重新计算 页面所有现有元素的许多属性。该过程的名称为 reflow（参见 here）。为了提高大型网格 jqGrid 的填充性能，请使用以下场景。它将网格的所有主体的内容收集为HTML字符串片段，然后放置innerHTML属性的<tbody>元素网格作为一次操作。它显着提高了大网格的填充性能。现在应该清楚格式化程序必须将单元格的 return 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 对象包含数据 ，其格式与从服务器 return 编辑的输入数据相同 。如果您以
格式从服务器加载数据
{ "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 选项的使用。

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

Custom formatter calling in jqgrid not worked

javascript

java

jquery

jqgrid

jqgrid-formatter