[JQuery Plugin] JqGrid Option설정 및 API 분석.

• 1. Editable – Form 관련 구성정보. colModel에서 editable=true/false 지정가능.
• editable:true/fales,
• edittype: checkbox / textarea / select
• editoption:{readonly:true/false, size:int}
• 2. validation – 수정/추가시 validation 추가.(editrules)
•   editrules:{
•    required:true/false,
•    edithidden:true/false
•    number:true/false
•    minValue:int
•    maxValue:int
•   }
• *Custom Validation 사용. – editrules:{custom:true, custom_func:mycheck}

*validation Example 상세예제 – [New in version 3.2] Client Validation

example) editable과 validation사용 예제.

• 1) colModel의 해당 컬럼의 editable을 설정한다.
• editable:true, editoptions:{readonly:true}
• editable:true, editrules:{date:true}, formatter:’date’, datefmt:’d/m/y’ //Date 관련 editoption.
• editable:true, editrules:{number:true}, sorttype:’number’, formatter:’number’ //Number 관련 editoption.
• //DatePicker 연동 Example.
• ediable:true, editoptions:{size:12, dataInit:function(el){ $(el).datepicker({dateFormat:’yy-mm-dd’});},
• //defaultValue를 현재 시간으로 설정하는 function.
• 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;
• }

 

• 3. formatter – Column의 데이터를 나타낼때 사용할 formatter.
•   : 숫자의 , 사용이나, checkbox나, select로 나타내야할때.
•   : formatter:{‘integer’,’date’,’currency’,’checkbox’,’link’);

 

example) Formatter Example.

• formatter:’date’, formatoptions:{newformat:’d-M-Y’, datefmt:’d-M-Y’},sorttype:’date’
• formatter:’number’, sorttype:’number’, //string이나, number나 formatter를 바꾼다고 크게 달라지는가??
• formatter:’checkbox’, edittype:’checkbox’, editoptions:{value:’Yes:No’, defaultValue:’Yes’}
• formatter:’select’,edittype:’select’, editoptions:{value:’FE:FedEx;TN:TNT;IN:Intim’, defaultValue:’Intime’}

 

4. Advanced Searching Toolbar.

   jQuery(“#grid”).jqGrid(‘navGrid’,’#PagerId’,{edit:false,addfalse,del:false,search:true,refresh:true}

   ,{}//edit Options. ,{}//add options ,{}//del options ,{multipleSearch:true, multipleGroup:true}//search options.

*edit/add/del Options Example)

  {height:280, reloadAfterSubmit:false}..

 

5. Resizable Grid.

   jQuery(“#grid”).jqGrid(‘gridResize’, {minWidth:350, maxWidth:800, minHeight:80, maxHeight:350});

   //Tapestry 컴포넌트에 적용시키면, 잘 적용이 안됨..;; 됬다,안됬다함.

 

6. Group Header : 상단 Header를 colspan할 수 있다.

  jQuery(“#jqgrid”).jqGrid(‘setGroupHeaders’,{

    useColSpanStyle:true,

    groupHeaders:[

      {startColumnName:’amount’, numberOfColumns:3, titleText:’.,’},

      {startColumnName:’closed’, numberOfColumns:2, titleText:’Shiping’}

     ]

   });

   //amount=numberOfColumn:3;titleText:..;,

 

  0. JqGrid 외부 접근 API 정리.

•   1) jQuery(“#jqGridId”).jqGrid(“getGridParam”,”조회할 Option”);
•    : JqGrid Options(ex ColModel, url..) 접근 API
•    : ex) $(“#jqgrid”).jqGrid(“getGridParam”,”selrow”); //return Selected Row Id.
•   2) $(“#jqgrid”).jqGrid(“getDataIDs”);
•    : return RowData의 Id목록을 가져옴.
•   3) $(“#jqgrid”).jqGrid(“setRowData”,ids[i], {act: “tag도 가능”});
•    : 선택한 컬럼에 데이터를 넣을 수 있음.

  4) $(“#jqgrid”).jqGrid(“addRowData”, ID, rowDataJSON);

  5) $(“#jqgrid”).trigger(“reloadGrid”);

  6) $(“#jqgrid”).jqGrid(“getGridParam”,”selarrow”);

   : return (Multiple Check가 아닌) 선택한 ID목록을 Array로 반환한다.

  7) JqGrid Event – Option 설정 시 Setting 가능. 물론, setGridParam으로 제어가능.

     -gridComplete, onSelectRow(id), ondblClickRow(id)..

 

*현재 jqgrid 재구성 중이다.

 1) labels, widths, aligns, readonlys, edithiddens, *datatypes,edittypes??

- Key:value형태로 Tapestry에서 Parameter로 받은 후 (ex name:100 …)

   자바에서 JSON형태로 만들어서 JSONArray에 넣어서 JQuery로 던저준다.

- 2차로, 받아온 JSONArray<JSONObject>를 Map형태로 만들어 colModel이 for돌때 Key값으로 가져올수 있게하고싶다.

- 여기서 issue) JS에서 JSONObject를 Map형태로 변환하고 싶다는거지. 또, JSONObject의 key를 뽑아내야함.

 

2) String형태에서 , Key = <Key : Value> 구조를 만들어야한다..

- Option 구조가 Key: <Key : Value>… CSS구조로 가자. style(Key)=Key:Value;Key:Value; ,

- 만들긴 만들었는데, 사용자(개발자)가 사용법을 잘 모를 경우 indexOutOfbound가 겁나날쑤있음.

- Exception처리를 좀 해서 사용법을 알려주도록 하자.

 

3) Datepicker연동.

 

*Tapestry Block(1) – Page객체를 분리해서 Tab구조를 하고 싶음.

- Tapestry Jumpstart 5.4 에서는 tab Component를 만들고, Tab컴포넌트 body에 그림.

- 추가로, 서비스를 통해 Page객체와 block을 가져오고 이를 해당 페이지로 출력해주는 것을 할 것임.

*과거, 기본형을 사용하지 않은 Parameter의 경우, binding이 안되는 문제있었음.

*현재, String형태로 바꿨으니, 잘되는지 확인 해봐야함.

*markup(pure Tag String)으로 하거나, Block단위로 delegate to로 가져올수있음.

 

*Tapestry Block(2) – 페이지명으로 서비스단에서  Block 가져오기.

  -ComponentSource.getPage(String pageName).getComponentResources().getBlock(String blockName) retrun Block;

  -Tab별로 페이지 구성해서 Import만 시키면 되서, 간결해짐.(유지보수성도 좋지.)

  -역시 기본형으로 구현해서 Tab 컴포넌트에 적용하니, 잘 불러옴.. 굿ㅋ –> 기본형으로 구현해야되는게 아니라 아래 문제임.

   ->Page 클래스의 Render관련 함수들이 실행되지 않는다.

    ->따라서, 데이터를 초기화 할수 없어서 NullPointerError가 발생함.

 

*Parameter String 처리 Exception 추가.