jqGrd超链接或showlink [英] jqGrd hyperlink or showlink

问题描述

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

I am using jqGrid and want to know the best solution to implement it. I am using backbone and jQuery. Following are the feature required

1. 具有超链接的列。它将是编辑/删除/自定义超链接。


2. 点击链接，基本上它不应该导航只是调用一些功能。例如，在删除时它只会删除该行。


3. 超链接列的数量是动态的。

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

Hyperlink can be done in two ways

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

1) Use showlink formatter or Customer formatter. Problem with showlink is we can call only global functions and i am not comfortable writing my click event logic in loadComplete function. Because my grid is re-usable and dont know the number of columns i will be having hyperlink. So i am using custom formatter like this

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

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

Problem with the above code is, in backbone.js its saying that deleteRow not found. I found different ways suggested in this site but all in vain. Can any one suggest a solution?

推荐答案

我同意预定义格式化程序 showlink 面向超链接，如果您需要在点击时启动自定义JavaScript功能，则不舒服在链接上。不过在答案中，您会找到解释如何使用 showlink 在这种情况下。

I agree that the predefined formatter showlink is oriented on hyperlink and it's not comfortable in case when you need to start your custom JavaScript function on click on the link. Nevertheless in the answer you would find the code which explain how you can use showlink in the case.

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

If you want to add Edit/Delete/Custom hyperlinks in separate columns you can easy use dynamicLink which I wrote and described here. You are right, if you write that the function which you call in onclick attribute of <a> must be defined on the global level. You should not forget, that one can use some common global namespace like jQuery and define many functions which can be called from the jQuerynamespace. For example dynamicLink which you can download from here can be used in the same way as showlink. For example

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

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

如果您更喜欢使用不引人注目的JavaScript样式我建议你阅读以下答案：这个，这个和这个以及相应的演示这个，这个和这个。或者，您可以使用 doInEachRow 来简化枚举很少

If you prefer to use unobtrusive JavaScript style I would recommend you to read the following answers: this, this and this with the corresponding demos this, this and this. Alternatively you can use doInEachRow which simplify a little the enumeration

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;
    };

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

You can easy modify the above code for the case if you place many <a> hyperlinks in one column. In the case you can just replace .children("a") part of $(row.cells[iCol]).children("a").click(function (e) { to .children("a").eq(0) or .children("a").eq(1) and .children("a").eq(2) to define binding to the first, second or third hyperlink ("edit"/"add"/"delete"). You should better to save $(row.cells[iCol]).children("a") in a variable and use .eq(1) with the variable.

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

One more way will be don't define any <a> an all and use for example <span> instead (with underlining decoration or with background image). In the case you don't need to suppress default hyperlink action and the click event will be bubble till the <table> element which define the grid body. So you can use onCellSelect or beforeSelectRow events to bind your JavaScript code. The Event (e parameter) of the events can be used to get all information about the clicked row and column. var $cell = $(e.target).closest('td') will get you the clicked cell, var $row = $cell.closest('tr.jqgrow') will get you the clicked row, $row.attr('id') will be the rowid and var iCol = $.jgrid.getCellIndex($cell[0]) get you the column index. The this.p.colModel[iCol].name is the name of the column which was clicked. You can read here more bout the way.

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

How you can see you have really many options which you can use. So you can choose the way which better corresponds your requirements.

这篇关于jqGrd超链接或showlink的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！