실습 jqGrid 버전: CDN 제공하는 v4.6 버전으로 테스트
검색 기본 구성
- 그리드의 컬럼은 그리드의 위/아래/컨텐츠를 기반으로 search form 을 사용할 수 있으며 아래와 같은 4가지 방법이 있다.
1. 툴바 검색
2. 사용자정의 검색
3. 단일 필드 검색
4. 고급검색 (많은 필드와 조건을 포함하는 복잡한 방법)
이러한 방법은 jqGrid의 공통 옵션을 사용하므로 이미 생성된 그리드에서만 호출이 가능하다.
(툴바, 사용자정의 검색을 제외한) 모든 검색모듈은 언어파일에서 아래와 같이 정의된 부분을 사용한다.
$.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" }, ...
colModel 옵션
- jqGrid v3.5 부터 모든 검색 메소드에 공통 검색 옵션을 사용한다.
아래는 colModel에서 설정하는 옵션 목록이며, 일부 옵션은 특정 메소드에 적용할 수 없다.
| Option | Type | Description | Default |
|---|---|---|---|
| search | boolean | 필드의 검색가능여부를 지정한다. | true |
| stype | string | 필드의 검색 타입을 지정한다. text: input Element가 생성된다. select: select Element가 생성된다. | text |
| searchoptions | object | 검색 필드의 정의, 이벤트 및 기타 속성을 포함하는 객체 (아래 참조) | |
| searchrules | object | 사용자 유효성 검사에 대한 추가 조건이 포함된 객체 |
searchoptions 는 사용자정의 검색에는 적용되지 않으며, 별도의 옵션을 사용한다.
searchoptions 객체의 속성은 아래와 같다.
1004lucifer
| Property | Type | Description |
|---|---|---|
| dataUrl | string | 이 옵션은 stype:'select' 인 경우에만 유효하며, select Element를 로드할 url을 나타낸다. 이 옵션을 설정하면 해당 Element는 ajax Request의 응답값으로 채워지게 되며, 데이터는 원하는 옵션이 있는 유효한 html select Element 이어야 한다. Ex) Request의 응답값은 <select><option value=“1”>One</option> <option value=“2”>Two</option></select> 이렇게 될 수 있다. 이것은 한번만 호출이 된다. |
| buildSelect | function | 이 옵션은 dataUrl 파라메터가 설정된 경우에만 사용되며, 이경우에 서버에서 select Element를 응답받지 못한경우 이 함수를 사용하여 select를 만들 수 있다. 이 함수는 dataUrl옵션에서 원했던 select와 options 값을 가지는 string을 반환해야 한다. 이 함수에 전달된 파라메터는 서버의 응답값이다. |
| dataInit | function | 이 함수가 설정되면 Element가 생성될 때 한번만 호출이 되며, 함수에는 Element 객체를 전달한다. dataInit: function(elem) { do something } 또한 이 함수를 사용하여 datepicker, timepicker 등등 연결할 수 있다. Ex) dataInit : function (elem) { $(elem).datepicker(); } |
| dataEvents | array | data Element에 적용할 이벤트 리스트이며, $(“#id”).bind(type, [data], fn) 방법과 같이 data Element에 이벤트를 바인딩 한다. 아래와 같이 기술한다. dataEvents: [ { type: 'click', data: { i: 7 }, fn: function(e) { console.log(e.data.i); }}, { type: 'keypress', fn: function(e) { console.log('keypress'); } } ] |
| attr | object | attr은 생성된 Element에 유효한 속성을 설정할 수 있는 객체이며, 아래와 같이 title을 설정할 수 있다. attr : { title: “Some title” } |
| searchhidden | boolean | 기본적으로 그리드에서 hidden Element는 검색할 수 없지만, 그런경우 검색을 가능하게 하려면 이 옵션을 true로 설정하면 가능하다. |
| sopt | array | 이 옵션은 사용자검색을 제외한 모든 필드검색에서 사용되며, Element에 적용되는 작업을 결정한다. 만약 설정하지 않으면 사용가능한 모든 옵션이 사용된다. 툴바검색을 사용하면 첫번째 Element에서 사용되며, 모든 사용가능한 옵션은 아래와 같다. ['eq','ne','lt','le','gt','ge','bw','bn','in','ni','ew','en','cn','nc'] 해당 텍스트는 언어파일에 있으며 의미는 아래와 같다. ['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'] sopt 배열의 요소는 순서와 상관없이 섞어쓸 수 있다. |
| defaultValue | string | 검색 input Element가 비어있지 않다면 기본값을 셋팅해라 (문서설명이 반대가 아닌가 싶기도..) |
| value | mixed | 이 옵션은 stype:select 인 경우와 검색 다이얼로그에 select 옵션이 정의된경우에 사용된다. stype:select가 설정되고 dataUrl옵션이 설정되지 않은경우 이 값은 string 또는 object가 될 수 있다. 옵션이 string으로 설정된경우 반드시 세미콜론(;)으로 끝나고 콜론(:)으로 구분되는 value:label 쌍이 포함되어야 하며, 마지막은 세미콜론(;)으로 끝나면 안된다. ex) editoptions: {value:“1:One;2:Two”} 객체인경우 value:name 형식으로 정의되어야 한다. ex) editoptions: {value:{1:'One',2:'Two'}} |
| clearSearch | boolean | 기본값: true false로 설정 시 검색필드의 끝에있는 (검색어를 지우는)X아이콘이 비활성화 된다. |
select 타입의 검색에서 searchoptions객체의 dataUrl이 사용되지 않거나 정의되지 않으면, select 타입의 검색은 searchoptions의 value속성으로 지정되며 아래의 형식과 같다.
editoptions:{value:"1:one;2:two"}
(다른 검색방법은 아래를 참조)
colModel 규칙
<script> jQuery("#grid_id").jqGrid({ ... colModel: [ ... {name:'price', index:'price', width:60, search:true, stype:'text', searchoptions:{dataInit:datePick, attr:{title:'Select Date'}} }, ... ] ... }); datePick = function(elem) { jQuery(elem).datepicker(); } </script>
검색 규칙
- 이 옵션은 colModel에서 사용되며, 검색가능한 Element에 추가속성을 추가한다.
<script> jQuery("#grid_id").jqGrid({ ... colModel: [ ... {name:'price', ..., searchrules:{required:true....}, search:true }, ... ] ... }); </script>
사용가능한 옵션은 아래와 같다.
1004lucifer
| Option | Type | Description |
|---|---|---|
| required | boolean | true 설정 시 값이 비어있으면 오류 메시지가 표시된다. |
| number | boolean | true 설정 시 숫자가 아닌경우 오류 메시지가 표시된다. |
| integer | boolean | true 설정 시 정수가 아닌경우 오류 메시지가 표시된다. |
| minValue | number(integer) | true 설정 시 값이 이보다 작으면 오류 메시지가 표시된다. |
| maxValue | number(integer) | true 설정 시 값이 이보다 크면 오류 메시지가 표시된다. |
| boolean | true 설정 시 유효한 이메일이 아니면 오류 표시 | |
| url | boolean | true 설정 시 올바를 url이 아닌경우 오류 메시지 표시 |
| date | boolean | true 설정 시 datefmt옵션의 값은 get이며 date형식이 아닌경우 오류 메시지 표시 (설정하지 않으면 ISO날짜가 사용됨) |
| time | boolean | true 설정 시 시간이 아니면 오류 메시지를 표시 현재 hh:mm 포멧을 사용하며 옵션으로 am/pm으로 끝날 수 있다. |
| custom | boolean | true 설정 시 custom_func 함수를 통해 사용자정의 규칙을 선언한다. (아래 참조) |
| custom_func | function | 이 옵션은 custom 옵션이 true인 경우 사용가능. 이 함수에는 colModel의 속성 이름과 체크할 값이 파라메터로 전달된다. 이 함수는 아래의 파라메터를 사용하여 배열을 반환해야 한다. 첫번째 파라메터는 true|false 이며, 검사의 성공여부를 나타내며, 두번째 파라메터는 첫번째 값이 true인경우에만 감지되며 사용자에게 표시될 오류메시지를 나타낸다. ex) [false,“Please enter valid value”] |
사용자정의 검사 예제
<script> function mypricecheck(value, colname) { if (value < 0 || value >20) return [false,"Please enter value between 0 and 20"]; else return [true,""]; } jQuery("#grid_id").jqGrid({ ... colModel: [ ... {name:'price', ..., searchrules:{custom:true, custom_func:mypricecheck....}, search:true }, ... ] ... }); </script>
알아야 할 사항
- 모든 검색모듈은 그리드의 url 파라메터를 사용하여 검색을 수행하며, 일부 method에는 url이 사용할 수 있는 추가 구분옵션이 있다.
- 검색이 수행되면 postData 배열은 검색에 필요한 데이터로 채워진다.
- 검색중 표시를 위해 그리드옵션의 search 파라메터가 true로 셋팅되며, 서버에 보낼 때 사용되는 GET 또는 POST의 배열데이터 이름을 _search를 이용하여 얻을 수 있다. (이름주의)
- Navigator에서 refresh버튼을 사용할 때 그리드에서 trigger가 되면 search 옵션이 false로 셋팅된다.
- 모든 검색 메소드는 postData배열의 검색데이터를 삭제하는 자신만의 메소드가 생성된다.
참고
- http://www.trirand.com/jqgridwiki/doku.php?id=wiki:search_config
댓글
댓글 쓰기