jqGrid更改爲特定行的動態編輯類型

Question

在此post之後，我找到了一些我想要獲得的方法，但遇到了一些麻煩。 這裏是我的代碼：

var myDlg = $("#dlgpers"),lastsel; 
myDlg.jqGrid({ 
    url:'pers.php?id='+dataRow.id, 
    mtype:'GET', 
    datatype: "json", 
    ajaxGridOptions: { cache: false }, 
    height:250, 
    cmTemplate: {sortable:false}, 
    gridview: true, 
    cellEdit:true, 
    scroll:false, 
    colNames:['Id','Label','Information','Type','Data'], 
    colModel:[ 
     {name:'id',index:'id',hidden:true,key:true}, 
     {name:'label',index:'label',align:'right',width:100,editable:false, 
      cellattr: function (rowId, val, rawObject, cm, rdata) { 
       return ' style="font-weight:bold;margin-right:5px;border-left:0;border-top:0;" class="ui-state-active"' ; 
      } 
     }, 
     {name:'info',index:'info',width:200,editable:true,edittype:'text'}, 
     {name:'type',index:'type',width:30,hidden:true}, 
     {name:'data',index:'data',width:30,hidden:true} 
    ], 
    loadComplete: function() { 
     var rowIds = myDlg.jqGrid('getDataIDs'); 
     $.each(rowIds, function (i, row) { 
      var rowData = myDlg.jqGrid('getRowData',row); 
      if (rowData.type == 'select') { 
       myDlg.jqGrid('restoreRow', row); 
       var cm = myDlg.jqGrid('getColProp', 'info'); 
       cm.edittype = 'select'; 
       cm.editoptions = { value: rowData.data }; 
       myDlg.jqGrid('editRow', row); 
       cm.edittype = 'text'; 
       cm.editoptions = null; 
       cm.editable = true; 
      }else{ 
       myDlg.jqGrid('restoreRow', row); 
       var cm = myDlg.jqGrid('getColProp', 'info'); 
       cm.edittype = 'text'; 
       cm.editoptions = null; 
       cm.editable = true; 
       myDlg.jqGrid('editRow', row); 
       cm.edittype = 'text'; 
       cm.editoptions = null; 
       cm.editable = true; 
      } 
     }); 
    } 
}); 

，並將結果作爲圖像：

和JSON響應：

{"page":1,"total":1,"records":1,"rows":[ 
{"cell":[0,"Nom ","LEBRUN","text",""]}, 
{"cell":[1,"Pr\u00e9nom ","Jacques","text",""]}, 
{"cell":[2,"Initiales ","LJ","text",""]}, 
{"cell":[3,"Fonction ","","text",""]}, 
{"cell"[4,"Service,"Administratif","select","0:Administratif;1:Commercial;2:Magasin;3:M\u00e9canique;4:Rejointage;5:Soudure;6:Tests"]}, 
{"cell":[5,"T\u00e9l\u00e9phone ","","text",""]}, 
{"cell":[6,"Email ","","text",""]}, 
{"cell":[7,"Statut ","CDI","select","0:CDI;1:CDD;2:App;3:Stg;4:Int"]}, 
{"cell":[8,"Entr\u00e9 le ","2008-10-06","text",""]}, 
{"cell":[9,"Sorti le ","0000-00-00","text",""]}]} 

兩個問題我向你的知識：

1. 正如你所看到的，第二行（Prénom）似乎不可編輯，但它是。
2. 我不明白爲什麼這些輸入是可見的，因爲我希望它們只在我編輯某個單元格時出現。

非常感謝您的全力幫助，以便解決（並解釋）我錯誤的方式。 JiheL

已更新2013年3月29日

我申請你的答案代碼，並且運行正常！非常感謝。 但是我爲另一個主題創造了另一種形式，這給我帶來了一些麻煩。

下面是這種新形式的代碼：

 var showAbs=function(){ 
     $('#EditDialog').empty(); 
     var $table=$('<table></table>') 
     .attr('id','dlgcong') 
     .appendTo($('#EditDialog')); 
     var myCong = $("#dlgcong"); 
     myCong.jqGrid({ 
      url:'xpabs.php?id='+id+'&y='+y, 
      datatype: "json", 
      height:"auto", 
      cmTemplate: {sortable:false}, 
      gridview: true, 
      colNames:['Type absence','Début','Fin','id'], 
      colModel:[ 
       {name:'abs',index:'abs',width:155,editable:true,edittype:'select', 
        editoptions:{ 
         dataUrl:"selabs.php", 
        dataEvents: [ 
          { 
           type: 'change', 
           fn: function(e) { 
            $(this).parent().css('background-color','#'+$(this).find('option:selected').attr('colr')); 
            if($(this).find('option:selected').attr('colr')=='ffffff'){ 
             $(this).parent().parent().find('input').datepicker('disable'); 
            }else{ 
             $(this).parent().parent().find('input').datepicker('enable'); 
             $(this).parent().parent().attr('changed',true); 
            } 
           } 
          } 
         ] 
        }, 
        cellattr: function (rowId, val, rawObject, cm, rdata) { 
         return ' style="background-color:#'+rawObject[4]+';color:white;"'; 
        } 
       }, 
       {name:'debut',index:'debut',align:'center',width:70,editable:true}, 
       {name:'fin',index:'fin',align:'center',width:70,editable:true}, 
       {name:'id',index:'id',hidden:true} 
      ], 
      jsonReader: { 
       cell: "", 
       root: function (obj) { 
        return obj; 
       } 
      },     
      loadComplete: function (data) { 
       var $self = $(this), 
         cm = $self.jqGrid("getColProp", "debut"), 
         idPrefix = $self.jqGrid("getGridParam", "idPrefix"), 
         l = data.length, 
         i, 
         item; 
       for (i = 0; i < l; i++) { 
        item = data[i]; 
        cm.editoptions = { 
         dataInit: function(element) { 
          $(element).datepicker({ 
           setDate:item[1], 
           minDate:'01/01/'+y, 
           maxDate:'31/12/'+y, 
           onSelect: function(selectedDate,inst) { 
            $(element).val(selectedDate); 
            $(element).parent().parent().attr('changed',true); 
           } 
          }) 
         } 
        } 
       } 
       var cm = $self.jqGrid("getColProp", "fin"); 
       for (i = 0; i < l; i++) { 
        item = data[i]; 
        cm.editoptions = { 
         dataInit: function(element) { 
          $(element).datepicker({ 
           setDate:item[2], 
           minDate:'01/01/'+y, 
           maxDate:'31/12/'+y, 
           onSelect: function(selectedDate,inst) { 
            $(element).val(selectedDate); 
            $(element).parent().parent().attr('changed',true); 
           } 
          }) 
         } 
        } 
        $self.jqGrid("editRow", idPrefix + item[3]); 
       } 
       myCong.find('select').each(function(){ 
        $(this).css({ 
         backgroundColor:'transparent', 
         color:'white', 
         border:0, 
         width:155 
        }); 
       }); 
      }, 
      idPrefix: "cong", 
      rowNum: 10000 
     }); 
     //******************** 
     // Button ' Valider ' 
     //******************** 
     $('<input />') 
     .attr({ 
      type:'button',   
     }) 
     .css({ 
      float:'right', 
      marginTop:'5px' 
     }) 
     .click(function(){ 
      var toBeSaved=''; 
      myCong.find('tr[changed=true]').each(function(idx){ 
       if(toBeSaved.length>0){ 
        toBeSaved+='|'; 
       } 
       toBeSaved+=$(this).find('td:eq(3)').text()+';'; 
       toBeSaved+=$(this).find('select option:selected').val()+';'; 
       toBeSaved+=$(this).find('input:eq(0)').val()+';'; 
       toBeSaved+=$(this).find('input:eq(1)').val(); 
      }); 
      if(toBeSaved.length>0){ 
       $.ajax({ 
        url:'majpabs.php?id='+id+'&data='+toBeSaved, 
        async:false, 
        dataType:'json', 
        success:function(data){ 
         myGrid.trigger('reloadGrid'); 
         $('#newAbs').val(' Nouveau ').attr('disabled',false); 
        } 
       }); 
      } 
     }) 
     .val(' Valider les absences ') 
     .appendTo($('#EditDialog')); 
     //******************* 
     // Button ' Retour ' 
     //******************* 
     $('<input />') 
     .attr({ 
      type:'button', 
      id:'newAbs' 
     }) 
     .css({ 
      float:'left', 
      marginTop:'5px' 
     }) 
     .click(function(){ 
      showPers(); 
     }) 
     .val(' Retour ') 
     .appendTo($('#EditDialog')); 
     //******************** 
     // Button ' Nouveau ' 
     //******************** 
     $('<input />') 
     .attr({ 
      type:'button', 
      disabled:false 
     }) 
     .css({ 
      float:'left', 
      marginTop:'5px', 
      marginLeft:'7px' 
     }) 
     .click(function(){ 
      if($(this).val()==' Nouveau '){ 
       var myRow = {abs:"0", debut:'00/00/'+y, fin:'00/00/'+y, id:'0'}; 
       myCong.jqGrid('addRowData','',myRow, 'last'); 
       $(this).val(' Sauver ').attr('disabled',true); 
      }else{ 
      } 
     }) 
     .val(' Nouveau ') 
     .appendTo($('#EditDialog')); 
    } 

，並將結果作爲圖像：

1. 正如你可以看到，第一行不接收選擇和datepicker作爲其他行。奇怪！
2. 當我添加新行時，它不會收到select和datepicker作爲第一行。 我認爲我在理解這種方法方面是錯誤的。

我很擔心這些問題打擾你，我看了一下wiki沒有成功找到任何方法來使這些點正確。我想找一些更詳細的教程，其中顯示了一些案例的例子。

謝謝非常，如果你能再次花一些時間給我的方式更有效率與jqGrid.JiheL

已更新2013年4月1日

我已經申請Oleg的建議和現在的作品。但麻煩依然存在。 這裏是圖像：

第一行，選擇框即可。 第一個輸入字段接收日期選擇器，但第二個（名爲'fin'的列）不是！ 所有其他行都會收到日期選擇器，但不會收到第一行的最後一個字段。 下面是代碼：

   loadComplete: function (data) { 
       var $self = $(this), 
         idPrefix = $self.jqGrid("getGridParam", "idPrefix"), 
         l = data.length, 
         i, 
         item, 
         cm; 
       for (i = 0; i < l; i++) { 
        item = data[i]; 
        cm = $self.jqGrid("getColProp", "debut"); 
        cm.editoptions = { 
         dataInit: function(element) { 
          //alert('deb'+i); 
          $(element).datepicker({ 
           setDate:item[1], 
           minDate:'01/01/'+y, 
           maxDate:'31/12/'+y, 
           onSelect: function(selectedDate,inst) { 
            $(element).val(selectedDate); 
            $(element).parent().parent().attr('changed',true); 
           } 
          }) 
         } 
        }; 
        $self.jqGrid("editRow", idPrefix + item[3]); 
        // 
        cm = $self.jqGrid("getColProp", "fin"); 
        cm.editoptions = { 
         dataInit: function(element) { 
          //alert('fin'+i); 
          $(element).datepicker({ 
           setDate:item[2], 
           minDate:'01/01/'+y, 
           maxDate:'31/12/'+y, 
           onSelect: function(selectedDate,inst) { 
            $(element).val(selectedDate); 
            $(element).parent().parent().attr('changed',true); 
           } 
          }) 
         } 
        }; 
        $self.jqGrid("editRow", idPrefix + item[3]); 
       } 
       myCong.find('select').each(function(){ 
        $(this).css({ 
         backgroundColor:'transparent', 
         color:'white', 
         border:0, 
         width:155 
        }); 
       }); 
      }, 

還有一次，我希望你能幫助我解決這個煩惱，並關閉該請求。非常感謝您花時間幫助新手。 JiheL

Answer 1

我覺得很多來自你的代碼中的問題很常見。所以我試着回答你更詳細的問題。

首先你發佈了錯誤的JSON數據。該生產線

{"cell"[4,"Service,"Administratif","select","0:Administratif;1:Commercial;2:Magasin;3:M\u00e9canique;4:Rejointage;5:Soudure;6:Tests"]}, 

包含兩個錯誤：

1. 沒有 '：' 「細胞」
2. 後無"後"Service

的變化後，訂單會如此

{"cell":[4,"Service","Administratif","select","0:Administratif;1:Commercial;2:Magasin;3:M\u00e9canique;4:Rejointage;5:Soudure;6:Tests"]}, 

可以讀取JSON數據。接下來的問題是在一個數組中使用數字和字符串。因爲在jqGrid的代碼the line錯誤

idr = ccur !== undefined ? ccur[idn] || idr : idr; 

IDS不能爲整數值0我張貼the bug report有關錯誤。 要使用jqGrid的現有代碼解決問題，您應該使用字符串而不是數字。例如，該線路

{"cell":[0,"Nom ","LEBRUN","text",""]}, 

應改爲

{"cell":["0","Nom ","LEBRUN","text",""]}, 

沒有改變，你必須ID重複。第一行（{"cell":[0,"Nom ","LEBRUN","text",""]}和{"cell":[1,"Pr\u00e9nom ","Jacques","text",""]},）將得到相同的ID等於1而不是0和1. 這是您描述的問題的主要原因。

另外我建議你如下：

• 刪除cellEdit:true選項。您稍後在代碼中使用editRow。這意味着您使用inline editing而不是cell editing，這意味着cellEdit:true。您無法在一個網格中組合兩種編輯模式。
• 從colModel更換height:250選項height:"auto"
• 刪除所有index屬性。用默認值（edittype:'text'，editable:false）的jqGrid的用默認值（mtype:'GET'，scroll:false）
• 刪除選項
• 在JavaScript中所有的功能參數是可選的除去的colModel所有屬性。所以，如果你不例如使用cellattr回調的任何參數可以更換cellattr: function (rowId, val, rawObject, cm, rdata) {...}到cellattr: function() {...}
• 回調loadComplete有一個參數data可以爲您提供從服務器返回的所有數據。所以你不需要使用getDataIDs和getRowData。數組data.rows可以直接使用。
• 如果您使用data參數loadComplete回調，您可以從網格中刪除不需要的'type'和'data'列。
• 如果你把有關id'Label','Information'後，那麼你可以從電網中使用id財產jsonReader和刪除隱藏id列得信息。例如，如果將id作爲cell陣列中的最後一個移動，則可以使用jsonReader: {id: 4}並從網格中移除隱藏的id列。如果您在jsonReader中另外添加cell: ""屬性，則可以從輸入數據中刪除"cell":。如果您使用定義爲功能jsonReader的root屬性（請參閱the documentation），則可以從服務器響應中刪除一些不需要的數據。

例如服務器可以產生的簡化數據

[ 
["Nom ","LEBRUN","text","","0"], 
["Pr\u00e9nom ","Jacques","text","","1"], 
["Initiales ","LJ","text","","2"], 
["Fonction ","","text","","3"], 
["Service","Administratif","select","0:Administratif;1:Commercial;2:Magasin;3:M\u00e9canique;4:Rejointage;5:Soudure;6:Tests","4"], 
["T\u00e9l\u00e9phone ","","text","","5"], 
["Email ","","text","","6"], 
["Statut ","CDI","select","0:CDI;1:CDD;2:App;3:Stg;4:Int","7"], 
["Entr\u00e9 le ","2008-10-06","text","","8"], 
["Sorti le ","0000-00-00","text","","9"] 
] 

相應的jqGrid可以是

$("#dlgpers").jqGrid({ 
    url: "pers.php?id=" + dataRow.id, 
    datatype: "json", 
    height: "auto", 
    cmTemplate: {sortable: false}, 
    gridview: true, 
    colNames: ["Label", "Information"], 
    colModel: [ 
     {name: "label", align: "right", width: 100, 
      cellattr: function() { 
       return ' style="font-weight:bold;margin-right:5px;border-left:0;border-top:0;" class="ui-state-active"'; 
      }}, 
     {name: "info", width: 200, editable: true} 
    ], 
    jsonReader: {id: 4, cell: "", root: function (obj) { return obj; } }, 
    loadComplete: function (data) { 
     var $self = $(this), 
      cm = $self.jqGrid("getColProp", "info"), 
      idPrefix = $self.jqGrid("getGridParam", "idPrefix"), 
      l = data.length, 
      i, 
      item; 

     for (i = 0; i < l; i++) { 
      item = data[i]; 
      cm.edittype = item[2] === "select" ? "select" : "text"; 
      cm.editoptions = { value: item[3] }; 
      $self.jqGrid("editRow", idPrefix + item[4]); 
     } 
    }, 
    idPrefix: "dlg", 
    rowNum: 10000 // to have no paging 
}); 

參見the demo：