실습 jqGrid 버전: CDN 제공하는 v4.6 버전으로 테스트
사용자정의 검색
- 이 메소드는 그리드에 대한 사용자정의 search form을 구성하기 위해 호출할 수 있으며, 그리드의 url옵션을 사용하여 서버에 검색을 한다.
- 검색이 활성화 되면 name:value 형식으로 postData에 배열데이터로 담아 서버에 요청을 보낸다.
- 검색에 입력된 데이터만 서버에 요청을 보내며 search form 에서 데이터를 지우면 값이 postData 배열에서 삭제된다.
- 서버에 요청을 보낼 때 colModel에 index로 셋팅된 값이 있는경우 index를 보내며 없는경우 name을 보내며, 파라메터에 _search=true 를 추가로 셋팅한다.
* 더 이상 공식적으로 지원되지 않으며 grid.addons.js 파일을 수동으로 포함시켜야 동작이 가능하다 - 링크
호출 방법 및 옵션
- 그리드가 위치한 곳의 위/아래에 search form 을 정의한다.
1004lucifer
<div id="mysearch"></div>
그리고 아래와 같이 작업한다.jQuery("#mysearch").filterGrid('#grid_id',options); // Old API jQuery("#mysearch").jqGrid('filterGrid','#grid_id',options); // New API- grid_id: 검색이 적용될 그리드의 ID
- options: 파라미터의 배열 (아래 표 참고)
옵션은 다음과 같다.
| Option | Description | Default |
|---|---|---|
| gridModel | true로 설정 시 colModel의 name, index, edittype, editoptions를 이용하여 검색을 구성할 수 있다. 이 메소드의 필요조건을 충족하기위해 colModel에 파라메터를 추가할 수 있으며 파라메터는 다음과 같다. defval: 검색필드의 기본값으로 초기검색 시 설정된다. surl: edittype:'select' 인 경우에만 사용가능하며, url에서 이미 구성된 select요소 내용을 얻을 수 있다. - 다음과 같은 HTML 콘텐츠에서 기대할 수 있다. <select> <option value='val1'> Value1 </option> <option value='val2'> Value2 </option> … <option value='valn'> ValueN </option> </select> 필드와 검색에만 form에 true가 첨부되며, 감춰진 Element에는 포함되지 않는다. false인경우 검색을 위해 filterModel를 구성해야 한다.(아래참조) | false |
| gridNames | 이 옵션은 gridModel이 true인 경우에만 작동함. true로 설정 시 검색필드의 colNames label을 이름으로 사용한다. | false |
| gridToolbar | 권장하지 않음. 대신 filterToolbar 메소드를 사용해라. | false |
| filterModel | gridModel이 false 인경우 필터모델을 사용해야 한다. filterModel [ … {label:'LableFild', name: 'colname', stype: 'select', defval: 'default_value', surl: 'someurl', sopt:{optins for the select}}, …
label: 필드의 label (텍스트 설명)
name: 컬럼의 이름 - colModel의 name과 같아야 하며, 해당 컬럼의 index를 검색한다.stype: input Element 타입 - text or select defval: 검색 input Element의 기본값 surl: stype:'select' 인 경우에만 사용가능하며, url에서 이미 구성된 select Element를 얻을 수 있다. 아래와 같은 HTML 컨텐츠에서 기대할 수 있다. <select> <option value='val1'> Value1 </option> <option value='val2'> Value2 </option> … <option value='valn'> ValueN </option> </select> sopt: colModel의 editoptions와 같으며, element에 적용 가능한 유효옵션이다. | [] |
| formtype | form을 구성하는 방법을 정의한다. ex) 'horizontal' or 'vertical' | horizontal |
| autosearch | true로 설정 시 사용자가 input Element에 값을 넣고 enter를 입력하면 검색이 되며, selectbox의 값이 변경될 때도 검색이 된다. false로 설정 시 버튼을 사용하여 검색을 할 수 있다. | true |
| formclass | form에 적용할 수 있는 class | “filterform” |
| tableclass | (form Element의 자식요소인) table에 적용가능한 class | “filtertable” |
| buttonclass | 버튼에 적용할 수 있는 class | “filterbutton” |
| searchButton | 검색을 수행하는 버튼의 label(라벨) (이 label은 jqGrid를 사용하지 않고 label을 어디서나 사용할 수 있도록 메소드를 분리하기 때문에 언어파일에서 가져오지 않는다.) | “Search” |
| clearButton | 이미 입력된 값을 지우는 버튼의 label | “Clear” |
| enableSearch | 검색버튼 활성화/비활성화 | false |
| enableClear | clearButton 활성화/비활성화 | false |
| beforeSearch | 검색전에 발생하는 이벤트 | null |
| afterSearch | 검색 후 발생하는 이벤트 | null |
| beforeClear | 입력된 값을 지우기전에 실행되는 이벤트 (clearbutton 누를때 발생) | null |
| afterClear | 입력된 값을 지운 후 발생하는 이벤트 | null |
| url | 검색중인 값을 위한 별도의 URL | '' |
| marksearched | true 설정 시 검색이 적용된 모든 컬럼에 대해서 검색가능 표시가 적용되며, 검색을 지우면 표시가 사라진다. jqGrid v3.5 에는 적용되지 않음 | true |
추가 메소드
1004lucifer
filterGrid를 사용하는 경우 2개의 권한이 있는 메소드를 사용할 수 있다.
triggerSearch - 그리드의 검색을 실행
var sg = jQuery("#mysearch").filterGrid(...)[0]; sg.triggerSearch();
clearSearch - 검색값을 지우고 빈값이나 기본값으로 검색을 실행
sg.clearSearch();
이 메소드는 new API 에서 작동되지 않는다.
참고
- http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_searching
댓글
댓글 쓰기