2011-02-23 79 views
5

我是新來的jqGrid和我需要,我無法找出一個方案幫助。如何使細胞可編輯在動態的jqGrid

我能夠使細胞無法編輯使用下面的代碼:

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

現在,我想使基於某些條件的細胞再次進行編輯。

我應該使用什麼類來實現這一目標?

有,我可以用一個「編輯單元」類?

回答

8

你應該從小區(<td>元素)

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

您應選擇要爲可編輯的所有單元格(<td>元素)刪除「未編輯的細胞」級。

我做the 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); 
}); 

在演示從「客戶端」列具有文本「測試」的單元將被標記爲「不可編輯」。稍後可以使單元格「可編輯」或「不可編輯」單擊相應的按鈕。

+0

Thx爲答覆Oleg。 – Abhi 2011-02-23 19:39:55

+0

我嘗試了下面所有三行代碼,但似乎沒有任何工作。 – Abhi 2011-02-23 19:40:31

+0

jQuery(「tr#」+ rowid,jQuery(「#updAssist」))。removeClass('not-editable-cell'); jQuery(「tr#」+ rowid).removeClass('not-editable-cell'); (「#updAssist」)。jqGrid('setCell',rowid,'precPsProg','',{editable:true}); – Abhi 2011-02-23 19:41:40