jqgrid 네비게이션에 버튼 추가와 엑셀 변환하기

jqgrid의 네이게이션의 기본 버튼은 add(추가), edit(수정), del(삭제), search(검색) 이렇게 4가지정도가 있습니다.

여기서 예를 들어 excel출력 버튼이나 pdf출력과 같은 사용의임의로 버튼을 만들어 사용 할 때가 있습니다. 

저는 이번엔 엑셀로 출력하는 기능을 예제로 사용해보겠습니다. 

엑셀 출력은 따로 github에서 받은 소스로 진행하였습니다. 추후 설명해드리겠습니다.

예시로 간단하게 버튼 추가하는 방법만 일단 알아보겠습니다.

$("#dept_table").jqGrid('navButtonAdd','#dept_table_nav',{caption:"Excel 출력", title : " Excel 출력", onClickButton : function(e){
        alert("새로 만든 버튼을 클릭했습니다.");
        }, buttonicon : 'ui-icon-print'
});

navButtonAdd : 네이게이션에 버튼을 추가하겠다.

#dept_table_nav : 네비게이션 div의 id 값

caption : 버튼의 이름

title : 버튼 tooltip 정도로 알아두자

onClickButton : 이 버튼을 클릭했을 시 행동

buttonicon : 버튼의 아이콘

자 이제 onClickButton 안에 우리들이 버튼을 눌렸을 때 행동을 적어주시면 됩니다.

이번엔 jqgrid를 엑셀로 변환하여 다운로드 할 수 있는 기능을 만들어보겠습니다.

$("#dept_table").jqGrid('navButtonAdd','#dept_table_nav',{caption:"출력",title : "출력", onClickButton : function(e){
        $("#gview_dept_table").table2excel({
            exclude : ".noExl",
            name : "부서 리스트",
            filename : "부서 리스트",
            fileext : ".xls",
            exclude_img : true,
            exclude_links : true,
            exclude_inputs : true
        });
    }});

간단하죠 ?!

github에서 아주 좋은 소스를 구하게되어 저렇게 간단하게 몇줄만 써주니 jqGrid 안에 있는 테이블들을 엑셀로 변환시켜 출력시켜주더라구요

github 주소는 

https://github.com/rainabba/jquery-table2excel

여기입니다 여기서 다운받아 스크립트 추가해주시고 쓰시면 됩니다 ^^

다운받으시고 dist 폴더안에 있는 js파일을 본인 프로젝트에 넣으시고 스크립트 추가해주시면 됩니다 ~