Question

我正在使用jqGrid并想知道实现它的最佳解决方案。我正在使用骨干和jQuery。以下是所需的功能

具有超链接的列。它将是编辑/删除/自定义超链接。
点击链接，基本上它不应该导航只是调用一些功能。例如，在删除时，它只会删除该行。
超链接列的数量是动态的。

超链接可以通过两种方式完成

1）使用showlink格式化程序或客户格式化程序。 showlink的问题是我们只能调用全局函数，我不习惯在click函数中编写loadComplete事件逻辑。因为我的网格是可重用的，并且不知道我将有超链接的列数。所以我正在使用像这样的自定义格式化程序

deleteLinkFmatter : function(cellvalue, options, rowObject)
{
   return '<a onclick="deleteRow(' + options.rowId + ')">'+ cellvalue + '</a>';
}

上述代码的问题是，backbone.js表示找不到deleteRow。我发现在这个网站上提出了不同的方法，但都是徒劳的。任何人都可以提出解决方案吗？

Answer 1

我同意预定义格式化程序showlink面向超链接，如果您需要在点击链接时启动自定义JavaScript功能，则不方便。不过，在the answer中，您会找到解释如何在案例中使用showlink的代码。

如果您想在单独的列中添加编辑/删除/自定义超链接，您可以轻松使用我编写和描述here的dynamicLink。你是对的，如果你写的话，你必须在全局级别定义onclick <a>属性中调用的函数。你不应该忘记，可以使用一些常见的全局命名空间，如jQuery，并定义许多可以从jQuery命名空间调用的函数。例如，您可以从here下载的dynamicLink与showlink的使用方式相同。例如

{ name: 'editlink', formatter: 'dynamicLink',
    formatoptions: {
        onClick: function (rowid, iRow, iCol, cellText, e) {
            // any your code
        }
    }}

在实施中，$.fn.fmatter.dynamicLink.onClick中的方法dynamicLink将用于onclick属性。

如果您更喜欢使用unobtrusive JavaScript style，我建议您阅读以下答案：this，this和this以及相应的演示this， this和this。或者，您可以使用doInEachRow来简化枚举

loadComplete: function() {
    var iCol = getColumnIndexByName.call(this, 'editlink'); // get index of the column

    $(this).jqGrid('doInEachRow', function (row, rowId, localRowData) {
        $(row.cells[iCol]).children("a").click(function (e) {
            e.preventDefault();
            // any your code here
        });
    });
}

，其中

var getColumnIndexByName = function (columnName) {
        var $this = $(this), cm = $this.jqGrid('getGridParam', 'colModel'), i,
            l = cm.length;

        for (i = 0; i < l; i++) {
            if (cm[i].name === columnName) {
                return i; // return the index
            }
        }
        return -1;
    };

如果在一列中放置了许多<a>超链接，则可以轻松修改上述代码。在这种情况下，您只需将.children("a")的{{1}}部分替换为$(row.cells[iCol]).children("a").click(function (e) {或.children("a").eq(0)和.children("a").eq(1)即可定义与第一个，第二个或第三个超链接的绑定（＆＃34;编辑＆＃34; /＆＃34;添加＆＃34; /＆＃34;删除＆＃34）。您最好将.children("a").eq(2)保存在变量中，并将$(row.cells[iCol]).children("a")与变量一起使用。

另一种方法是不要定义任何.eq(1)全部，而是使用例如<a>代替（使用下划线装饰或背景图片）。如果您不需要禁止默认超链接操作，则点击事件将会冒泡，直到定义网格主体的<span>元素为止。因此，您可以使用<table>或onCellSelect个事件来绑定JavaScript代码。事件的beforeSelectRow（Event参数）可用于获取有关所单击行和列的所有信息。 e会显示已点击的单元格，var $cell = $(e.target).closest('td')会显示已点击的行，var $row = $cell.closest('tr.jqgrow')将为rowid，$row.attr('id')为您提供列索引。 var iCol = $.jgrid.getCellIndex($cell[0])是单击的列的名称。您可以阅读here更多信息。

如何看待您有很多可以使用的选项。因此，您可以选择更符合您要求的方式。

jqGrid超链接或showlink

1 个答案: