jqGrid setCell (editalbe 속성 변경)

setCell

text나 attribute 중 변경하지 않을 곳에는 "" 넣으면 된다.

 

 $("#GridID").jqGrid('setCell', rowId, 'columnName', "변경할 text 값", "변경할 attr 값");

 

editable

$("#testGrid").jqGrid('setCell', rowId, 'testCol', "", 'editable-cell');
$("#testGrid").jqGrid('setCell', rowId, 'testCol', "", 'not-editable-cell');

위의 코드는 한번만 실행했을 때는 문제 없지만 동적으로 여러번 속성을 변경하려고 할 때 아래 코드 처럼 Class값이 변경되지 않고 덧붙여 쓰여지는 문제가 발생한다.

<td role="gridcell" style="text-aligne:center;" title aria-describedby="testGrid_testCol" class="editable-cell not-editable-cell"

 

setAttribute()

직접 class 속성을 변경

var testCol = e.target.parentElement.parentElement.children[2];//0부터 시작, multiselect 있을 경우 체크하는 칸이 0번

testCol.setAttribute("class", "editable-cell");
testCol.setAttribute("class", "not-editable-cell");

 

사용 예제

그리드 첫번째칼럼의 selectBox 선택값에 따라 두번째 칼럼의 editable 여부를 결정하는 코드.

option0이 선택되면 수정이 가능하고, 그렇지 않으면 수정이 불가능.

selectBox의 값이 변할 때 마다 수정여부가 변경되어야 함으로 setCell을 사용하지 않음.

        
    var testGridColModel =	
      [
        { name: 'selectBoxCol', index: 'selectBoxCol', align: 'center', width: '50%', editable: true, edittype: 'select', 
          editoptions: 
          { value : {0:"option0", 1:"option1"}, //이 형태에 맞춘 변수 넣을 수도 있음
            dataEvents:[{
              type: 'change', //click, change 등 이벤트 설정
              fn: function (e) {
                var rowId = e.target.parentElement.parentElement.rowIndex;
                var selectedText = $("#"+ e.target.id + " option:selected").text(); //선택 된 option

                 if(selectedText == "option0"){
                    testCol.setAttribute("class", "editable-cell");
                 }else{
                    testCol.setAttribute("class", "not-editable-cell");      
                 }

              },

            }]

          }
          
        },
        { name: 'testCol', index: 'testCol', align: 'center', width: '50%' , editable: true, edittype: 'text'},

      ];

    var testGridColName = testGridColModel.map(function(item){ return item.name;});
    var testGridData = {}; //초기 데이터
    
    
    $("#testGrid").jqGrid({
        datatype: "local",
        colName:  testGridColName,
        colModel: testGridColModel,
        data: testGridData,
        width: 1200,
        height: 200,
        multiselect: true,
        cellEdit: true, // 셀 편집, column마다 editable 별도로 설정
        cellsubmit: "clientArray",
        ignoreCase: true,
    });