Translate

[jqGrid] Navigator 설명

날짜:






실습 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
PropertyTypeDescriptionDefault
addboolean네비게이터에서 add action을 활성화/비활성화 한다.
버튼을 클릭 시 editGridRow와 새로운 메소드의 파라메터가 실행된다.		true
addiconstringadd action이 활성화 상태일 때 보여줄 아이콘을 설정한다.
현재 UI의 테마 이미지만 추가할 수 있다.		ui-icon-plus
addtextstringadd button에 설정할 수 있는 텍스트empty
addtitlestringadd button 에 마우스를 오버하면 나타나는 타이틀 (활성화 상태일 때)Add new row
alertcapstring행을 선택하지 않고 edit, delete, view 하려할 때 나타나는 메시지의 헤더Warning
alerttextstring행을 선택하지 않고 edit, delete, view 하려할 때 나타나는 메시지 테스트Please, select row
cloneToTopbooleantrue로 설정한경우 하단의 Pager를 상단Pager로 모든 action을 복사한다.
navGrid는 상단Pager에만 적용되는것에 유의해야 한다. 상단Pager의 id는 '_toppager'와 조합된다.		false
closeOnEscapebooleantrue로 설정 시 사용자가 ESC키를 누르면 경고 dialog가 닫히게된다.true
delbooleanNavigator에서 delete action을 활성/비활성 한다.
버튼을 클릭 시 delGridrow 메소드가 수행된다.		true
deliconstringdelete action이 활성화된경우 보여질 아이콘을 설정한다. 현재 UI테마 이미지만 사용이 가능하다.ui-icon-trash
deltextstringdelete button에 보여질 텍스트를 설정한다.empty
deltitlestringdelete button이 활성화 되어있는 경우 마우스를 올렸을때 보여질 타이틀을 설정한다.Delete selected row
editbooleanNavigator에서 edit action을 활성/비활성화 한다.
버튼을 클릭 시 editGridRow 메소드가 수행되며 현재 선택된 row가 파라메터로 전달된다.		true
editiconstringedit action이 활성화 될때 보여질 아이콘을 설정한다. 현재 UI테마 이미지만 사용이 가능하다.ui-icon-pencil
edittextstringedit button의 텍스트를 설정한다.empty
edittitlestringedit button이 활성화 상태일 때 마우스를 올려ㅣ면 보여질 타이틀을 설정한다.Edit selected row
positionstringPager내에서 Navigator 버튼들이 보여질 위치를 지정한다.
ex) left, center, right		left
refreshbooleanPager내의 refresh button의 활성/비활성 여부.
버튼을 클릭 시 trigger('reloadGrid') 가 수행되며 검색 파라메터는 없어진다.		true
refreshiconstringrefresh action이 활성화 상태일 때 보여질 아이콘을 설정한다. 현재 UI테마 이미지만 설정이 가능하다.ui-icon-refresh
refreshtextstringrefresh button의 텍스트를 설정한다.empty
refreshtitlestringrefresh button이 활성화 상태일 때 마우스를 올리면 보여질 타이틀을 설정한다.Reload Grid
refreshstatestring그리드가 다시 로드하는 방법을 결정한다.
firstpage - 첫번째 페이지에서 데이터를 다시 로드한다.
current - 다시 로드하면 현재 페이지와 현재 선택항목을 저장해야 한다.		firstpage
afterRefreshfunctionrefresh button 클릭 이후에 수행될 이벤트를 설정한다.null
beforeRefreshfunctionrefresh button 클릭 직전에 수행될 이벤트를 설정한다.null
searchbooleansearch button의 활성/비활성화 여부.
버튼을 클릭 시 searchGrid메소드가 수행된다.		true
searchiconstringsearch action이 활성화 상태일 때 보여질 아이콘을 설정한다. 현재 UI테마 이미지만 사용이 가능함.ui-icon-search
searchtextstringsearch button의 텍스트를 설정한다.empty
searchtitlestringserach button이 활성화 상태일 때 마우스 올리면 보여질 타이틀을 설정한다.Find records
viewbooleanPager내의 view button의 활성/비활성화 여부.
버튼을 클릭 시 viewGridRow메소드가 수행된다.		false
viewiconstringserach action이 활성화 상태일 때 보여질 아이콘을 설정한다. 현재 UI테마 이미지만 사용이 가능하다.ui-icon-document
viewtextstringview button의 텍스트를 설정한다.empty
viewtitlestringview button이 활성화 상태일 때 마우스 올리면 보여질 타이틀을 설정한다.View selected row
addfuncfunction정의된 경우 add function을 대체한다.
파라메터가 전달되지 않는다.		null
editfuncfunction정의된 경우 edit function을 대체한다.
편집row의 id가 파라메터로 전달된다.		null
delfuncfunction정의된경우 del function을 대체한다.
편집row의 id가 파라메터로 전달된다.		null



참고
 - http://www.trirand.com/jqgridwiki/doku.php?id=wiki:navigator



댓글

댓글 쓰기