2011-02-23 15 views
5

jqGrid uygulamasında yeniyim ve anlayamadığım bir senaryoda yardıma ihtiyacım var.JqGrid'te dinamik olarak düzenlenebilir hücre nasıl yapılır

Aşağıdaki kodu kullanarak bir hücre düzenlenemez yapmak mümkün:

jQuery("#updAssist").jqGrid('setCell',rowid,'precPsProg','','not-editable-cell'); 

Şimdi bazı koşula göre tekrar hücreyi düzenlenebilir yapmak istiyorum.

Bunu başarmak için hangi sınıfı kullanmalıyım?

Kullanabileceğim bir 'düzenlenebilir hücre' sınıfı var mı? Sen hücre (<td> eleman)

td.removeClass('not-editable-cell'); 

Düzenlenebilir yapmak istediğiniz tüm hücreleri (<td> eleman) seçmelidir gelen 'düzenlenebilir değil hücreli' sınıfı kaldırmalısınız

cevap

8

.

Nasıl yapılacağını gösteren the demo yaptım. demo en önemli kod parçası metni "test" sahip olan ", Müşterinin sütunundan hücreler "düzenlenebilir olmayan" olarak işaretlenir demo

var grid = $("#list"); 
var getColumnIndexByName = function(gr,columnName) { 
    var cm = gr.jqGrid('getGridParam','colModel'); 
    for (var i=0,l=cm.length; i<l; i++) { 
     if (cm[i].name===columnName) { 
      return i; // return the index 
     } 
    } 
    return -1; 
}; 
var changeEditableByContain = function(gr,colName,text,doNonEditable) { 
    var pos=getColumnIndexByName(gr,colName); 
    // nth-child need 1-based index so we use (i+1) below 
    var cells = $("tbody > tr.jqgrow > td:nth-child("+(pos+1)+")",gr[0]); 
    for (var i=0; i<cells.length; i++) { 
     var cell = $(cells[i]); 
     //var cellText = cell.text(); 
     var unformatedText = $.unformat(cell,{rowId:cell[0].id, 
             colModel:gr[0].p.colModel[pos]},pos); 
     if (text === unformatedText) { // one can use cell.text() instead of 
             // unformatedText if needed 
      if (doNonEditable) { 
       cell.addClass('not-editable-cell'); 
      } else { 
       cell.removeClass('not-editable-cell'); 
      } 
     } 
    } 
}; 
grid.jqGrid({ 
    datatype: "local", 
    ... 
    cellEdit: true, 
    cellsubmit: 'clientArray', 
    loadComplete: function() { 
     changeEditableByContain(grid,'name','test',true); 
    } 
}); 
$("#doEditable").click(function(){ 
    changeEditableByContain(grid,'name','test',false); 
}); 
$("#doNonEditable").click(function(){ 
    changeEditableByContain(grid,'name','test',true); 
}); 

olup. Daha sonra biri "düzenlenebilir" veya "düzenlenemez" olan hücreleri ilgili tuşa tıklayarak yapabilir.

+0

Cevap için teşekkürler Oleg. – Abhi

+0

Aşağıdaki üç kod satırını denedim, ancak hiçbiri işe yaramıyor. – Abhi

+0

jQuery ("tr #" + rowid, jQuery ("# ​​updAssist")) removeClass ('düzenlenemez hücre'); \t \t \t \t jQuery ("tr #" + rowid) .removeClass ('düzenlenemez hücre'); \t \t \t jQuery ("# ​​updAssist") jqGrid ('setCell', rowid, 'precPsProg', '', {editable: true}); – Abhi

İlgili konular