jqGrd超链接或showlink

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

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

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

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

 deleteLinkFmatter : function(cellvalue, options, rowObject) { return ''+ cellvalue + ''; } 

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

Answer 1

我同意预定义的格式化程序showlink面向超链接，如果您需要在点击链接时启动自定义JavaScriptfunction，则不太舒服。 然而， 在答案中，您会找到解释如何在案例中使用showlink的代码。

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

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

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

如果您更喜欢使用不引人注目的JavaScript样式，我建议您阅读以下答案： this ， this and this with this demos 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; }; 

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

另一种方法是不要定义任何 an all并使用例如 （使用下划线装饰或使用背景图像）。 如果您不需要禁止默认超链接操作，则click事件将为bubble定义网格主体的

元素。 因此，您可以使用onCellSelect或onCellSelect事件来绑定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是单击的列的名称。 你可以在这里阅读更多内容。

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