그리드 하단에 페이지 사이즈 선택기능을 추가하려고 했더니 원치 않는 스크롤 이벤트가 적용됩니다.

[jeongjaehong]

그리드 하단에 페이지당 표시갯수를 미리 정의해 두고 선택할 수 있도록 하려고 아래와 같이 작업하였습니다. 그런데 기본값 50을 설정해서 조회되도록 하거나 조회 후에 100 으로 변경하는것은 잘 되는데 조회 후에 그리드 위에서 스크롤을 하면 select box컨트롤에 포커스가 있는것도 아닌데 맨 위쪽의 30으로 선택이 변경됩니다.

아마도 그리드 컨트롤의 스크롤 이벤트가 같은 그룹의 그리드 레이아웃에 스크롤 이벤트를 적용하면서 같이 적용이 되는듯 합니다.

이미 구현된 페이지사이즈 기능이 있는데 삽질을 한건 아닌지 모르겠네요.. ㅡㅡ;

아니면 페이지 사이즈를 선택하는 select box를 그리드 밖으로 옮겨야 하나요?

[thomasJang]

page_status 영역이 다시 랜더링 되면서 생기는 문제로 보입니다. 데이터가 변경 될때마다 page_status 함수를 다시 실행 하게 되거든요. page_status 함수에는 div 만들어두고 jquery로 select를 만들어 본다던지 또는 현재 페이지 사이즈 변수를 상위 스코에 두어 다시 그려질때 현재 선택된 페이지 사이즈를 유지하도록 해보시면 되겠습니다.

[jeongjaehong]

감사합니다.

ax5.ui.grid.tmpl.page_status = function(){
    var tmpl  = '<span style="padding-right:20px;">';
        tmpl += '{{{progress}}} {{fromRowIndex}} ~ {{toRowIndex}} of {{dataRowCount}} {{#totalElements}} &nbsp;&nbsp; / &nbsp;&nbsp; 전체 {{.}}{{/totalElements}} 건 ';
        tmpl += '</span>';
        tmpl += '<div style="display:inline-block;">페이지 당 ';
        tmpl += '<select id="page_size" onchange="on_search(0);" style="text-align:center;width:60px;font-size:8pt;">';

        ([30, 50, 100, 200, 300]).forEach(function(opt){
            tmpl += '<option value="'+opt+'" '+( page_size == opt ? 'selected' : '' )+' >'+opt+'</option>';
        });

        tmpl += '</select>건씩</div>';
    return tmpl;
};

page_size 변수에 값을 넣어두고 이렇게 해서 해결은 했는데...setConfig할때 size옵션을 배열로 지정해서 사용할 수 있으면 더 좋을것 같습니다.