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"的{{3}}或the code。

第二个重要问题是理解格式化程序的目标。问题如下。 jqGrid需要填充网格的内容（正文）。 Web浏览器提供了动态操作HTML页面内容的界面，但理解，修改其他元素后，页面上的一个元素的修改非常重要。例如，如果在表格中插入一行，则可以更改下面行的位置和表格下方其他元素的位置。同样，其他元素的CSS样式也可以更改。因此，在对HTML页面进行任何修改之后，Web浏览器必须重新计算页面中所有现有元素的许多属性。该过程的名称为reflow（请参阅another one）。要提高大网格jqGrid的填充性能，请使用以下方案。它将网格的所有主体的内容收集为HTML字符串片段，然后将网格innerHTML元素的<tbody>属性设置为一个操作 。它大大提高了大网格填充的性能。现在应该清楚格式化程序必须将单元格的HTML片段作为字符串返回。以同样的方式，您无法使用myGrid.jqGrid ('getCell', selRowId, 'Color')从网格主体获取值，因为在主体将被填充之前，自定义格式化程序将被称为。

如果自定义格式化程序需要访问同一行中其他列的值，则应使用options或rowObject参数。如果使用here，您可以删除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可以是您应该使用的索引，而不是multiselect: true，但是值可以区分为1到3取决于您是否使用选项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的格式将会更改，您必须使用{{1}相反。因此，您必须测试rowObject是否为数组，并使用相应的格式。使用rowObject.Color || rowObject[2]可以获得良好的效果。

我详细描述了rowObject的格式，以便您了解使用简化代码的免费jqGrid 4.9.2的好处。您可以使用options.rowData.Color独立于输入数据格式访问Color，而不依赖于loadonce: true选项的使用。

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

1 个答案: