developer's room: 4월 2016

-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 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");
 }
});

developer's room

2016년 4월 24일 일요일

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

2016년 4월 10일 일요일

jqGrid 기초 그리드를 만들어보자.