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。

你怎麼能看到你，你可以使用真正的許多選項。所以你可以選擇更好地符合你的要求的方式。