1

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

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

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

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

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

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

4

1 回答 1

3

我同意预定义的格式化程序showlink是面向超链接的，如果您需要在单击链接时启动自定义 JavaScript 函数，这会让人不舒服。不过，在答案中，您会找到解释如何showlink在案例中使用的代码。

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

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

在实现中，$.fn.fmatter.dynamicLink.onClick来自 的方法dynamicLink将在onclick属性中使用。

如果您更喜欢使用不显眼的 JavaScript 样式，我建议您阅读以下答案：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")部分$(row.cells[iCol]).children("a").click(function (e) {to.children("a").eq(0)或.children("a").eq(1)and.children("a").eq(2)来定义与第一个、第二个或第三个超链接的绑定（“编辑”/“添加”/“删除”）。您最好保存$(row.cells[iCol]).children("a")在变量中并.eq(1)与变量一起使用。

另一种方法是不定义任何<a>一个全部并使用例如<span>（带有下划线装饰或带有背景图像）。如果您不需要抑制默认超链接操作，并且单击事件将冒泡，直到<table>定义网格体的元素为止。所以你可以使用onCellSelectorbeforeSelectRow事件来绑定你的 JavaScript 代码。事件的Event（e参数）可以用来获取点击的行和列的所有信息。var $cell = $(e.target).closest('td')将为您提供单击的单元格，var $row = $cell.closest('tr.jqgrow')将为您提供单击的行，$row.attr('id')将成为 rowid 并为var iCol = $.jgrid.getCellIndex($cell[0])您提供列索引。是被单击的this.p.colModel[iCol].name列的名称。你可以在这里阅读更多关于方式的信息。

你怎么能看到你有很多可以使用的选项。因此，您可以选择更符合您要求的方式。

于 2012-05-07T09:43:07.047 回答