Translate

[jqGrid] jQuery UI 통합 설명

날짜:






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


정렬 가능한 컬럼(Columns)

 - 이 메소드는 jqGrid에 통합되어있어 별다른 작업을 할 필요가 없다. 메소드를 사용하면 마우스를 사용하여 그리드 컬럼을 재정렬 할 수 있다.
이 경우에 필요한 설정은 jqGrid의 sortable 옵션을 true로 해주면 된다.

<script type="text/javascript">
jQuery(document).ready(function(){ 
  jQuery("#list").jqGrid({
    url:'example.php',
    datatype: 'xml',
    mtype: 'GET',
    colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
    colModel :[ 
      {name:'invid', index:'invid', width:55}, 
      {name:'invdate', index:'invdate', width:90}, 
      {name:'amount', index:'amount', width:80, align:'right'}, 
      {name:'tax', index:'tax', width:80, align:'right'}, 
      {name:'total', index:'total', width:80, align:'right'}, 
      {name:'note', index:'note', width:150, sortable:false} 
    ],
    pager: '#pager',
    rowNum:10,
    rowList:[10,20,30],
    sortname: 'invid',
    sortorder: 'desc',
    viewrecords: true,
    caption: 'My first grid',
    sortable: true
  }); 
}); 
</script>

사용된 jQuery UI 위젯 및 기타 플러그인
 - jQuery UI core
 - jQuery UI sortable widget





컬럼 선택기 (Column Chooser)

 - 이 메소드를 사용하여 그리드에서 컬럼의 순서를 바꾸거나 보이기/감추기 설정을 할수 있다.

old_API
jQuery("#list").columnChooser(options);
new_API
jQuery("#list").jqGrid('columnChooser', options);
options - 아래 나열된 속성을 가진 객체 (하단 옵션 설명 참고)
1004lucifer
* 이 메소드에서 정렬 기능을 사용하려면 jqGrid 보다 jQuery multiselect 플러그인이 우선적으로 로드되어야 한다.


이 함수를 호출한 후 모달 대화상자가 열리고 사용자는 컬럼을 보이거나 숨길수 있고 순서도 바꿀 수 있다.


옵션
1004lucifer
Name Type Description Default
title string 모달 대화상자의 타이틀 See $.jgrid.col.title in language file
width number 다이얼로그의 가로길이 (픽셀) 420
height number 다이얼로그의 세로길이 (픽셀) 240
classname string 그리드 생성되는 선택자(selector)에 추가될 class null
done function 사용자가 Ok 버튼을 누를 때 호출될 함수.
현재는 컬럼을 재정렬 하기위해 remapColumns 메소드를 호출하도록 구현되어있다.
msel mixed msel 은 아래의 값을 설정할 수 있다.
- multiselect 를 확장한 ui 위젯 class의 이름
- multiselect 객체 생성 함수 (매개변수가 없거나 object를 전달)
- 소멸 ('destroy' 문자열 설정 시)		 multiselect
dlog mixed dlog 는 아래의 값을 설정할 수 있다.
- 대화상자와 같은 방식으로 작동하는 ui 위젯 class의 이름
- 대화상자 생성 함수 (dlog_opts 설정 시)
- 소멸 ('destroy' 문자열 설정 시)		 dialog
dlog_opts mixed dlog_opts 는 dlog에 전달할 옵션객체 이거나 옵션객체를 생성하는 함수일 수 있다.
기본값은 ui.dialog 객체에 적당한 옵션을 생성한다.
cleanup function 대화상자를 정리하고 선택하는 함수.
또한 다른 변경없이 종료함수(done function)를 호출한다. (columnChooser 가 중단되었음을 나타낸다)

위에서 정의된 종료함수(done function)는 jqGrid코드에서 다음과 같이 정의되어있다.
opts = $.extend({
...
"done" : function(perm) { if (perm) self.jqGrid("remapColumns", perm, true) },
...
});
재정렬 후 다른 작업을 수행하려면 이 옵션을 재정의 할 수 있다.
예를들어 사용자가 일부 컬럼을 보여주거나 숨긴 후 페이지의 일부 요소 너비를 다시 계산한다고 가정하면 다음과 같이 할 수 있다.
jQuery("#list").jqGrid('columnChooser', {
   done : function (perm) {
      if (perm) {
          // "OK" button are clicked
          this.jqGrid("remapColumns", perm, true);
          // the grid width is probably changed co we can get new width
          // and adjust the width of other elements on the page
          //var gwdth = this.jqGrid("getGridParam","width");
          //this.jqGrid("setGridWidth",gwdth);
      } else {
          // we can do some action in case of "Cancel" button clicked
      }
   }
});
1004lucifer
사용된 jQuery UI 위젯 및 기타 플러그인
 - jQuery UI core
 - jQuery UI sortable widget
 - jQuery UI dialog
 - jQuery multiselect plugin

jQuery multiselect 플러그인은 링크 에서 볼 수 있으며, 또한 이 플러그인은 jqGrid 빌드의 plugins 디렉토리에 포함되어 있다.







정렬 가능한 행(Rows)

 - 이 메소드를 사용하면 마우스를 사용하여 시각적으로 그리드를 재정렬(정렬) 할 수 있다.

old_API
jQuery("#list").sortableRows(options);
new_API
jQuery("#list").jqGrid('sortableRows', options);
options - sortable 위젯의 옵션 (http://jqueryui.com/sortable/)

이 메소드는 jQuery UI sortable 위젯과 완벽하게 호환된다.
즉, 이 위젯에서 사용할 수 있는 옵션 및 이벤트를 설정할 수 있다.


사용된 jQuery UI 위젯 및 기타 플러그인
 - jQuery UI core
 - jQuery UI sortable widget

알려진 문제
 - 현재 이 방법은 sortable 위젯의 문제로 인해 FireFox v3.0.x, Chrome, Safari 브라우저에서 작동하지 않으며 추후 jQuery UI의 다음 버전에서 수정되길 바란다.
 - treeGrid가 활성화된 경우 메소드가 작동하지 않음 - (트리의 row를 재정렬 할 수 없음)









그리드 리사이즈

 - 이 메소드를 사용하면 마우스를 사용하여 그리드 너비/높이를 조정할 수 있다.

old_API
jQuery("#list").gridResize(options);
new_API
jQuery("#list").jqGrid('gridResize', options);
options - resizable 위젯의 옵션 (http://jqueryui.com/resizable/)

이 메소드는 jQuery UI resizable 위젯과 완벽하게 호환된다.
즉, 이 위젯에서 사용할 수 있는 옵션 및 이벤트를 설정할 수 있다.

사용된 jQuery UI 위젯 및 기타 플러그인
 - jQuery UI core
 - jQuery UI resizable widget

알려진 문제
 - 그리드 숨기기 버튼(캡션의 버튼)을 사용시 resizable 위젯에서 생성한 컨텐츠가 숨겨지지 않는다. 이로인해 숨겨진 이후에 그리드의 테두리(border)가 나타난다.








그리드 사이의 행(rows) 드래그앤드롭

 - 이 방법을 사용하면 마우스를 사용하여 두개 이상의 그리드 간에 행을 끌어다 놓을 수 있다.

old_API
jQuery("#list").gridDnD(options);
new_API
jQuery("#list").jqGrid('gridDnD', options);
options - 아래 나열된 속성을 가진 객체 (하단 옵션 설명 참고)


옵션
1004lucifer
Name Type Description Default
connectWith string row를 드래그 할 그리드를 지정한다.
두개 이상의 그리드가 있는경우 콤마로 구분한다.
ex) '#grid1,#grid2'		 empty string
onstart function 이 이벤트는 원본 그리드에서 row를 끌기 시작할 때 발생한다.
이 이벤트에 이벤트핸들러, (준비된)ui object 가 매개변수로 전달된다.
자세한 내용은 jQuery UI draggable events		 null
onstop function 이 이벤트는 드래그가 중지되면 호출된다.
이 이벤트에 이벤트핸들러, (준비된)ui object 가 매개변수로 전달된다.
자세한 내용은 jQuery UI draggable events		 null
beforedrop function 이 이벤트는 connectWith 에 기술한 그리드에 row drop 전에 발생한다.
이 이벤트에 다음과 같은 파라메터가 전달된다.
1. event handler
2. (준비된)ui object,
3. data (그리드에 삽입된 name:value)
4. source grid object
5. target grid object

name:value 쌍의 객체를 반환 시 타겟 그리드에 추가된다.		 null
ondrop function 이 이벤트는 connectWith 에 기술한 그리드에 row drop 후에 발생한다.
이 이벤트에 다음과 같은 파라메터가 전달된다.
1. event handler
2. (준비된)ui object,
3. data (그리드에 삽입된 name:value)
자세한 내용은 jQuery UI droppable events		 null
drop_opts object drop 가능한 그리드에 적용 가능한 미리정의된 옵션 (위의 connectWith 옵션으로 지정됨)
또한 임의의 옵션 및 이벤트를 설정할 수 있다. (ondrop 이벤트로 대체되는 drop 이벤트 제외)
자세한 내용은 jQuery UI droppable		 { activeClass : “ui-state-active”,
hoverClass : “ui-state-hover”
}
drag_opts object drag 가능한 그리드에 적용 가능한 미리 정의된 옵션 (이 방법이 적용되는 옵션)
또한 임의의 옵션 및 이벤트를 설정할 수 있다.
(onstart, onstop 이벤트로 대체되는 start, stop 이벤트 제외)
자세한 내용은 jQuery UI draggable		 { revert: “invalid”,
helper: “clone”,
cursor: “move”,
appendTo : “#jqgrid_dnd”,
zIndex: 5000
}
dropbyname boolean true 설정 시 name이 같은 필드만 타겟 그리드에 추가할 수 있다.
addRowData를 사용하여 새로운 row를 삽입하며, name이 a인 필드가 소스그리드에 숨겨져있으면 다생 그리드에 표시될 수 있다.
기본값인 false는 소스의 첫번째 컬럼의 계산된 대상에 추가됨을 의미한다.		 false
droppos string 새로운 row를 추가할 위치를 결정한다.
first - 그리드의 첫번째 row
last - 그리드의 마지막 row		 first
autoid boolean 이 옵션은 새로운 row의 id를 생성하는 방법을 정의한다.
true 설정 시 autoidprefix 옵션으로 설정된 문자열로 시작하는 랜덤 숫자값 id 를 생성한다.
false 설정 시 id는 colModel의 key 속성에 의해 결정되는 다음 레코드 수 또는 값이 될 수 있다.
함수로 정의되는 경우 이 함수는 타겟 그리드에 id로 들어갈 값을 반환해야 하며, 이 경우 전달되는 파라메터는 타겟 그리드 row에 삽입될 데이터 배열이다.		 true
autoidprefix string autoid 옵션이 true로 설정된 경우에만 id의 접두사로 결정되어 사용된다. dnd_
dragcopy boolean 소스 row를 이동시키지 않고 복사를 한다.
(GridDnD 에만 해당)		 false

사용된 jQuery UI 위젯 및 기타 플러그인
 - jQuery UI core
 - jQuery UI draggable widget
 - jQuery UI droppable widget

알려진 문제
 - 이 방법은 Draggable 위젯의 버그로 Safari, Chrome 에서 제대로 작동하지 않는다. 드래그 가능한 row의 앞에 텍스트가 선택되는 효과

예제
 - 아래 예제는 id grid1, grid2, grid3 3개의 그리드를 생성 후 grid1 은 grid2, grid3으로 드래그 할 수 있고, grid2는 grid1 에서만 드래그 할 수 있다.
// Creating grid1
jQuery("#grid1").jqGrid({
    datatype: "local",
    height: 100,
    colNames: ['Id1', 'Name1', 'Values1'],
    colModel: [
       {name: 'id1', index: 'id',width: 100}, 
       {name: 'name1',index: 'name',width: 100},
       {name: 'values1',index: 'values',width: 200}
    ],
    caption: 'Grid 1',
    pager: '#pgrid1'
});
 
//Creating grid2
jQuery("#grid2").jqGrid({
    datatype: "local",
    height: 100,
    colNames: ['Id2', 'Name2', 'Values2'],
    colModel: [
       {name: 'id2',index: 'id',width: 100},
       {name: 'name2',index: 'name',width: 100},
       {name: 'values2',index: 'values',width: 200}
    }],
    caption: 'Grid 2',
    pager: '#pgrid2'
});
// Creating grid3
jQuery("#grid3").jqGrid({
    datatype: "local",
    height: 'auto',
    colNames: ['Id3', 'Name3', 'Values3'],
    colModel: [
       {name: 'id3',index: 'id',width: 100},
       {name: 'name3',index: 'name', width: 100},
       {name: 'values3',index: 'values',width: 200}
    }],
    caption: 'Grid 3',
    pager: '#pgrid3'
});
 
// Data for grid1
var mydata1 = [
    {id1:"1",name1:"test1",values1:'One'},
    {id1:"2",name1:"test2",values1:'Two'},
    {id1:"3",name1:"test3",values1:'Three'}
];
// Data for grid2
var mydata2 = [
    {id2:"11",name2:"test11",values2:'One1'},
    {id2:"21",name2:"test21",values2:'Two1'},
    {id2:"31",name2:"test31",values2:'Three1'}
];
// Data for grid3
var mydata3 = [
    {id3:"12",name3:"test12",values3:'One2'},
    {id3:"22",name3:"test22",values3:'Two2'},
    {id3:"32",name3:"test32",values3:'Three2'}
];
// Adding grid data
for (var i = 0; i <= mydata1.length; i++) {
    jQuery("#grid1").jqGrid('addRowData',i + 1, mydata1[i]);
    jQuery("#grid2").jqGrid('addRowData',i + 1, mydata2[i]);
    jQuery("#grid3").jqGrid('addRowData',i + 1, mydata3[i]);
}
// connect grid1 with grid2 and grid3
jQuery("#grid1").jqGrid('gridDnD',{connectWith:'#grid2,#grid3'});
// connect grid2 with grid1
jQuery("#grid2").jqGrid('gridDnD',{connectWith:'#grid1'});





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

댓글

댓글 쓰기