JQGrid Search/Filter

JQGrid에는 Search(Filter) 기능이 있다.
데모 : http://www.guriddo.net/demo/guriddojs/

Trirand jqGrid - jQuery based grid HTML5 component for Javascript

www.guriddo.net

ToolBar를 이용 할 수도 Dialog를 이용 할 수도 있다.
근데 단점인지 버그인지는 모르겠으나,
필터상태에서 inline edit을 시도 하면 뭔가 이상하다...

그래서 ToolBar의 기능은 활용하면서 기존 이벤트를 제거하고 새로운 이벤트를 입혀보았다.

일단 ToolBar의 search를 사용하려면, colModel의 search property true로 설정해준다.
만약 텍스트타입이라면 그리드 헤더 바로 아래에 에딧박스가 하나 생긴다.

해당 element 의 id는 "gs_" + colModel의 name이 되겠다.

id를 gs_col01이라 가정하자.

해당 element에는 몇몇 이벤트가 걸려 있는데, 그중 filter 이벤트는 keypress에 걸려 있다.

그래서..keypress를 삭제하도록 하자.
$("#gs_col01").unbind("keypress");

그리고 새로운 이벤트를 추가 하자.

$("#gs_col01").bind('keypress', function(e){
    switch(e.keyCode){
    case 13:
        var fRow = findRow(grid, "col01", $("#gs_col01").val(), grid.jqGrid('getGridParam', 'selrow'));
        grid.jqGrid('setSelection', fRow);
        break;
    }
});

현재 row커서 위치에서부터 값을 검색하는 간단한 함수를 만들었다.

함수 내용은 

function findRow(fGrid, fColid, fData, fStRow){
    var ret = fGrid.jqGrid('getRowData');
    var rowCnt = fGrid.jqGrid('getGridParam', 'reccount');
    var idx = 0;
    if(!(fStRow == undefined || fStRow == null)){
        idx = fStRow*1;
    }
    var data = "";
    for(idx; idx<rowCnt; idx++){
        data = ret[idx][fColid];
        if(data.indexOf(fData) > -1){
            return (idx+1)+"";
        }
    }
}

데이터가 많으면 조금 느릴지 모르나, 사용하기에 크게 문제는 없는듯 하다.

결과적으로 search를 하게 되면 해당 row에 포커스가 간다.

아 그러기 위해서 한가지 처리가 추가적으로 필요하다.
scrollrows : true
해당 row가 선택되면 해당 위치로 스크롤을 하는...

그럼 이만..

[출처] JQGrid Search/Filter|작성자 헙