2016년 4월 24일 일요일

jqGrid 사용예, 함수, 이벤트, 옵션 정리

-jqGrid 옵션들-
loadtext: "Processing"
hiddengrid: true
forceFit : true,
mtype: "POST",
colNames:["id","Account","Acc Num", "Debit", "Credit","Balance"],
colModel:[ {name:'id',index:'id', width:1,hidden:true,key:true}, 
treeGrid: true, ExpandColumn : 'name',
url: 'server.php?q=tree',
treedatatype: "xml",
datatype: "local" (local, json, xml)
rowNum:10, rowList:[10,20,30],
pager: '#pcelltbl',
sortname: 'id',
shrinkToFit :false,
rowList:[10,20,30],
viewrecords: true,
sortorder: "desc",
scroll: true,
editurl:"someurl.php",height:'auto' , 80
width:100
pager: "#ptreegrid",
caption: "Treegrid example"
treeGridModel : 'adjacency',
ExpandColumn : 'name',
autowidth: true,
rownumbers: true,
rowTotal: 50,
loadonce:true,
gridview: true, - 그리드에 data 셋팅 성능을 높여준다 하지만

treeGrid, subGrid and afterInsertRow (event) 에는 사용할 수없다.
footerrow : true, userDataOnFooter : true, altRows : true - 그리드 합계 표시할때 유용하다
-> formatter: 'number' 이어야 함
direction: "rtl", recordpos : "left",
scroll: 1,

// define a model where all fields are not sortable,
// this setting overwrite the deafult one for all fields
cmTemplate: {sortable:false},

multiSort: true,

// define the icons in subgrid
subGridOptions: { "plusicon" : "ui-icon-triangle-1-e", "minusicon" : "ui-icon-triangle-1-s", "openicon" : "ui-icon-arrowreturn-1-e" , selectOnExpand" : true },
// select the row when the expand column is clicked "

-colModel 옵션들-
name:id
index:id
width:55
editable: true , editable:false
align:"right"
hidden:true,
key:true
sortable:false,
sorttype:"float"  (int, date)
formatter: 'integer'
formatter:'date'

formatter: 'link'

formatter:'currency'
formatter:'currency',formatoptions:{thousandsSeparator:","}
formatter:'currency', formatoptions:{prefix:"€"}

formatter:'checkbox'
formatter:'date', formatoptions:{srcformat:"Y-m-d",newformat:"d-M-Y"}
formoptions:{ rowpos:5,elmprefix:"    "}

grouping:true, groupingView : { groupField : ['name'] },

groupingView : { groupField : ['name'], groupSummary : [true], groupColumnShow : [true], groupText : ['<b>{0}</b>'], groupCollapse : false, groupOrder: ['asc'] },

cellattr: function(rowId, value, rowObject, colModel, arrData) { return ' colspan=2'; },
cellattr: function(rowId, value, rowObject, colModel, arrData) { return " style=display:none; "; }
formatter:'actions', formatoptions:{keys:true}},
searchoptions:{sopt:['eq','ne','le','lt','gt','ge']}


-다양한 컬럼 editoptions-

editoptions:{size:"20",maxlength:"30"}
edittype:"checkbox",editoptions: {value:"Yes:No"}
edittype:"select",editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}
edittype:"textarea", editoptions:{rows:"2",cols:"10"}
editoptions:{readonly:true,size:10}
editoptions:{size:10},editrules:{required:true}
editoptions:{size:25}

{name: 'ship_via', index: 'ship_via', width: 100, align: 'center',
formatter: 'select', edittype: 'select',
editoptions: {value: 'FE:FedEx;TN:TNT;IN:Intim', defaultValue: 'Intime'}},

{name: 'closed', index: 'closed', width: 75, align: 'center', formatter: 'checkbox', edittype: 'checkbox', editoptions: {value: 'Yes:No', defaultValue: 'Yes'}},

-다양한 함수 활용-
$("#list").jqGrid('clearGridData', true);
var scrollPosition = 0;
scrollPosition = jQuery("#list").closest(".ui-jqgrid-bdiv").scrollTop();
$("#list").closest(".ui-jqgrid-bdiv").scrollTop(scrollPosition);

var su=$("#list").jqGrid('delRowData',12); 
var su=$("#list").jqGrid('setRowData',11,{amount:"333.00", total:"366.00"});


var datarow = {id:"99",invdate:2016-04-24",name:"test3",total:"430.00"}; 


var su=$("#list").jqGrid('addRowData',99,datarow); 


for(var i=0;i < mydata2.length;i++) {
 $("#list").jqGrid('addRowData',mydata[i].id, mydata[i]); 


}


$('#list').jqGrid('getGridParam','url') - grid option의 정보를 가져온다.


$("#list").jqGrid('setGridParam',{url:"server.php?q=2"}).trigger("reloadGrid"); 


$("#list").jqGrid('setCaption',"New Caption");


$("#list").jqGrid('sortGrid',"name",false);


var s = jQuery("#list").jqGrid('getGridParam','selarrrow'); - 선택된 모든 로우


$("#list").jqGrid('setSelection',"13"); - multiSelect ! - 해당 로우 선택


var ids = jQuery("#list").jqGrid('getDataIDs');
for(var i=0;i < ids.length;i++){}


 


$("#list").jqGrid('navGrid','hideCol',"tax"); 컬럼 숨기기


$("#list").jqGrid('navGrid','showCol',"tax"); 컴럼 보여주기


$("#list").jqGrid('hideCol',["amount","tax"]);


$("#list").jqGrid('showCol',["amount","tax"]);


$("#list").jqGrid('editRow',"13"); - 해당 로우 편집가능


$("#list").jqGrid('saveRow',"13"); - 해당 로우 저장


$("#list").jqGrid('restoreRow',"13");  - 해당 로우 편집 취소


$('#list').jqGrid('editRow',id,true)


var lastsel = id; 


$('#list').jqGrid('restoreRow',lastsel); 


$("#list").jqGrid('setCell',"12","tax","",{'font-weight': 'bold',color: 'red','text-align':'center'}); 


$("#list").jqGrid('setLabel',"tax","Tax Amt",{'font-weight': 'bold','font-style': 'italic'}); 



$("#xmlist1").jqGrid('jqGridImport',{impurl:"testxml.xml"});

$(this).hide(); 





$("#colch").jqGrid('navGrid','#pcolch',add:false,edit:false,del:false,search:false,refresh:false}); $("#colch").jqGrid('navButtonAdd','#pcolch',{
    caption: "Columns",
    title: "Reorder Columns",
    onClickButton : function (){
        jQuery("#colch").jqGrid('columnChooser');
    }





-postdata 활용-




$("#list").jqGrid('setPostData',{q:1,param1:"p1"});


$("#list").jqGrid('setPostDataItem',"param2","I'w new value"); 


var pd =$("#list").jqGrid('getPostData'); 

$("#list").jqGrid('getPostDataItem',"rows")

$("#list").jqGrid('removePostDataItem',"param1");


$("#list").jqGrid('resetSelection'); 


$("#list").jqGrid('setGridParam',{
  onSelectRow : function(id) {
              $("#resp").html("I'm row number: "+id +"").css("color","red");
} 



jQuery("#gwidth").jqGrid('setGridWidth',nw);

jQuery("#gwidth").jqGrid('setGridHeight',nh);

table to Grid -> 테이블을 jqGrid 로 convert 할 수있다. 와우!

tableToGrid("#mytable"); -> table id를 넘겨주자



컬럼 픽스기능이 필요할때 쓰자

{name: 'id', index: 'id', width: 60, align: 'center', sorttype: 'date', frozen : true},
         {name: 'name', index: 'name', width: 100, frozen : true },

jQuery("#gfrc1").jqGrid('setFrozenColumns');



//컬럼 픽스기능 그룹헤더 포함시 

jQuery("#gfrc2").jqGrid('setGroupHeaders', {
  useColSpanStyle: false, 
  groupHeaders:[
 {startColumnName: 'id', numberOfColumns: 2, titleText: 'Client Details'}
  ] 
});
jQuery("#gfrc2").jqGrid('setFrozenColumns'); 




function 사용하기 - 옵션에 주면 된다.


datatype : function  (pdata) {
 $.ajax({
 url:'server.php?q=2',
 data:pdata,
 dataType:"json",
 complete: function(jsondata,stat){
  if(stat=="success") {
  var thegrid = jQuery("#listdt")[0];
  thegrid.addJSONData(eval("("+jsondata.responseText+")"))
  }
 }
   });
},
ondblClickRow: function(id){ alert("You double click row with id: "+id);}


onSelectRow: function(ids){alert("You selected row ");}


subGridRowExpanded: function(subgrid_id, row_id) {}


subGridRowColapsed: function(subgrid_id, row_id) {} 


loadComplete: function(){}


afterInsertRow: function(rowid, aData){
switch (aData.name) {
    case 'Client 1':
     $("#list").jqGrid('setCell',rowid,'total','',{color:'green'});
     break; 


}


loadError : function(xhr,st,err) {
 $("#list").html("Type: "+st+"; Response: "+ xhr.status + " "+xhr.statusText);
} 




onSortCol :function (nm,index) {
  if (nm=='invdate') {
   jQuery("#gwidth").jqGrid('setGridParam',{sortname:'name'});
  }
 },
onHeaderClick: function (stat) {
     if(stat == 'visible' ){
      jQuery("#filter").css("display","none");
     }
} 




cellEdit: true,
cellsubmit: 'clientArray',
afterEditCell: function (id,name,val,iRow,iCol){}


afterSaveCell : function(rowid,name,val,iRow,iCol) {} 


-Costom Validation 활용 -


function mycheck(value) {
 if(parseFloat(value) >= 200 && parseFloat(value)<=300) {
  return [true,"",""];
 } else {
  return [false,"The value should be between 200 and 300!",""];
 }
} 


{name:'amount',editable:true,editrules:{custom:true,custom_func:mycheck}}, 


 



function my_input(value, options) {

    return $("<input type='text' size='10' value='"+value+"'/>");
} 

function my_value(value) {
 return "My value: "+value.val();
}

컬럼옵션

{
   name:'name',
   index:'name',
   width:100,
   editable:true,

edittype:'custom',

editoptions:{
    custom_element:my_input,
    custom_value:my_value
   }
  },



ajax 관련옵션

ajaxGridOptions : {type:"POST"},

serializeGridData : function(postdata) {
  postdata.page = 1;
  return postdata;
 },



그리드 키보드 이벤트



// Bind the navigation and set the onEnter event

jQuery("#keynav").jqGrid('bindKeys', {"onEnter":function( rowid )

{ alert("You enter a row with id:"+rowid)} } );





-json mapping- 



jsonmap:"invdate"



-datepicker-  themes/ui.datepicker.css,js/ui.datepicker.js 함께 사용

jQuery('#rowed6').jqGrid('editRow',id,true,pickdates);


function pickdates(id){
 jQuery("#"+id+"_sdate","#rowed6").datepicker({dateFormat:"yy-mm-dd"});
}


-live search 사용하기-


jQuery("#grid_id").searchGrid( options ); 


$("#bsdata").click(function(){
 jQuery("#search").jqGrid('searchGrid',
  {sopt:['cn','bw','eq','ne','lt','gt','ew']}
);


-live editrow사용하기
jQuery("#grid_id").jqGrid('editGridRow', the_row_id, options )  


var gr = jQuery("#editgrid").jqGrid('getGridParam','selrow');
if( gr != null ) 


jQuery("#editgrid").jqGrid('editGridRow',gr,{height:280,reloadAfterSubmit:false}); 


jQuery("#editgrid").jqGrid('editGridRow',"new",{height:280,reloadAfterSubmit:false}); 


jQuery("#delgrid").jqGrid('delGridRow',gr,{reloadAfterSubmit:false});



-팝업사용시 유용할 것 같다-




jQuery("#custbut").jqGrid('GridToForm',gsr,"#order")


jQuery("#custbut").jqGrid('FormToGrid',invid,"#order"); 




 


example : 




jQuery("#custbut").jqGrid('navButtonAdd','#pcustbut',{caption:"Edit",
 onClickButton:function(){
  var gsr = jQuery("#custbut").jqGrid('getGridParam','selrow');
  if(gsr){
   jQuery("#custbut").jqGrid('GridToForm',gsr,"#order");
  } else {
   alert("Please select Row")
  }       
 } 
});
jQuery("#savedata").click(function(){
 var invid = jQuery("#invid").val();
 if(invid) {
  jQuery("#custbut").jqGrid('FormToGrid',invid,"#order");
 }
});


 












작성자:



시간:







































댓글 없음:















댓글 쓰기


















        

      









피드 구독하기:
댓글 (Atom)