jqGrid : 동적으로 포맷터가있는 셀의 값을 변경하는 방법

Question

"편집"및 "삭제"버튼이 포함 된 작업 열이있는 jqGrid가 있습니다. 요구 사항은 사용자가 작업 열에서 "삭제"버튼을 클릭하는 경우입니다. 행은 삭제되지 않지만 삭제 된 것으로 표시됩니다. 따라서, 제 구현은 "편집"버튼을 제거하고 "삭제"버튼을 "삭제 취소"버튼으로 대체하는 것입니다. 다음 코드

jQuery('#grid').jqGrid({ 
    datatype: 'local', 
    colNames:[ 
     'action', 
      ... other columns 
    ], 
    colModel:[ 
     { name:'action', formatter:actionLink, align:'center', sortable:false, width:150}, 
     ... other columns 
    ], 
    height: 'auto', 
    width: 935 
}); 

function actionLink(cellvalue, options, rowObject) { 
    var editImg = '<img width="16" height="16" border="0" alt="Edit" src="${contextPath}/images/edit.png">'; 
    var deleteImg = '<img width="16" height="16" border="0" alt="Delete" src="${contextPath}/images/delete.png">'; 
    var editLink = '<a href="javascript:void(0)" onclick="edit(' + options.rowId + ');">' + editImg + '</a>'; 
    var deleteLink = '<a href="javascript:void(0)" onclick="delete(' + options.rowId + ');">' + deleteImg + '</a>'; 
    return editLink + ' ' + deleteLink; 
} 

function delete(rowId) { 
    var selectedObj = jQuery('#rid').jqGrid('getRowData', rowId); 
    var unDeleteImg = '<img width="16" height="16" border="0" src="${contextPath}/images/arrow_undo.png" />'; 
    selectedObj.action = '<a href="javascript:void(0)" onclick="unDelete(' + rowId + ');">' + unDeleteImg + '</a>'; 
    jQuery('#grid').jqGrid('setRowData', rowId, selectedObj); 
} 

액션 열은 여전히 ​​"편집"을 표시 한 수 있습니다보다는 "삭제"버튼은 버튼을 "취소". 나는 무엇을 잘못 했는가? 포매터 함수 actionLink의 문제입니까?

Answer 1

당신은 코드 아래에 같이있는 jqGrid 행에 액세스 할 수 있습니다

for (var i = 0; i < gridData.length; i++) { 
      var row = $("#grdGridView").jqGrid('getRowData', gridData[i]); 
      var item = gridData[i]["chkSelect"]; 
      jQuery("#grdGridView").jqGrid('setCell', i + 1, 2, '', { color: 'black' }); 
      if ($(item).prop("checked") == true) { 
       var o = {}; 

       o.GridViewkey = gridData[i]["GridViewkey"]; 
       o.GridViewDesc = gridData[i]["GridViewDesc"]; 
       o.LocationStatus = gridData[i]["LocationStatus"]; 
       o.EffectiveDate = $(gridData[i]["EffectiveDate"]).prop("value"); 
       o.InactivationDate = $(gridData[i]["InactivationDate"]).prop("value"); 
       if (!validatedt(o.EffectiveDate) && o.EffectiveDate != "" && !validatedt(o.InactivationDate) && o.InactivationDate != "") { 
        msg = msg + "[" + o.GridViewDesc + "]: Date is invalid. <br/>"; 
        jQuery("#grdGridView").jqGrid('setCell', i + 1, 2, '', { color: 'red' }); 
       } 
       else if (!validatedt(o.EffectiveDate) && o.EffectiveDate != "") { 
        msg = msg + "[" + o.GridViewDesc + " Effective Date]: Date is invalid. <br/>"; 
        jQuery("#grdGridView").jqGrid('setCell', i + 1, 2, '', { color: 'red' }); 
       } 
       else if (!validatedt(o.InactivationDate) && o.InactivationDate != "") { 
        msg = msg + "[" + o.GridViewDesc + " Term Date]: Date is invalid. <br/>"; 
        jQuery("#grdGridView").jqGrid('setCell', i + 1, 2, '', { color: 'red' }); 
       } 
       o.rid = i + 1; 

       params[i] = o; 
      } 
     }