jqGrid Double Click Cell Edit

jqGrid라는 jquery 기반 그리드에 대해 이것저것 살펴보고 있는 중 입니다.

예전에 사용하던 그리드에 비해 모든 게 좋습니다만, 한 가지 좋지 않은 점은, getRowData function 이 실제 그리드에 바인딩되지 않은 데이터를 가져오지 못하는 문제가 있군요. 그러한 점에 대해서는 그냥 뭐 컬럼 맵핑을 해 주고 width:0, hidden:true 줘 버리면 데이터를 끌어오는 게 가능해 집니다.

그런데, 좀 복잡한 문제가 있어 이렇게 포스팅을 합니다.

jqGrid는 inline editing 이 가능(컬럼 세팅 시 editable 값을 true 로 주고, cellEdit 속성 또한 true 로 주면 됩니다. 자세한건 직접 찾아 보시면 됩니다.)한데요, 기능 자체는 좋으나, 이게 원클릭으로 에디트 모드로 들어가 버리는 바람에 컬럼 전체 또는 대부분의 컬럼에 에디트가 가능하게 설정할 경우, 좀 정신이 없습니다.

그래서, 더블클릭으로만 에디트 모드로 접근하는 것에 대해 좀 찾아 보았으나 어디에도 마땅히 마음에 드는(필요한) 코드가 없어서 다음과 같은 방식으로 해 보니, 잘 됩니다.

어렵사리 적용한 방법인데 방법은 참 간단합니다.

방법

1. 그리드 초기화 시, cellEdit:true 로 세팅, 각 컬럼의 editable은 세팅하지 않음(false)
2. ondblClickRow 이벤트에서 컬럼명을 얻어 해당 컬럼이 에디팅 가능한 대상이면 해당 컬럼의 editable 속성을 true 로 변경
3. afterEditCell 이벤트에서 에디트 종료된 컬럼의 editable 속성을 false로 변경

예제 코드는, 일부분 입니다. 다른 곳 세팅은 그냥 그대로 하면 됩니다.

코드에 등장하는 editableCells 라는 객체는 그냥 앞서 수정 가능한 컬럼들을 선언해 놓은 배열 입니다.

ex) editableCells = ['col3', 'col5'];

...,
//더블클릭 이벤트... 더블클릭할 경우 에디트 모드로.
ondblClickRow: function (rowid, iRow, iCol) {
    var colModels = $(this).getGridParam('colModel');
    var colName = colModels[iCol].name;

    if (editableCells.indexOf(colName) >= 0) {
        $(this).setColProp(colName, { editable: true });
        $(this).editCell(iRow, iCol, true);
    }
},
//에디트가 종료되면, 셀의 에디트 가능 여부를 false 로 돌린다.
afterEditCell: function (rowid, cellname, value, iRow, iCol) {
    $(this).setColProp(cellname, { editable: false });
},
...