[jqgrid]만들기

jqgrid 시작

1. 태그에 id(예시: tGrid) 값으로 grid 선택자 지정해주어야 함.

 

2. grid 만들기

 

- $('#tGrid').jqGrid({

url : "~", //데이터를 가져오는 url

datatype : "json",

mtype: "post", //url 항목과 연관(메소드 타입을 지정 : POST 방식 or GET 방식)

postData : {key : "~", value : "~", pageNo : "~"},

height : 100,

autowidth : true,

width : 100,

colNames : ['A','B','C','D'],

colModel: [

    {name : 'title', index: 'title',  width: 150, align: 'center'},

   {name : 'longTxt' , index: 'longtxt', cellattr: function(){return " class='longtxt'"} width: 200, fixed : true, formater:  txtFormat, unformat : txtUnFormat},

   name : 'imgUrl' index: 'imgUrl', width: 150 align: 'center', sortable: false},

   {name : 'hiddenTtxt' index: 'hiddenTtxt', hidden: true} ],

jsonReader : { repeatitems : false, root : 'datas' //컨트롤러나 해당 url에서 가져오는 값 }, rowNum : 10, //그리드에 보여지는 행의 갯수 rowList : [10, 20, 30], pager : "#pager", //
pgbuttons : true,

pginput : true,

afsortname : "title",

sortorder : "desc", viewrecorders : true, //pager bar부분에 레코드 수 표시 여부(display the number of totla records from the query in the pager bar)

loadonce : false, 

gridview : true,

autoencode: true,

rownumbers : false,

multiselect : true,

multiboxonly : true,

multiselectWidth : 50,

beforeSelectRow: function(rowid, e){

   jQuery("#tGrid").jqGrid('resetSelection');

  return(true);

},

refresh : true,

shrinkToFit : false,

ondblClickRow: function(rowId, iRow, iCol, e){ }, loadComplete : function(data){ },

onSelectRow : function(rowId, status, e){ }, onSelectAll: function(rowIds, status){ jQuery("#tGrid").jqGrid('resetSelection'); return(true); },

onPaging: function(pgButton){ //페이지 버튼에 대한 이벤트 발생 }    });

 

jQuery("#tGrid").jqGrid('navGrid','#pager',{edit: false, add: false, del: false, search: false, refresh: false}); //그리드 페이지 nav 설정

 

function txtFormat(cell, optons, row){

  var result;

  if(isEmpty(cell)){ result = "";

  }else{ result = cellvalue; } erturn result; };

 

function txtUnFormat(cellvalue, options, cell){

  var result;

  if(cellvalue == "-"){

  result = "";

}else{ result = cellvalue; }

return result; };​