실습 jqGrid 버전: CDN 제공하는 v4.6 버전으로 테스트
단일 필드 검색
- 단일필드 검색은 한번에 한필드에서 (서버로)데이터를 검색하는 방법이며, 이 방법을 사용할 때 사용자가 필드와 조건을 선택하여 검색을 적용할 수 있는 모달 형식을 구성한다.
- 이 방법은 url을 사용하여 검색데이터를 보내고 사용자정의 및 툴바 검색방법과 다르며, 차이점은 검색된 데이터가 name:value 쌍이 아니다.
- 이 방법을 사용하려면 Common, Form Edit, Filter Plugin 등의 모듈이 로드되어야 한다.
호출 방법
old API
<script> ... jQuery("#grid_id").searchGrid( options ); ... </script>1004lucifer
new API
<script> ... jQuery("#grid_id").jqGrid('searchGrid', options ); ... </script>
- 일반적으로 메소드를 실행하면 모달 대화상자가 시작되며, 모달 대화상자를 닫기전까지 그리드에 엑세스 할 수 없다.
- 이 메소드는 검색이 사용가능한경우 navigator(링크) 의 기본 검색메소드이며, navigator의 검색 파라메터는 아래의 방법과 동일하게 설정할 수 있다.
<script> ... jQuery("#grid_id").jqGrid({ ... pager : '#gridpager', ... }).navGrid('#gridpager',{view:true, del:false}, {}, // default settings for edit {}, // default settings for add {}, // delete instead that del:false we need this {search_options}, // search options {} /* view parameters*/ ); ... </script>- 기본적으로 대화상자는 그리드의 왼쪽 상단에 나타난다.
- 검색 대화상자의 새옵션 overlay(기본값10)이 추가되며, 이 값을 0으로 하면 overlay가 비활성화 되며 그리드와 상호작용이 가능하다.
옵션
- 이 메소드는 언어파일의 아래 옵션을 사용하며, 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'] }, ...
1004lucifer
| Option | Type | Description | Default |
|---|---|---|---|
| afterShowSearch | function | 정의된경우 이 이벤트는 검색 대화상자가 표시된 후 매번 발생한다. | null |
| beforeShowSearch | function | 정의된경우 이 이벤트는 검색대화상자가 표시되기전에 매번 발생한다. | null |
| closeAfterSearch | boolean | true 설정 시 사용자가 검색대화상자를 닫은 후 검색이 적용된다.(Find Button 클릭) | false |
| closeAfterReset | boolean | true 설정 시 사용자가 검색대화상자를 닫은 후 검색이 초기화 된다. (Reset button 클릭) | false |
| drag | boolean | 모달을 드래그 가능여부 지정 | true |
| jqModal | boolean | true 설정 시 jqModel plugin(있는경우) 을 사용하여 대화상자를 생성하며, true로 설정되고 plugin이 없는경우 내부함수를 사용하여 대화상자를 생성한다. | true |
| resize | boolean | 모달의 크리조정 활성화/비활성화 여부 | true |
| modal | boolean | true 설정 시 검색대화상자가 모달이 된다. | false |
| width | integer | 검색대화상자의 width값을 정의 | 450 |
| height | mixed | 검색대화상자의 height값을 정의 | auto |
| top | integer | 모달 대화상자의 최초 상단 위치. 기본값은 0이며 그리드의 왼쪽 가장위에 위치한다. jqModql이 true이고 jqModal 플러그인이 있는경우 값이 0이면 윈도우의 왼쪽 가장위를 의미한다. | 0 |
| left | integer | 모달 대화상자의 최초 왼쪽 위치. 기본값은 0이며 그리드의 왼쪽 가장위에 위치한다. jqModql이 true이고 jqModal 플러그인이 있는경우 값이 0이면 윈도우의 왼쪽 가장위를 의미한다. | 0 |
| caption | string | 모달의 caption | see lang file |
| showQuery | boolean | true로 설정 시 사용자가 검색의 조건을 정의할 때 생성되는 query를 보여주며, 고급검색에서 사용가능하다. 검색버튼 근처의 이버튼을 다시 사용할 시 쿼리가 보여지거나 감춰지거나 동적으로 변한다. | false |
| searchOnEnter | boolean | Enter 키를 눌러서 검색할지의 여부를 결정한다. | false |
| Find | string | find 버튼의 text | see lang file |
| multipleSearch | boolean | true로 설정 시 고급검색이 활성화 된다. | false |
| multipleGroup | boolean | true로 설정 시 복잡한 조건을 정의할 수 있는 고급검색이 활성화 된다. | false |
| odata | array | sopt 옵션과 부합하는 교체디는 문자열 | see lang file |
| onClose | function | 정의된경우 대화상자가 닫힐 때 이벤트가 발생한다. true 또는 false를 반환할 수 있으며, false를 반환하면 대화상자가 닫히지 않는다. | null |
| afterRedraw | function | 정의된경우 filter가 모습이 바뀔때(redraw) 마다 수행된다. 룰이나 필드를 추가/삭제할때마다 filter는 redraw되며, 검색 파라메터가 파라메터로 전달된다. | null |
| onSearch | function | 정의된경우 검색버튼을 클릭하면 이 이벤트가 실행된다. | null |
| onReset | function | 정의된경우 reset버튼이 활성화되면 수행된다. | null |
| closeOnEscape | boolean | true설정 시 ESC키를 누르면 검색대화상자가 닫힌다. | false |
| onInitializeSearch | function | 이 이벤트는 모달을 만들때 한번만 수행된다. | null |
| recreateForm | boolean | true로 설정 시 colModel의 새 옵션으로 검색대화상자가 활성화될 때마다 form 이 다시 생성된다. | false |
| showOnLoad | boolean | 이 옵션은 navigator옵션에서만 사용가능하며, true 설정 시 그리드가 초기에 구성될 때 대화상자가 자동으로 나타난다. | false |
| errorcheck | boolean | searchrules가 정의된경우 error체크를 한다. 입력에 오류가 있으면 필터는 서버에 전송하지 ㅇ낳고 오류메시지를 보여준다. | true |
| Reset | string | clear (reset) Button 의 텍스트 | see lang file |
| sField | string | sopt 설명 참조 | searchField |
| sFilter | string | 고급검색이 가능하며 고급검색 항목 참조 | filters |
| sOper | string | sopt 설명 참조 | searchOper |
| sopt | array | 이 옵션은 일반적인 검색규칙을 설정하며, 설정하지 않으면 모든 사용가능한 옵션이 사용된다. 옵션은 다음과 같다. ['eq','ne','lt','le','gt','ge','bw','bn','in','ni','ew','en','cn','nc','nu','nn'] 해당 텍스트는 언어파일에 있으며 다음을 의미한다. ['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','is null','is not null'] sopt배열의 요소는 순서에 상관이 없다. | |
| sValue | string | sopt 설명 참조 | searchString |
| overlay | integer | 이 옵션을 0으로 설정 시 그리드의 오버레이가 비활성화 되며 검색 대화상자가 활성화시에도 그리드와 상호작용이 가능하다. | 10 |
| layer | string | 정의된경우 DOM의 유효한 id 이어야하며, 이 옵션이 설정되면 요소의 자식으로 filter가 삽입된다. | null |
| tmplNames | array | ['Template1', 'Template2',…] 와 같이 간단한 사용자 입력에 사용되는 템플릿 이름을 정의한다. 템플릿 정의 관련 그리드 데모 참고 | null |
| tmplFilters | array of objects | 정의된 경우 tmplNames와 값이 일치해야 한다. 템플릿 정의 관련 그리드 데모 참고 | null |
| tmplLabel | string | 템플릿이 정의된경우 Reset과 Find 버튼 사이에 Select Element가 보여진다. 해당 select에 보여질 텍스트 | Template: |
| zIndex | integer | 대화상자의 z-index 값. 다른 요소 아래에 대화상자가 보여지길 원하는경우 기본값인 950보다는 높아야 하며, 대부분의 경우 jQuery UI 대화상자의 기본값인 1000 보다 높아야 한다. | 950 |
위에서 언급한것처럼 서버로 검색 데이터 전달은 사용자정의, 툴바 검색과 다르다.
찾기 버튼을 클릭하면 그리드는 (_search=true와 함께) name=value 쌍의 3개 파라메터가 추가된다.
- sField (searchField): colModel의 index 값
- sValue (searchString): 입력된 값
- sOper (searchOper): 검색유형 (sopt array참고)
예를들어 필드색인이 invid이고 조건이 같고 검색값이 123이면 서버에 전송되는 문자열은 다음과 같다.
http://localhost/demo35/server.php?...&searchField=invid&searchString=123&searchOper=eq
colModel 옵션
- jqGrid v3.5 부터 모든 검색 메소드에 사용할 수 있는 공통 검색옵션을 사용하며, 아래는 colModel에서 설정해야 하는 옵션인다.
(일부 옵션은 특정 메소드에 적용할 수 없다.)
1004lucifer
| Option | Type | Description | Default |
|---|---|---|---|
| search | boolean | 필드를 검색할지 여부 | true |
| stype | string | 필드의 검색유형을 결정 text: text타입의 input element 생성 select: select element 생성 | text |
| searchoptions | object | 검색필드에 대한 이벤트나 그외 속성이 정의된 내용이 담긴 Object (아래참조) | |
| searchrules | object | 사용자 입력 유효성검사에 대한 추가조건이 포함된 Object |
searchoptions 옵션은 사용자정의 검색 메소드에서는 적용되지 않으며, 이경우에는 별도의 옵션을 사용한다.
searchoptions 객체의 속성은 아래와 같다.
| Property | Type | Description |
|---|---|---|
| dataUrl | string | 이 옵션은 stype:'select' 로써 select Element 인 경우에만 사용이 가능하며, select Element 를 로드할 url을 나타낸다. 이 옵션을 설정하면 Element는 ajax request로 받아온 값으로 채워지며 데이터는 원하는 옵션이 있어야 하며 한번만 호출이 된다. 응답내용의 예는 아래와 같다. <select><option value=“1”>One</option> <option value=“2”>Two</option></select>. |
| buildSelect | function | 이 옵션은 dataUrl 파라메터가 설정된 경우에만 사용할 수 있으며, 서버의 응답으로 select Element 를 만들 수 없는경우 이 함수를 이용해 select를 생성한다. 이 함수는 dataUrl 옵션과 같이 select, options 값이 포함된 문자열을 반환해야 하며, 서버의 응답값이 함수 파라메터로 넘겨진다. |
| dataInit | function | 이 함수가 설정된경우 Element가 생성될 때 한번 호출이 된다. 이 함수에는 element object 가 전달된다. dataInit: function(elem) { do something } 이 함수에서 datepicker를 붙이려면 아래와 같이 할 수 있다. 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 | 생성된 Element에 설정가능한 속성 Object title을 설정하려면 아래와 같다. attr : { title: “Some title” } |
| searchhidden | boolean | 기본적으로 그리드에서 숨겨진 Element는 검색할 수 없다. 필드가 숨겨진경우 검색을 가능하게 하려면 true로 설정해라. |
| sopt | array | 이 옵션은 사용자정의검색을 제외한 모든 검색에서 사용가능하며, 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'] 배열 요소의 순서는 상관없다. |
| defaultValue | string | 검색 입력요소의 기본값으로 사용할 문자열 |
| value | mixed | 이 옵션은 stype:'select' 인 경우에만 사용가능하며 검색대화상자의 select option 을 정의한다. stype:'select'가 설정되고 dataUrl 옵션이 설정되지 않은경우 값은 string 또는 object 이다. 값이 string인경우 value:label 쌍으로 설정되어야 하며 label의 값은 콜론(:)으로 분리되며 세미콜론(;)으로 끝나야 한다. editoptions:{value:“1:One;2:Two”} <= 이렇게 세미콜론(;) 없이 끝나면 안된다. 값이 object인경우 value:name 쌍으로 정의되어야 한다. ex) editoptions:{value:{1:'One',2:'Two'}} |
| clearSearch | boolean | 기본값: true false로 설정 시 검색데이터를 지우는 X아이콘을 비활성화 한다. |
참고
- searchoptions의 dataUrl옵션이 select 타입 검색에서 사용되지 않으면, select에 대한 정의는 searchoptions의 속성값에서 처음으로 가져오며, 정의되지 않은경우 editoptions의 속성값을 사용한다.
ex) 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에서 사용해야하며 대부분 사용자 입력값을 서버에 전송하기전에 검사하는데 사용된다.
<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 설정 시 값이 integer가 아닌경우 에러메시지 표시 |
| minValue | number(integer) | 설정한경우 값이 설정값보다 작은경우 에러메시지 표시 |
| maxValue | number(integer) | 설정한경우 값이 설정값보다 크면 에러메시지 표시 |
| boolean | true 설정 시 값이 이메일 형식이 아니면 에러메시지 표시 | |
| url | boolean | true 설정 시 값이 url 형식이 아니면 에러메시지 표시 |
| date | boolean | true 설정 시 값은 datefmt옵션에서 가져온 값(설정되지 않으면 ISO date 사용)이며 date형식이 아니면 에러메시지 표시 |
| time | boolean | true 설정 시 time 형식이 아니면 에러메시지 표시. 현재는 hh:mm 포멧과 옵션으로 마지막에 am/pm이 있다. |
| custom | boolean | true 설정 시 custom_func 함수의 규칙에 따라체크한다. (아래 참고) |
| custom_func | function | 이 함수는 custom 옵션이 true인 경우에만 사용이 가능하며, 전달되는 파라메터는 체크할 값과 colModel의 이름이다. 이 함수는 아래와 같이 배열을 반환해야 한다. 1번째: 성공실패여부 true 또는 false 2번째: 1번째값이 false인경우 에러메시지 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>
참고
- http://www.trirand.com/jqgridwiki/doku.php?id=wiki:singe_searching
