실습 jqGrid 버전: CDN 제공하는 v4.6 버전으로 테스트
Navigator의 정의와 사용방법을 알아본다.
jqGrid의 Navigator
1004lucifer
정의: 찾기, 편집과 같은 레코드의 작업을 손쉽게 해주는 사용자 인터페이스 기능
* 개발자는 커스텀 액션을 만들거나 6가지 미리 정의된 액션 중 하나를 사용할 수 있다. jqGrid는 미리 정의된 액션에 아이콘버튼을 제공한다.
* 사전정의된 작업은 다음과 같다.
1) Add New Row
2) Edit Selected Row
3) View Selected Row
4) Delete Selected Row
5) Find Records
6) Reload Grid
* Navigation layer는 반드시 하단에 위치해야 하는것은 아니며, grid window 안쪽에 위치할 수 있다. (Navigation layer는 선택사항이며 제거할 수 있다.)
* 커스텀버튼과 함께 커스텀액션을 Navigation layer에 추가가 가능하다.
* 사용자가 버튼에 hover 하게되면 나타나는 텍스트도 변경이 가능하다.
(해당 텍스트는 언어셋파일에 있다.)
* Navigator 버튼은 왼쪽, 가운데 오른쪽 위치를 지정할 수 있다.
사용방법 및 정의
1004lucifer
* Navigator는 jqGrid 메소드이며, 메인 grid 함수를 확장하여 구성하고 활성화 된다.
* 내장 Navigator를 Pager Element에 적용해야 한다. 즉 Pager Element를 정의해야 하며, 내장 Navigator 액션은 Form Editing Action 에 해당된다.
* 우선적으로 Navigator를 사용하기 위해서는 아래의 모듈이 있어야 한다.
1) Form Edit 모듈
2) Common 모듈
3) Search 모듈 (옵션)
4) Modal 모듈 (옵션)
<html> <body> ... <table id="grid_id"></table> <div id="gridpager"></div> ... <script> ... jQuery("#grid_id").jqGrid({ ... pager : '#gridpager', ... // Chained Mode }).navGrid('#gridpager',{parameters}, prmEdit, prmAdd, prmDel, prmSearch, prmView); // Old API jQuery("#grid_id").navGrid('#gridpager',{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView); // New API jQuery("#grid_id").jqGrid('navGrid','#gridpager',{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView); ... </script> </body> </html>
* prmEidt, prmAdd, prmDel, prmSearch, prmView 는 파라메터와 Form Editing의 특정액션의 이벤트를 가지고 있는 Object 이다.
* prmEidt, prmAdd, prmDel, prmSearch, prmView로 정의된 모듈에 대해 Navigator의 버튼 id를 식별하기 위해 id를 매개변수로 전달할 수 있다. id를 지정하지 않으면 기본적인 정책에 의해 아래와 같이 버튼의 id가 설정된다.
1) add button - 'add_' + 그리드id
2) edit button - 'edit _' + 그리드id
3) delete button - 'del_' + 그리드id
4) view button - 'view_' + 그리드id
5) search button - 'search_' + 그리드id
6) refresh button - 'refresh_' + 그리드id
* UI상태를 비활성화하는 class가 추가되는 경우 버튼뿐만 아니라 클릭액션도 비활성화가 된다.
파라메터
1004lucifer
* Navigator를 사용할 때 언어셋 파일에 아래와 같은 옵션이 포함되어 있으며, 텍스트를 변경하려면 제목 문자열의 텍스트를 변경하면 된다.
* $.jgrid.edit, $.jgrid.add, $.jgrid.del, $.jgrid.search 항목은 해당 모듈이 포함되면 활성화된다.
$.jgrid = { ... search : { caption: "Search...", Find: "Find", Reset: "Reset", odata : ['equal', 'not equal', 'less', 'less or equal','greater','greater or equal', 'begins with','does not begin with','is in','is not in','ends with','does not end with','contains','does not contain'], groupOps: [ { op: "AND", text: "all" }, { op: "OR", text: "any" } ], matchText: " match", rulesText: " rules" }, edit : { addCaption: "Add Record", editCaption: "Edit Record", bSubmit: "Submit", bCancel: "Cancel", bClose: "Close", saveData: "Data has been changed! Save changes?", bYes : "Yes", bNo : "No", bExit : "Cancel", }, view : { caption: "View Record", bClose: "Close" }, del : { caption: "Delete", msg: "Delete selected record(s)?", bSubmit: "Delete", bCancel: "Cancel" }, nav : { edittext: "", edittitle: "Edit selected row", addtext:"", addtitle: "Add new row", deltext: "", deltitle: "Delete selected row", searchtext: "", searchtitle: "Find records", refreshtext: "", refreshtitle: "Reload Grid", alertcap: "Warning", alerttext: "Please, select row", viewtext: "", viewtitle: "View selected row" }, ...
1004lucifer
Property | Type | Description | Default |
---|---|---|---|
add | boolean | 네비게이터에서 add action을 활성화/비활성화 한다. 버튼을 클릭 시 editGridRow와 새로운 메소드의 파라메터가 실행된다. | true |
addicon | string | add action이 활성화 상태일 때 보여줄 아이콘을 설정한다. 현재 UI의 테마 이미지만 추가할 수 있다. | ui-icon-plus |
addtext | string | add button에 설정할 수 있는 텍스트 | empty |
addtitle | string | add button 에 마우스를 오버하면 나타나는 타이틀 (활성화 상태일 때) | Add new row |
alertcap | string | 행을 선택하지 않고 edit, delete, view 하려할 때 나타나는 메시지의 헤더 | Warning |
alerttext | string | 행을 선택하지 않고 edit, delete, view 하려할 때 나타나는 메시지 테스트 | Please, select row |
cloneToTop | boolean | true로 설정한경우 하단의 Pager를 상단Pager로 모든 action을 복사한다. navGrid는 상단Pager에만 적용되는것에 유의해야 한다. 상단Pager의 id는 '_toppager'와 조합된다. | false |
closeOnEscape | boolean | true로 설정 시 사용자가 ESC키를 누르면 경고 dialog가 닫히게된다. | true |
del | boolean | Navigator에서 delete action을 활성/비활성 한다. 버튼을 클릭 시 delGridrow 메소드가 수행된다. | true |
delicon | string | delete action이 활성화된경우 보여질 아이콘을 설정한다. 현재 UI테마 이미지만 사용이 가능하다. | ui-icon-trash |
deltext | string | delete button에 보여질 텍스트를 설정한다. | empty |
deltitle | string | delete button이 활성화 되어있는 경우 마우스를 올렸을때 보여질 타이틀을 설정한다. | Delete selected row |
edit | boolean | Navigator에서 edit action을 활성/비활성화 한다. 버튼을 클릭 시 editGridRow 메소드가 수행되며 현재 선택된 row가 파라메터로 전달된다. | true |
editicon | string | edit action이 활성화 될때 보여질 아이콘을 설정한다. 현재 UI테마 이미지만 사용이 가능하다. | ui-icon-pencil |
edittext | string | edit button의 텍스트를 설정한다. | empty |
edittitle | string | edit button이 활성화 상태일 때 마우스를 올려ㅣ면 보여질 타이틀을 설정한다. | Edit selected row |
position | string | Pager내에서 Navigator 버튼들이 보여질 위치를 지정한다. ex) left, center, right | left |
refresh | boolean | Pager내의 refresh button의 활성/비활성 여부. 버튼을 클릭 시 trigger('reloadGrid') 가 수행되며 검색 파라메터는 없어진다. | true |
refreshicon | string | refresh action이 활성화 상태일 때 보여질 아이콘을 설정한다. 현재 UI테마 이미지만 설정이 가능하다. | ui-icon-refresh |
refreshtext | string | refresh button의 텍스트를 설정한다. | empty |
refreshtitle | string | refresh button이 활성화 상태일 때 마우스를 올리면 보여질 타이틀을 설정한다. | Reload Grid |
refreshstate | string | 그리드가 다시 로드하는 방법을 결정한다. firstpage - 첫번째 페이지에서 데이터를 다시 로드한다. current - 다시 로드하면 현재 페이지와 현재 선택항목을 저장해야 한다. | firstpage |
afterRefresh | function | refresh button 클릭 이후에 수행될 이벤트를 설정한다. | null |
beforeRefresh | function | refresh button 클릭 직전에 수행될 이벤트를 설정한다. | null |
search | boolean | search button의 활성/비활성화 여부. 버튼을 클릭 시 searchGrid메소드가 수행된다. | true |
searchicon | string | search action이 활성화 상태일 때 보여질 아이콘을 설정한다. 현재 UI테마 이미지만 사용이 가능함. | ui-icon-search |
searchtext | string | search button의 텍스트를 설정한다. | empty |
searchtitle | string | serach button이 활성화 상태일 때 마우스 올리면 보여질 타이틀을 설정한다. | Find records |
view | boolean | Pager내의 view button의 활성/비활성화 여부. 버튼을 클릭 시 viewGridRow메소드가 수행된다. | false |
viewicon | string | serach action이 활성화 상태일 때 보여질 아이콘을 설정한다. 현재 UI테마 이미지만 사용이 가능하다. | ui-icon-document |
viewtext | string | view button의 텍스트를 설정한다. | empty |
viewtitle | string | view button이 활성화 상태일 때 마우스 올리면 보여질 타이틀을 설정한다. | View selected row |
addfunc | function | 정의된 경우 add function을 대체한다. 파라메터가 전달되지 않는다. | null |
editfunc | function | 정의된 경우 edit function을 대체한다. 편집row의 id가 파라메터로 전달된다. | null |
delfunc | function | 정의된경우 del function을 대체한다. 편집row의 id가 파라메터로 전달된다. | null |
참고
- http://www.trirand.com/jqgridwiki/doku.php?id=wiki:navigator
댓글
댓글 쓰기