[jqGrid] 편집 공통규칙 설명

날짜:







실습 jqGrid 버전: CDN 제공하는 v4.6 버전으로 테스트



공통 편집 속성

 - grid.common.js 로딩되어야 사용 가능
 - 그리드에 데이터를 표시하는 주요 이유중 하나는 데이터를 빠르고 쉽게 편집하는 것이며, jqGrid는 아래의 3가지 방법으로 데이터 편집을 지원한다.

1. cell 편집: 그리드의 특정 cell을 편집
2. inline 편집: 같은 row에 있는 여러개의 cell을 편집
3. form 편집: 그리드 외부에서 편집할 form을 작성





옵션 및 설명
1004lucifer
 - 모든 편집 모듈은 편집을 수행하기위해 colModel의 공통 속성을 사용하며, 다음과 같은 속성 목록이 있다.

1. editable
2. edittype
3. editoptions
4. editrules
5. formoptions (form 편집에만 사용)


해당 옵션의 사용방법은 아래와 같다.
<script>
jQuery("#grid_id").jqGrid({
...
   colModel: [ 
      ... 
      {name:'price', ..., editable:true, edittype:'text', editoptions:{...}, editrules:{...}, formoptions:{...} },
      ...
   ]
...
});
</script>





editable
 - editable 옵션은 boolean 형식이며, 해당 필드의 편집여부를 결정한다. 기본값은 false이며, editable:true 설정 시 편집가능하게 설정된다.
 - 숨겨진 필드는 편집 가능한 것으로 표시되도라도 편집할 수 없다.
 - inline / cell 편집에서 필드를 편집하려면 showCol 메소드를 사용하여 필드를 표시해야 한다.
 - form 편집에서는 editrules 옵션을 사용해야 한다.(아래 참조)





edittype
 - edittype 옵션은 편집가능한 필드의 타입을 정의하며 사용 가능한 값은 'text', 'textarea', 'select', 'checkbox', 'password', 'button', 'image', 'file', 'custom' 이 있고, 기본값은 'text'이다.


text
 - edittype이 text 일 때 jqGrid는 text유형의 태그를 생성한다.
<input type="text" ...../>
editoptions 에 해당 필드에 가능한 모든 옵션을 넣을 수 있다.
... editoptions: {size:10, maxlength: 15}
jqGrid가 아래와 같이 input을 구성해 준다.
<input type="text" size="10" maxlength="15" />
위 설정 외에도 jqGrid는 id, name 속성을 추가한다. <= 아래 다른 옵션 모두 공통

1004lucifer
textarea
 - edittype이 textarea이면 jqGrid는 textarea 유형의 input태그를 생성한다.
<input type="textarea" .../>
editoptions에 해당 유형의 속성을 추가할 수 있으며 일반적으로 상자크기를 설정한다.
... editoptions: {rows:"2",cols:"10"}
<input type="textarea" rows="2" cols="10".../>


checkbox
 - edittype이 checkbox 일때 jqGrid 는 아래와 같이 input 태그를 생성한다.
<input type="checkbox" .../>
editoptions에 checked / unchecked 값을 정의한다. (첫번째가 체크된값)
...editoptions: { value:"Yes:No" }
<input type="checkbox" value="Yes" offval="No".../>
위와 같이 만들어지며, editoptions에 value 속성을 설정하지 않은경우 jqGrid는 checkbox를 구성하기 위해 (false | 0 | no | off | undefined) 값을 검색하며, 셀 내용에 이러한 값중 하나라도 포함되지 않으면 value 속성이 cell 내용이 되고 offval은 off로 설정된다.

ex) cell 내용이 true 인경우
<input type="checkbox" value="true" offval="off" checked.../>


select
 - edittype이 select 일때 jqGrid는 input 태그를 아래와 같이 생성한다.
<select> 
<option value='val1'> Value1 </option> 
<option value='val2'> Value2 </option> 
... 
<option value='valn'> ValueN </option> 
</select>
위 요소를 구성하기 위해 세가지 방법이 있다.

1. string으로 editoptions값 설정
 - value:label 쌍으로된 값이 포함되어야 하며 value와 label은 콜론(:)으로 구분되어야 하며 쌍의 구분값은 세미콜론(;)이다. (주의: 마지막에는 세미콜론이 들어가지 않는다.)

ex) editoptions: { value: “FE:FedEx; IN:InTime; TN:TNT” }
<select> 
<option value='FE'> FedEx </option> 
<option value='IN'> InTime </option> 
<option value='TN'> TNT </option> 
</select>


2. editoptions 값을 객체로 설정하기
 - 이경우 editoptions 값은 name:value 속성을 콤마(,)로 구분하여 배열{}를 구성해야 한다.
...
colModel : [
      ...
    {name:'myname', edittype:'select', editoptions:{value:{1:'One',2:'Two'}} },
      ...
]
...
<select> 
<option value='1'>One</option> 
<option value='2'>Two</option> 
</select>


3. editoptions에 dataUrl 파라메터 설정하기
 - edittype:select 경우에만 editoptions에 dataUrl 파라메터를 사용할 수 있으며, dataUrl 파라메터는 html select Element를 가져올 URL을 나타낸다.
이 옵션이 설정되면 Ajax를 통해 가져온 값으로 내용이 채워지며 유효한 HTML select Element 이어야 한다.
<select> 
<option value='1'>One</option> 
<option value='2'>Two</option> 
...
</select>
selectbox에 중복선택 옵션을 넣을 수 있으며 size옵션도 추가할 수 있다.
...editoptions: {multiple:true, size:3... }


password
 - edittype이 password일 때 jqGrid는 다음과 같은 태그를 생성한다.
<input type="password" ...../>
editoptions를 아래와 같이 구성하면
... editoptions: {size:10, maxlength: 8}
다음과 같이 만들어진다.
<input type="password" size="10" maxlength="8" />


button
 - edittype이 button일때 jqGrid는 아래와 같이 태그를 생성한다.
<input type="button" ...../>
editoptions 아래와 같이 설정 시
... editoptions: {value:'MyButton'}
다음과 같이 만들어 준다.
<input type="button" value="MyButton" />


image
 - edittype이 image일때 jqGrid는 아래와 같이 태그를 생성한다.
<input type="image" ...../>
editoptions 아래와 같이 설정 시
... editoptions: {src:'path_to_my_image'}
다음과 같이 만들어준다.
<input type="image" src="path_to_my_image" />

1004lucifer
file
 - edittype이 file 일때 jqGrid는 아래와 같이 태그를 생성한다.
<input type="file" ...../>
editoptions 아래와 같이 설정 시
... editoptions: {alt:'Alt text'}
다음과 같이 만들어준다.
<input type="file" alt="Alt text"... />

(대개 form 편집에서) 위 요소가 작성되면 파일을 업로드 하기위한 enctype="multipart/form-data" 가 적용되지 않으며, 이 목적을 위해서는 다른 플러그인을 적용해야 한다. Ajax File Upload 플러그인이 정상적으로 작동한다.


custom
 - 사용자정의 편집 Element를 위해 이 타입을 사용할 수 있고, 해당 Element를 만들고 서버에 form값을 보낼 get/set 을 위한 2개의 function(custom_element / custom_value)을 제공해야 한다.

custom Element가 새성되면 자동으로 다음과 같은 추가작업을 수행한다.
 1) class 속성에 'customelement' 값 추가
 2) name 속성에 colModel의 name을 추가
 3) id 속성에 모든 편집모듈의 규칙에 따라 추가
1004lucifer
ex)
<script>
function myelem (value, options) {
  var el = document.createElement("input");
  el.type="text";
  el.value = value;
  return el;
}
 
function myvalue(elem, operation, value) {
    if(operation === 'get') {
       return $(elem).val();
    } else if(operation === 'set') {
       $('input',elem).val(value);
    }
}
jQuery("#grid_id").jqGrid({
...
   colModel: [ 
      ... 
      {name:'price', ..., editable:true, edittype:'custom', editoptions:{custom_element: myelem, custom_value:myvalue} },
      ...
   ]
...
});
</script>





editoptions

 - editoptions는 편집열에 대한 정보가 들어있는 배열이며 edittype에서 선택한 값에따라 유효한 속성을 설정해야 한다.
<script>
jQuery("#grid_id").jqGrid({
...
   colModel: [ 
      ... 
      {name:'price', ..., editoptions:{name1:value1...}, editable:true },
      ...
   ]
...
});
</script>
1004lucifer
PropertyTypeDescription
valuemixededittype:checkbox 경우
 - editoptions:{value:“Yes:No”}

edittype:select 경우
 1) string - editoptions:{value:“1:One;2:Two”}
 2) object - editoptions:{value:{1:'One';2:'Two'}}
 3) function - 형식화된 string or object 를 반환

edittype이 다른형식인경우 해당 정의된 요소의 value 값으로 지정됨
dataUrlstringedittype:select 인 경우에만 사용가능
Ajax를 통해 select 요소를 가져올 URL.
ex) <select><option value='1'>One</option>…</select>

inline/cell/form 편집에서 새로운 row/cell의 편집이나 form이 구성될때 매번 호출된다.
buildSelectfunctiondataUrl 파라메터가 설정된 경우에만 사용가능
dataUrl 응답이 select Element를 만들 수 없는경우 이 함수를 사용하게되며 select, options 값을 포함하는 문자열을 반환해야 한다.
이 함수에 전달되는 매개변수는 서버의 응답값이다.
dataInitfunction이 함수가 정의되면 해당 element object가 함수에 전달된다.
element가 생성될 때 한번만 호출된다.
Example :
…editoptions: { dataInit : function (elem) {
  $(elem).autocomplete();
}}

inline/cell/form 편집에서 새로운 row/cell의 편집이나 form이 구성될때 매번 호출된다.
form 편집에 한해서 recreateForm 옵션이 false면 한번만 수행되며 true설정 시 매번호출된다.
dataEventsarraydata요소에 적용될 이벤트목록.
$(“#id”).bind(type, [data], fn) 방법으로 data요소에 이벤트를 바인딩한다.
아래와 같이 기술한다.
… editoptions: { dataEvents: [
  { type: 'click', data: { i: 7 }, fn: function(e) { console.log(e.data.i); } },
  { type: 'keypress', fn: function(e) { console.log('keypress'); } }
]}
defaultValuemixed이 옵션은 string이나 function이며, add모드의 editGridRow메소드를 사용할 때 Form편집 모듈에서만 사용이 가능하다.
input Element에서 값이 비어있는 경우를 정의.
select Element에서 키가아닌 text형식을 제공해야한다.
함수 사용시 함수는 값을 반환해야 한다.
NullIfEmptyboolean true로 설정 시 해당 필드가 비어있을 때 null 문자열이 서버로 전송된다.
custom_elementfunctionedittype:custom 경우에만 사용가능
이 함수는 Element를 만드는데 사용되며, DOM element를 반환해야 한다.
이 함수에 전달되는 매개변수는 colModel의 editoptions값이 전달된다.
custom_valuefunctionedittype:custom 경우에만 사용가능
이 함수는 서버에 전달할 element에서 편집 이후의 값을 반환해야 한다.
함수에 전달되는 매개변수는 다음과 같다.
 1) element object
 2) inline/cell편집모듈의 operation타입(string형식)

form편집에서 이 함수는 다른 동작을 하며 추가로 3번째 매개변수로 값을 전달한다.
두번째 매개변수 operation 타입이 아래와 같은경우
 - get: 서버에 요청할 데이터, 이경우 값을 반환해야 하며 값을 반환하지 않으면 에러가 발생한다.
 - set: 서버에서 받아온 값을 그리드에 설정한다.

(위의 예를 참고)
other optionsmixed이경우 Element에 유효한 다른 속성을 설정할 수 있다.
ex) edittype:text 인경우 size, maxlength 등등..






편집 규칙

 - 편집가능한 요소에 colModel에 속성을 추가하며, 대부분 값을 서버에 보내기전에 사용자 입력의 유효성 검사하는데 사용된다.
<script>
jQuery("#grid_id").jqGrid({
...
   colModel: [ 
      ... 
      {name:'price', ..., editrules:{edithidden:true, required:true....}, editable:true },
      ...
   ]
...
});
</script>

OptionTypeDescription
edithiddenbooleanform 편집모듈에서만 사용가능
기본적으로 숨겨진필드는 편집할수 없지만, edithidden옵션을 true로 설정 시 add / edit 메소드를 호출 시 필드를 편집할 수 있다.
requiredbooleantrue 설정 시 비어있으면 오류메시지 표시
numberbooleantrue 설정 시 숫자가 아닌경우 오류메시지 표시
integerbooleantrue 설정 시 정수가 아닌경우 오류메시지 표시
minValuenumber(integer)설정 시 값이 이보다 작으면 오류메시지 표시
maxValuenumber(integer)설정 시 값이 이보다 크면 오류메시지 표시
emailbooleantrue 설정 시 이메일형식이 아니면 오류메시지 표시
urlbooleantrue 설정 시 url형식이 아니면 오류메시지 표시
datebooleantrue 설정 시 날짜형식이 아니면 오류메시지 표시
(datefmt옵션의 값은 get, 설정되지 않은경우 ISO날짜가 사용됨)
timebooleantrue 설정 시 시간형식이 아니면 오류메시지 표시
현재 hh:mm 형식에 마지막에 옵션으로 am/pm 지원
custombooleantrue 설정 시 custom_func함수를 통해 검사규칙 정의
custom_funcfunctioncustom 옵션이 true인 경우에만 사용가능
이 함수에 전달되는 매개변수는 체크할 값과 colModel의 이름이며, 아래의 매개변수 배열을 반환해야 한다.
 1) 값의 검사 성공여부 (true or false)
 2) 값의 검사가 false인경우 보여질 오류메시지

ex) [false,“Please enter valid value”]

custom 검사 예제
<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', ..., editrules:{custom:true, custom_func:mypricecheck....}, editable:true },
      ...
   ]
...
});
</script>





formoptions

 - 이 옵션은 form편집에만 사용가능하며, form의 element를 재정렬과 편집할 element 앞뒤에 정보를 추가할 수 있다.

<script>
jQuery("#grid_id").jqGrid({
...
   colModel: [ 
      ... 
      {name:'price', ..., formoptions:{elmprefix:'(*)', rowpos:1, colpos:2....}, editable:true },
      ...
   ]
...
});
</script>
1004lucifer
OptionTypeDescription
elmprefixstring설정 시 입력요소 앞에 text or html 콘텐츠가 표시된다.
elmsuffixstring설정 시 입력요소 뒤에 text or html 콘텐츠가 표시된다.
labelstring설정 시 formd의 label이 colName 배열의 name으로 변경되어 보여진다.
rowposnumbertext-label을 가지고있는 element의 row위치를 결정
카운트는 1부터 시작
colposnumbertext-label을 가지고있는 element의 column위치를 결정
카운트는 1부터 시작



 - rowpos, colpos 속성과 함께 colModel에서 formoptions를 사용하려는경우 모든 편집필드에서 이러한 속성을 사용하는것을 권장한다.

 - 두개의 element는 동일한 row위치를 가질 수 있지만 column위치는 달라야 한다.



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

댓글

댓글 쓰기