Translate

2019년 4월 25일 목요일

[jqGrid] 툴바 검색 설명







실습 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 메소드의 옵션

OptiontypeDescriptionDefault
autosearchboolean검색은 다음 규칙에 따라 수행된다.
text Element: 값을 입력하고 검색을 하려할 때 Enter키를 누를 때 수행
select Element: 값 변경이 될 때 수행
true
beforeSearchfunction검색전에 발생하는 이벤트이며 그리드를 trigger 하기전에 호출된다.
이벤트가 true를 반환하면 trigger가 수행되지 않는다.
이 경우 자체 검색 파라메터를 구성하고 그리드를 trigger 하면 데이터를 검색 할 수 있다.
다른 반환값은 trigger가 수행된다.
null
afterSearchfunction검색 후 발생하는 이벤트null
beforeClearfunction입력된 값을 지우기전에 발생하는 이벤트(clearToolbar 활성화됨)이며, search Element에서 데이터를 지우기전에 호출된다.
이벤트가 true를 반환하면 trigger가 발생하지 않으며, 이경우에 자신만의 search파라메터를 구성하고 그리드를 trigger 할 수 있다.
다른 반환값은 trigger가 실행된다.
null
afterClearfunction입력된 값을 지운 후에 발생하는 이벤트 (clearToolbar 활성화됨)null
searchOnEnterboolean검색이 적용되는 방법을 결정하며, true인경우 autosearch옵션을 참고하고 false인경우 사용자가 일부 문자를 입력 시 즉시 검색이 수행된다.true
stringResultboolean검색을 수행할때 데이터를 서버에 보내는 방법을 결정한다.
false인경우 key:value 쌍으로 보내지며
true인경우 searchGrid 메소드와 동일하게 서버에 보내진다.
고급검색의 옵션을 참고해라
false
groupOpstring이 옵션은 stringResult 옵션이 true이면서 group 조작(operation)을 정했을 경우에만 유효하며, AND 및 OR값을 가질 수 있다.
고급검색의 옵션을 참고해라
AND
defaultSearchstring검색 수행 시 기본 검색 연산자(operator)를 지정하며, 유효한 값이 설정 시 모든 필드에서 기본 연산자로 사용이 된다.
사용가능한 옵션은 링크에서 sopt 배열 옵션을 참고해라.
bw
searchOperatorsbooleantrue 설정 시 사용자가 검색할 때 select 조작(operation)을 허용하며, 클릭 조작(operation)시 필드 근처에 생성된다.
이경우 colModel의 searchoptions에 sopt옵션을 사용하여 표시가능한 연산자(operator)를 구성할 수 있다.
false
operandTitlestring이 옵션은 searchOperators가 true인 경우에만 사용가능하며, 사용자가 조작(operation)버튼에 마우스를 올리면 나타난다.
colModel의 searchoptions에 searchtitle 옵션을 덮어쓸 수 있다.
기본값: 'Click to select search operation.'
operandsobject사용자가 조작(operation)버튼을 클릭했을 때 보여질 단문이며, equal 같은 경우에는 '==' 라고 보여진다.
객체의 기본 셋팅은 아래와 같다.
{ "eq" :"==", "ne":"!", "lt":"<", "le":"<=", "gt":">", "ge":">=", "bw":"^", 
"bn":"!^", "in":"=", "ni":"!=", "ew":"\|", "en":"!@", "cn":"~", 
"nc":"!~", "nu":"#", "nn":"!#", "bt":"..."}.
심볼값이 변경된 경우에만 변경사항이 적용되며, searchOperators 옵션을 참고해라
odataobject검색중일 때 특정 조작에 대해서 긴문자열을 정의하며, 기본 객체는 언어파일에 있고 $.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
MethodDescription
triggerToolbar이 메소드를 호출하면 검색이 수행되고, 그리드의 search 파라메터가 true로 변경되며 서버에 ajax호출이 실행된다.
clearToolbarrequest보낸 search 값이 지워지고 search옵션이 false로 변경되었을 때 가능한 기본값으로 설정한다.
toggleToolbarsearch Element와 toolbar를 토글한다.

위의 3가지 메소드는 new API로 작동이 되지 않는다.

 - 사용방법
...
var sgrid = $("#grid_id")[0];
sgrid.triggerToolbar();





참고
 - http://www.trirand.com/jqgridwiki/doku.php?id=wiki:toolbar_searching

댓글 없음 :

댓글 쓰기