실습 jqGrid 버전: CDN 제공하는 v4.6 버전으로 테스트
툴바 검색
- 이 메소드는 그리드의 헤더 아래에 input Element를 만들어 검색을 구성하며, 헤더의 크기가 조정되면 input Element도 새로운 너비에 따라 크기가 조정된다.
- 이 메소드는 그리드의 url 옵션을 사용하여 서버에 대해서 검색을 수행하며, 검색이 활성화되면 name:value 유형의 배열이 서버에 보내지게 되고 이 배열은 postData 파라메터에 추가된다. 이 값은 입력된 필드에 대해서만 보내지며, 검색 form 을 지우면 값이 postData 배열에서 삭제가 된다.
- 서버에 데이터를 전달 할 때 name이 아니라 colModel에 설정된 index를 전달하려고 하며, index가 발견되지 않으면 name을 사용하고 보내진 데이터에 _search=true 가 추가된다.
- stringResult 옵션을 true로 설정 시 서버에 보내지는 데이터는 string 이고 보내진 데이터의 구조는 '고급검색'과 동일하다.
호출 방법
1004lucifer
... jQuery("#grid_id").filterToolbar(options); // old API jQuery("#grid_id").jqGrid('filterToolbar', options); // new API ...- grid_id 는 이미 생성된 그리드 ID 이다.
- options는 다른 구성설정을 포함하는 객체이다. (아래 참조)
- 위와 같이 실행하면 다음과 같은 검색 요소가 생성된다.
이 메소드는 colModel 에서 검색하기위한 정의를 사용한다. (링크 참조)
filterToolbar 메소드의 옵션
| Option | type | Description | Default |
|---|---|---|---|
| autosearch | boolean | 검색은 다음 규칙에 따라 수행된다. text Element: 값을 입력하고 검색을 하려할 때 Enter키를 누를 때 수행 select Element: 값 변경이 될 때 수행 | true |
| beforeSearch | function | 검색전에 발생하는 이벤트이며 그리드를 trigger 하기전에 호출된다. 이벤트가 true를 반환하면 trigger가 수행되지 않는다. 이 경우 자체 검색 파라메터를 구성하고 그리드를 trigger 하면 데이터를 검색 할 수 있다. 다른 반환값은 trigger가 수행된다. | null |
| afterSearch | function | 검색 후 발생하는 이벤트 | null |
| beforeClear | function | 입력된 값을 지우기전에 발생하는 이벤트(clearToolbar 활성화됨)이며, search Element에서 데이터를 지우기전에 호출된다. 이벤트가 true를 반환하면 trigger가 발생하지 않으며, 이경우에 자신만의 search파라메터를 구성하고 그리드를 trigger 할 수 있다. 다른 반환값은 trigger가 실행된다. | null |
| afterClear | function | 입력된 값을 지운 후에 발생하는 이벤트 (clearToolbar 활성화됨) | null |
| searchOnEnter | boolean | 검색이 적용되는 방법을 결정하며, true인경우 autosearch옵션을 참고하고 false인경우 사용자가 일부 문자를 입력 시 즉시 검색이 수행된다. | true |
| stringResult | boolean | 검색을 수행할때 데이터를 서버에 보내는 방법을 결정한다. false인경우 key:value 쌍으로 보내지며 true인경우 searchGrid 메소드와 동일하게 서버에 보내진다. 고급검색의 옵션을 참고해라 | false |
| groupOp | string | 이 옵션은 stringResult 옵션이 true이면서 group 조작(operation)을 정했을 경우에만 유효하며, AND 및 OR값을 가질 수 있다. 고급검색의 옵션을 참고해라 | AND |
| defaultSearch | string | 검색 수행 시 기본 검색 연산자(operator)를 지정하며, 유효한 값이 설정 시 모든 필드에서 기본 연산자로 사용이 된다. 사용가능한 옵션은 링크에서 sopt 배열 옵션을 참고해라. | bw |
| searchOperators | boolean | true 설정 시 사용자가 검색할 때 select 조작(operation)을 허용하며, 클릭 조작(operation)시 필드 근처에 생성된다. 이경우 colModel의 searchoptions에 sopt옵션을 사용하여 표시가능한 연산자(operator)를 구성할 수 있다. | false |
| operandTitle | string | 이 옵션은 searchOperators가 true인 경우에만 사용가능하며, 사용자가 조작(operation)버튼에 마우스를 올리면 나타난다. colModel의 searchoptions에 searchtitle 옵션을 덮어쓸 수 있다. 기본값: 'Click to select search operation.' | |
| operands | object | 사용자가 조작(operation)버튼을 클릭했을 때 보여질 단문이며, equal 같은 경우에는 '==' 라고 보여진다. 객체의 기본 셋팅은 아래와 같다. { "eq" :"==", "ne":"!", "lt":"<", "le":"<=", "gt":">", "ge":">=", "bw":"^",
"bn":"!^", "in":"=", "ni":"!=", "ew":"\|", "en":"!@", "cn":"~",
"nc":"!~", "nu":"#", "nn":"!#", "bt":"..."}.
심볼값이 변경된 경우에만 변경사항이 적용되며, searchOperators 옵션을 참고해라 | |
| odata | object | 검색중일 때 특정 조작에 대해서 긴문자열을 정의하며, 기본 객체는 언어파일에 있고 $.jqrid.search.odata에 있다. 기본값은 아래와 같다. [{ oper:'eq', text:'equal'},{ oper:'ne', text:'not equal'},{ oper:'lt', text:'less'},{ oper:'le', text:'less or equal'},{ oper:'gt', text:'greater'},{ oper:'ge', text:'greater or equal'},{ oper:'bw', text:'begins with'},{ oper:'bn', text:'does not begin with'},{ oper:'in', text:'is in'},{ oper:'ni', text:'is not in'},{ oper:'ew', text:'ends with'},{ oper:'en', text:'does not end with'},{ oper:'cn', text:'contains'},{ oper:'nc', text:'does not contain'}] |
|
searchoptions의 sopt 옵션은 colModel의 특정 필드에 대해서 다른 연산자(operator)를 설정하는데 사용될 수 있다.
검색 toolbar와 filterToolbar를 만들 때 아래의 추가 메소드를 이용할 수 있다.
1004lucifer
| Method | Description |
|---|---|
| triggerToolbar | 이 메소드를 호출하면 검색이 수행되고, 그리드의 search 파라메터가 true로 변경되며 서버에 ajax호출이 실행된다. |
| clearToolbar | request보낸 search 값이 지워지고 search옵션이 false로 변경되었을 때 가능한 기본값으로 설정한다. |
| toggleToolbar | search Element와 toolbar를 토글한다. |
위의 3가지 메소드는 new API로 작동이 되지 않는다.
- 사용방법
... var sgrid = $("#grid_id")[0]; sgrid.triggerToolbar();
참고
- http://www.trirand.com/jqgridwiki/doku.php?id=wiki:toolbar_searching
댓글
댓글 쓰기