jqGrid模式形式與

Question

我試圖找到jqgrid具有以下功能的示例。

1. 每行
2. 在每一行上（理想地在一個單獨的列中的編輯圖標）的刪除圖標的編輯圖標。
3. 本地數據
4. 一個模式的編輯形式，而不是內聯編輯

This例子是我所見過的最接近，但它不具備的功能1 & 2. 有人能告訴我一個例子具備所有這些功能？

Answer 1

好了，所以我assumimg你有這樣colNames例如

[「名稱」，「公司」，「編輯」，「刪除」]

現在，在每一行編輯欄中的你想要一個自定義編輯按鈕，同樣刪除也是，對吧？

我打算爲自定義按鈕編寫代碼，如果你不想自定義按鈕，那麼你可以去action formatter。爲此我也會寫代碼。

單獨列中的自定義編輯和刪除按鈕。

function callMeOnLoadComplete(){ 
var iCol = getColumnIndexByName(grid,'Edit'); // 'Edit' - name of the actions column 
     grid.children("tbody") 
       .children("tr.jqgrow") 
       .children("td:nth-child("+(iCol+1)+")") 
       .each(function() { 
       $("<div>", 
         { 
          title: "Save", 
          mouseover: function() { 
           $(this).addClass('ui-state-hover'); 
          }, 
          mouseout: function() { 
           $(this).removeClass('ui-state-hover'); 
          }, 
          click: 
          do sth 
          } 
        ).css({"margin-left": "5px", float:"left"}) 
         .addClass("ui-pg-div ui-inline-save") 
         .attr('id',"saveEdits") 
         .append('<span class="ui-button-icon-primary ui-icon ui-icon-disk"></span>') 
         .appendTo($(this).children("div")); 

} 

呼叫中的jqGrid的loadComplete或gridComplete參數上述功能。這對於「編輯」列來說也是如此，對於「刪除」列也是如此。

var getColumnIndexByName = function(grid,columnName) { 
       var cm = grid.jqGrid('getGridParam','colModel'), i=0,l=cm.length; 
       for (; i<l; i+=1) { 
        if (cm[i].name===columnName) { 
         return i; // return the index 
        } 
       } 
       return -1; 
      }; 

我假設你擁有jQuery的定製ui.css因爲這些圖標會從圖像拾取來與它一起。

Edit and Delete Button with action formatter 

與您的colModal，編輯列做類似的事情。

{ name: 'Edit', index: 'Edit', formatter: 'actions',formatoptions: {keys: true,delbutton:false}} 

我給出delbutton的原因：false，因爲你想在delete列中刪除按鈕。如果你想在同一列中刪除這個屬性，你也可以在Delete列中使用同樣的動作格式化程序，並在那裏編輯editbutton：false。