jqGrd超链接或显示链接

Question

我正在使用jqGrid并希望知道实现它的最佳解决方案。我正在使用backbone和jQuery。以下是需要的功能

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

超链接可以通过两种方式

1）使用showlink格式化或客户格式化完成。 showlink的问题是，我们只能拨打全球的功能，我不喜欢在loadComplete函数中编写我的click事件逻辑。因为我的网格是可重用的，不知道我将有超链接的列数。所以我用自定义格式这样

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

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

Answer 1

我同意预定义的格式化程序showlink面向超链接，当您需要在点击链接时启动自定义JavaScript函数时，它并不舒服。尽管如此，在the answer，你会发现解释如何在案件中使用showlink的代码。

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

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

在实现从dynamicLink方法$.fn.fmatter.dynamicLink.onClick将在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>超链接在一列中，您可以轻松修改的情况下上面的代码。在您可以将$(row.cells[iCol]).children("a").click(function (e) {的部分.children("a")部分替换为.children("a").eq(0)或.children("a").eq(1)和.children("a").eq(2)以定义与第一，第二或第三超链接（“编辑”/“添加”/“删除”）的绑定。您最好将$(row.cells[iCol]).children("a")保存在一个变量中，并使用.eq(1)和变量。

还有一种方法是不定义任何<a>全部和使用例如<span>而不是（带下划线装饰或有背景图像）。在这种情况下，您不需要禁止默认的超链接动作，并且点击事件将会冒泡直至定义网格主体的<table>元素。因此，您可以使用onCellSelect或beforeSelectRow事件来绑定您的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是被点击的列的名称。你可以阅读更多here。

你怎么能看到你，你可以使用真正的许多选项。所以你可以选择更好地符合你的要求的方式。