如何将对象作为方法参数传递给javascript而不会出现意外的标识错误

Question

在JQGrid表中，其中一个单元格中有一个链接，单击时，它应该执行一个javascript。

{name : 'localAccountNo' , jsonmap : 'localAccountNo', label : 'Customer <br>Number', width:50, frozen:true, formatter : localAccountNumberCellFormatter}

JQGrid localAccountNumber单元格格式代码

function localAccountNumberCellFormatter(cellvalue, options, rowObject)
{
    return '<a onclick="selectCustomer('+ rowObject +')">'+ cellvalue +'</a>';
}

选择客户javascript代码

function selectCustomer(rowOfCustomer) {
    console.log(rowOfCustomer);
}

单击JQGrid单元格中的链接失败，并出现语法错误。

  

未捕获的SyntaxError：意外的标识符

但是，当您通过转义对象时将rowObject传递给selectCustomer方法作为字符串，如下面的代码所示，它可以工作。但它只传递对象的字符串表示，而不是实际的对象。

function localAccountNumberCellFormatter(cellvalue, options, rowObject)
{
    return '<a onclick="selectCustomer(\''+ rowObject +'\')">'+ cellvalue +'</a>';
}

rowObject传递给selectCustomer方法

Answer 1

自定义格式化程序应该是正确的HTML片段。因此，您必须将rowObject编码为字符串（例如，使用JSON.stringify）并转义自定义格式化程序内部字符串的引号。方法selectCustomer必须先将字符串参数转换回对象（使用JSON.parse）才能使用rowObject。

有更好的替代方法，您可以在大多数情况下使用它们。 onclick句柄将以<a>的DOM开头，this和event初始化为Click事件的Event对象。因此，您可以使用

function localAccountNumberCellFormatter(cellvalue, options, rowObject) {
    return '<a onclick="selectCustomer.call(this)">'+ cellvalue +'</a>';
}

从父行获取rowid并使用rowid调用getRowData以从其他列获取数据。你将得到完全相同的rowObject，但在大多数情况下几乎相同：

function selectCustomer (event) {
    var $tr = $(this).closest(".jqgrow"), rowid = $tr.attr("id"),
        $grid = $tr.closest(".ui-jqgrid-btable"),
        item = $grid.jqGrid("getRowData", rowid);
    alert("item.lastName=" + item.lastName);
}

您可以使用

return '<a onclick="return selectCustomer.call(this, event);">'+ cellvalue +'</a>';

并从false返回selectCustomer以防止事件冒泡。转发event对象后，您可以使用event.target内的selectCustomer代替this。

顺便说一句，如果您确实需要使用与该行关联的rowObject，那么最好将其保存为行（data-somevalue）元素的<tr>属性。请参阅the old answer，其中显示了如何使用rowattr执行此操作。您可以在$tr.data的上述代码中使用selectCustomer来访问该对象。

如果您提醒事件冒泡，那么很明显，不需要在列中的每个onclick元素上设置<a>属性。除此之外，您可以将<span>放在CSS类中，这使得文本看起来像链接，因此用户可以理解可以单击文本。可以在click元素上注册仅一个 <table>处理程序，由于事件冒泡而将调用该处理程序。顺便说一句，jqGrid已经有click个处理程序。您可以使用beforeSelectRow或onCellSelect，这将在click处理程序内部调用。回调的第二个参数（e）是事件，您可以使用e.target来访问点击的<span>。您可以在the answer，this one或其他一些内容中找到有关该方法的更多详细信息。

Answer 2

您可以使用JSON.stringify传递对象

return '<a onclick="selectCustomer('+ JSON.stringify(rowObject) +')">'+ cellvalue +'</a>';

Answer 3

如果您不必支持IE，则可以使用模板字符串：

function localAccountNumberCellFormatter(cellvalue, options, rowObject) {
    return `<a onclick="selectCustomer(${rowObject})">${cellvalue}</a>`;
}