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

*요새 잠을 잘 못잔다.. 오늘도 2시간 잔듯..뭐 이상있는건 아닌데, 잠을 못자니 운동이나 다른 활동에 영향이 간다..ㅠ

암튼 오늘 업무 다시 시작!!

 

• -----------------------------------------------------------------------------------------------------
• 1) Form editable / Datepicker 연동 / hiddens
• - New in version 3.5 – Form Navigation.
• -----------------------------------------------------------------------------------------------------
• -----------------------------------------------------------------------------------------------------
• 1-1) Editable
• : 폼 관련 구성정보를 의미하며, 추가/수정시 설정한 구성값으로 화면을 자동으로 만듦.
• -----------------------------------------------------------------------------------------------------
• editable:{true / false}
• edittype : {checkbox / textarea / select}
• editoption:{
•      readonly : true/false
•      size : int
•     
• }
  • editrules:{
  •     required(true/false)
  •     edithidden(true/false)
  •     number(true/false)
  •     minValue(int)
  •     maxValue(int)
  • }
• editrules:{custom:true,custom_func:mycheck} //커스텀 사용시.

• -----------------------------------------------------------------------------------------------------
• 예제) Editable Examples
• -----------------------------------------------------------------------------------------------------
• editable:true, editoptions:{readonly:true}
• editable:true, editrules:{date:true},formatter:'date', datefmt:'d/m/Y'
• editable:true, editrules:{number:true},sorttype:'number',formatter:'number'
• editable:true,
• editoptions:{
•    size:12,
•    dataInit:function(el){
•               $(el).datepicker({dateFormat:'yy-mm-dd'}); //Datepicker 연동
•    },
•   defaultValue: function(){
•                var currentTime = new Date();
•                var month = parseInt(currentTime.getMonth() + 1);
•                month = month <= 9 ? "0"+month : month;
•                var day = currentTime.getDate();
•                day = day <= 9 ? "0"+day : day;
•                var year = currentTime.getFullYear();
•                return year+"-"+month + "-"+day;
•    }
• },
• editrules:{required:true}

 

• -----------------------------------------------------------------------------------------------------
• 1-2) formatter
• -----------------------------------------------------------------------------------------------------
• formatter : { ‘integer’ /‘date’ /‘currency’ /‘checkbox’ / ‘link’}
• *custom Formatter
• formatter:'date', formatoptions:{srcformat:"Y-m-d",newformat:"d-M-Y"}
• formatter:'currency',formatoptions:{thousandsSeparator:","}
• formatter:'currency', formatoptions:{prefix:"&euro;"}

 

• -----------------------------------------------------------------------------------------------------
• 예제) Formatter Example
• -----------------------------------------------------------------------------------------------------
• formatter: 'date', formatoptions: {newformat: 'd-M-Y'}, datefmt: 'd-M-Y'},sorttype: 'date'
• formatter: 'number', sorttype: 'number'
• formatter: 'checkbox',edittype: 'checkbox', editoptions: {value: 'Yes:No', defaultValue: 'Yes'}
• formatter: 'select', edittype: 'select', editoptions: {value: 'FE:FedEx;TN:TNT;IN:Intim', defaultValue: 'Intime'}
  • formoptions:{
  •       rowpos:2,
  •       elmprefix:"(*)",
  •       elmsuffix:" yyyy-mm-dd"
  • },

 

*정규식 공부를 좀 해야겠음.

*사실 오토로, 데이터 타입에 따라 edittype,formattype을 지정해주려 했는데, 쉽지 않다.

Dateformat도 너무 경우의 수가 많다.

 

*최소한의 config설정으로 다하려니 머리 터질듯..

머리가 쉽게 돌아가지 않는다.

 

*edittype , formattype, sorttype

*validation – [New in version 3.2] Client Validation

 

Date
//edittype은 스트링이니까
editrules:{date:true}
formatter:'date'
//formatoptions:{srcformat:"Y-m-d",newformat:"d-M-Y"}
datefmt:'d/m/Y'//인자값 받아야함.
editoptions:{
  
   dataInit:function(el){
       //bootstrap화
   },
   defaultValue:function(){
       //오늘날짜초기화
   }
}

select
formatter : 'select'
edittype:'select'
editoptions:{value://}

checkbox

//auto로 할 수 있는거는 number,boolean(checkbox)밖에없음.
//date(String), select,

 

 

-----------------------------------------------------------------------------------------------------

• 3) Grouping
• -----------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------

• 4) Advanced Searching ( Search / Multiple Search ) 
• -----------------------------------------------------------------------------------------------------
• - Basic
• jQuery("#grid").jqGrid('navGrid','#s3pager', { edit:false,add:false,del:false,search:true,refresh:true }
•              , {} // edit options
•              , {} // add options
•              , {}  //del options
•              , {multipleSearch:false} // search options
• );

   

• - Multiple Search
• jQuery("#grid").jqGrid('navGrid','#pmultiple37',{del:false,add:false,edit:false}
•                              ,{},{},{}
•                              ,{multipleSearch:true});
• - Multiple Search + or 조건 지원.

jQuery("#grid").jqGrid('navGrid','#pgrps', {edit:false,add:false,del:false}

•                           , {}, {}, {}
•                           , {multipleSearch:true, multipleGroup:true} );

 

• 6) Frozen Cols

7) 고급기능 - 가능하면 좋을 기능.

   - subGrid , TreeGrid, Inplace Editor, Summary Footer Row

8) ETC

• - Resize Grid
• jQuery("#grid").jqGrid('gridResize',{minWidth:350,maxWidth:800,minHeight:80, maxHeight:350});

 

• -Drag And Drop
• jQuery("#grid1").jqGrid('gridDnD',{connectWith:'#grid2,#grid3'});
• jQuery("#grid2").jqGrid('gridDnD',{connectWith:'#grid1'});