Translate

2019년 4월 29일 월요일

[jqGrid] 사용자정의 검색 설명







실습 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: 파라미터의 배열 (아래 표 참고)


옵션은 다음과 같다.


OptionDescriptionDefault
gridModeltrue로 설정 시 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
filterModelgridModel이 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에 적용 가능한 유효옵션이다.
[]
formtypeform을 구성하는 방법을 정의한다.
ex) 'horizontal' or 'vertical'
horizontal
autosearchtrue로 설정 시 사용자가 input Element에 값을 넣고 enter를 입력하면 검색이 되며, selectbox의 값이 변경될 때도 검색이 된다.
false로 설정 시 버튼을 사용하여 검색을 할 수 있다.
true
formclassform에 적용할 수 있는 class“filterform”
tableclass(form Element의 자식요소인) table에 적용가능한 class“filtertable”
buttonclass버튼에 적용할 수 있는 class“filterbutton”
searchButton검색을 수행하는 버튼의 label(라벨)
(이 label은 jqGrid를 사용하지 않고 label을 어디서나 사용할 수 있도록 메소드를 분리하기 때문에 언어파일에서 가져오지 않는다.)
“Search”
clearButton이미 입력된 값을 지우는 버튼의 label“Clear”
enableSearch검색버튼 활성화/비활성화false
enableClearclearButton 활성화/비활성화false
beforeSearch검색전에 발생하는 이벤트null
afterSearch검색 후 발생하는 이벤트null
beforeClear입력된 값을 지우기전에 실행되는 이벤트
(clearbutton 누를때 발생)
null
afterClear입력된 값을 지운 후 발생하는 이벤트null
url검색중인 값을 위한 별도의 URL''
marksearchedtrue 설정 시 검색이 적용된 모든 컬럼에 대해서 검색가능 표시가 적용되며, 검색을 지우면 표시가 사라진다.
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

댓글 없음 :

댓글 쓰기