jqgrid中的兩種不同編輯形式

Question

有沒有一種方法可以在jqGrid中實現2種不同的編輯形式。我的意思是一個普通的編輯表單，另一個表單字段較小（自定義）。都在同一個navGrid中。說編輯和編輯部分。任何人都可以拋出一些光？非常感謝。

Answer 1

由navGrid添加的按鈕「添加」和「編輯」調用editGridRow方法使用不同參數作爲第二個參數（參數properties）。在使用navGrid的情況下，被稱爲

$("#grid").jqGrid("navGrid", "#pager", {parameters}, prmEdit, prmAdd); 

然後navGrid電話

$("#grid").jqGrid("editGridRow", rowid, prmEdit); 

如果用戶點擊 「編輯」 按鈕，並呼籲

$("#grid").jqGrid("editGridRow", rowid, prmAdd); 

如果用戶點擊 「添加」 按鈕。

以相同的方式，您可以將新的自定義按鈕添加到導航器，方法是navButtonAdd方法。例如

$("#grid").jqGrid("navButtonAdd", "#pager", { 
    caption: ""/*"My Edit"*/, 
    buttonicon: "ui-icon-note", // some icon 
    title: "My edit", 
    onClickButton: function() { 
     var $self = $(this); 
     $self.jqGrid("editGridRow", 
      $self.jqGrid("getGridParam", "selrow"), 
      { // some options 
       recreateForm: true 
      } 
     ); 
    } 
}); 

的方式添加多一個編輯按鈕。您現在唯一需要做的就是在呼叫editGridRow之前臨時更改某些欄的editable屬性，並在呼叫editGridRow後將其重置爲原始值。您可以使用setColProp方法來簡化工作。例如，如果你想myColumn列可編輯你可以使用

$("#grid").jqGrid("navButtonAdd", "#pager", { 
    caption: ""/*"My Edit"*/, 
    buttonicon: "ui-icon-note", // some icon 
    title: "My edit", 
    onClickButton: function() { 
     var $self = $(this); 
     // make "myColumn" temporary editable 
     $self.jqGrid("setColProp", "myColumn", {editable: true}); 
     $self.jqGrid("editGridRow", 
      $self.jqGrid("getGridParam", "selrow"), 
      { // some options 
       recreateForm: true 
      } 
     ); 
     // make "myColumn" back as non-editable 
     $self.jqGrid("setColProp", "myColumn", {editable: false}); 
    } 
}); 

我想強調的recreateForm: true選項，使用情況所有使用的editGridRow（含navGrid）是非常重要的。所以我建議你只是改變選項的默認值：

$.extend($.jgrid.edit, { recreateForm: true });