[Tapestry] JQGrid 커스텀 컴포넌트 개발일지(5).

First, 각 고급기능 사용법을 익히기.

*Javascript Client단에서 조작가능.(전역변수).

• -------------------------------------------------------------------------------------------------------
• 1) Group Header. (Colspan, Rowspan Header.)  [성공]
• : 상단 Header Grouping.
• : Grid 생성 후 , setGroupHeaders 메소드를 통해 별도 설정이 필요함.
• -------------------------------------------------------------------------------------------------------
• jQuery("#ghwcs").jqGrid('setGroupHeaders', {
•     useColSpanStyle: true, //rowspan자동으로 해줄지 여부.
•     groupHeaders:[
•       {
•         startColumnName: 'amount',
•         numberOfColumns: 3,
•         titleText: '.,'
•       },
•       {
•         startColumnName: 'closed',
•         numberOfColumns: 2,
•         titleText: 'Shiping'
•       }
•      ]
•     });

 

• -------------------------------------------------------------------------------------------------------
• 2) Grouped Header Row / Summary Footers    [실패 - Ajax로하면, 단일 그룹은 되지만, 다중은 왜안되는겨]
• *Ajax의 경우, 이게 미리 정렬을 해야, Grouping이 된다..
• *Local은 데이터가 섞여도 잘 되는데..;;
• *Grouping이 안됨.. 동일 문자열을 같은 그룹으로 인식못함.
• : 각 Row data의 Grouping. 항목을 지정시, 해당하는 Row끼리 Grouping을 한다.
• : Summary기능도 제공.
• : Multi Grouping.

 

• -------------------------------------------------------------------------------------------------------
• {0} which mean the grouped text and
• {1} which mean how many items we have on this group.
• grouping:true,
• groupingView : {
•   groupField : ['name'],
•   groupColumnShow : [false],
•   groupText : ['<b>{0} - {1} Item(s)</b>'],
•   groupCollapse : true,
•   groupOrder: ['desc'] 
• }

*Summary 기능 ( Currently we support the following functions – sum/ count/ min/ max. )

• grouping:true,
• groupingView : {
•    groupField : ['name'],
•    groupSummary : [true],
•    groupColumnShow : [true],
•    groupText : ['<b>{0}</b>'],
•    groupCollapse : false,
•    groupOrder: ['asc']
• }
• +) colModel –> summaryType과 summaryTpl을 제공한다.
•   summaryType : sum/count/min/max를 지원.
•   summaryTpl : HTML템플릿을 지정. {0}

 

• *API를 통해 Grouping을 변경/제거 가능.
• jQuery("#48remote4").jqGrid('groupingRemove',true);
• jQuery("#48remote4").jqGrid('groupingGroupBy',vl);

 

• -------------------------------------------------------------------------------------------------------
• 3) Master Detail Grid 기능구현.
• : Master Detail Grid가 별도로 있는 건 아니고, Grid두개를 연결시키는 방식이라, 딱히 구현하기가 애매하긴 하다.
• -------------------------------------------------------------------------------------------------------
• onSelectRow: function(ids) {
• if(ids == null) {
•      ids=0;
•      if(jQuery("#list10_d").jqGrid('getGridParam','records') >0 ) {
•          jQuery("#list10_d").jqGrid('setGridParam',{url:"subgrid.php?q=1&id="+ids,page:1});
•          jQuery("#list10_d").jqGrid('setCaption',"Invoice Detail: "+ids) .trigger('reloadGrid');
•      }
•   } else {
•    jQuery("#list10_d").jqGrid('setGridParam',{url:"subgrid.php?q=1&id="+ids,page:1});
•    jQuery("#list10_d").jqGrid('setCaption',"Invoice Detail: "+ids) .trigger('reloadGrid');
•   }
• }

 

• -------------------------------------------------------------------------------------------------------
• 4) Resizable Grid 기능구현. [실패 – 인식을 못함]..
• : 초기설정 width, height가 maxWidth, minHeight에 넘지 않도록 설정 하면, Resizable이 가능함.
• -------------------------------------------------------------------------------------------------------
• jQuery("#resize").jqGrid('gridResize',{
  •    minWidth:350,
  •    maxWidth:800,
  •    minHeight:80,
  •    maxHeight:350
  • });

적용이 안됨..;;;

• -------------------------------------------------------------------------------------------------------
• 5) Controling Server Errors (– New in version 3.2 )
• -------------------------------------------------------------------------------------------------------

 

6) 기본CRUD개선.

Edit이벤트에서, Insert/Update/Delete를 나누기.

 

6) *Validation / Type ( Select / Textarea.. )

7) CSS 충돌 이슈 잡기. (Bootstrap/w8 skin)

8) Search ( 조건처리 )

9) 기타 접근 API 정리. 개발자 참고용으로.

• 9-1) hide/show Column
•   - jQuery("#list17").jqGrid('navGrid','hideCol',"tax");
•   - jQuery("#list17").jqGrid('navGrid','showCol',"tax");
•  
• 9-2) setLabel (Header Name 변경)
•   - $("#method32").jqGrid('setLabel',"tax","Tax Amt",{'font-weight': 'bold','font-style': 'italic'});

10) SubGrid

• //…
• subGrid : true,
• subGridUrl: 'subgrid.php?q=3',
• subGridModel: [
• {
•   name : ['No','Item','Qty','Unit','Line Total'],
•   width : [55,200,80,80,80],
•   params:['invdate']
• }

10) inline Editor

• onSelectRow: function(id){
• if(id && id!==lastsel){
•    jQuery('#rowed3').jqGrid('restoreRow',lastsel);
•    jQuery('#rowed3').jqGrid('editRow',id,true);
•    lastsel=id;
•   }
• },
• editurl: "server.php",

11) Custom Button / Forms