jqgrid 자주 사용되는 태그

 

출처 aljjabaegi.tistory.com/322

jquery jqgrid 의 모든 것, 사용법, jQuery 추천 그리드

 

1. 데이터 출력하기

<table id="table1"></table>

 

function makeTable(id, array){
     $("#"+id).jqGrid({
            datatype: "local",
            height: 250, 
            width : 630,
            colNames:['일시','속도', 'RPM', '브레이크','상태'],
            colModel:[
                {name:'fOcurDtmc', align:'right'},
                {name:'spd', align:'right'},
                {name:'rpm', align:'right'},
                {name:'brkYn', align:'right'},
                {name:'status', align:'right'}    
            ],
            caption: "DTG 데이터"
      });
 
      for(var I in array){
           $("#"+id).jqGrid('addRowData',i+1,array[i]);
      }
}
makeTable('table1', dataArray);

 

보시면 아시겠지만 내용은 어렵지 않습니다.
위의 예는 로컬 파일의 데이터를 읽어 배열을 만들고 해당 배열을 그리드로 출력하는 것입니다.
jqGrid의 데이터 타입은 json, xml, array 가 가능합니다.

var jsonString = JSON.stringify(array);

var json = JSON.parse(jsonString);

이렇게 json 타입으로 변환을 해주면 확실히 속도가 빨라지게 됩니다.
121개의 로우를 출력하는데 json은 약 0.3초, array는 약 0.6초가 걸리더군요.
(대량의 데이터 출력 시 json 타입을 사용하는 것이 좋습니다.)
json에 대해서는 Link를 참조.

JSONObject JSONArray 에 대한 이해 및 사용법

---

많이 사용되는 함수

1. jqGrid reload

jQuery("#list").trigger("reloadGrid");

{ } 안에는 grid 생성할때와 마찬가지로 여러가지 속성이 들어갈 수 있다.
다른 속성이 필요없다면 그냥 url만 적어주면 된다.

jQuery("#gridId").jqGrid("setGridParam",
               {
               url:"/test.do",
               page:1,
               mtype:"POST",
               postData:{
                   param1:param1,
                   param2:param2
               }
           }
).trigger("reloadGrid");

 

2. jqGrid reload  시 post param 넘기기

jQuery("#list").setGridParam({"postData" : {param1: '1'}}).trigger("reloadGrid");

 

3. rowid의 rowData 가져오기

var data = jQuery("#gridId").getRowData(rowid);

 

4. 동적으로 행추가

$('#jqGrid_2').addRowData("addRow", {});

 

5. 변경된 row에 대한 정보

var re = $("#list").getChangedCells('dirty');  //row를 기준으로 변경된 cell값만 가져온다
var re = $("#list").getChangedCells('all');    //변경이 일어난 row의 전체데이터를 가져옴

 

6. 선택된 rowData

var data = jQuery("#list").jqGrid('getGridParam', 'selrow');

 

7. grid 비우기

$('#list').jqGrid('clearGridData');

• jqgrid에서 수정된 셀을 한 번에 저장하고 싶을 때 사용
• cellsubmit('clientArray')로 하면 특정 이벤트를 해야 함
• remote로 하면 셀 수정 시 바로바로 저장함

10. 수정 불가하게 cell option 변경

$("#list").jqGrid('setGridParam', {cellEdit: false});

 

11. jqgrid에서 radio버튼 만드는 방법

colModel에 추가

formatter: function (cellValue, option) {
    return '<input type="radio" name="cust_id_key_yn"  />';

 

12. 특정 cell 수정 불가/가능하도록 수정

jQuery("#"+tabId).setColProp('data_fmt_cd',{editable:false});

 

13. 특정 cell 저장하기

jQuery("#"+tabId).jqGrid('saveCell', savedRow,savedCol);

 

14. 특정 row 저장하기

jQuery("#"+tabId).jqGrid('saveRow', savedRow);

 

15. 특정 cell value값 변경하기

myGrid.jqGrid('setCell', rowid, 'myColumn', newValue);

 

16. 전체 rowData 가져오기(배열)

var data = jQuery("#gridId").getRowData();

 

17. jqGrid에 데이터 밀어 넣기

• addJSONData
• validData는 List <Map <String, String>> or List <VO> 형태 모두 가능

$("#jqGrid_5")[0].addJSONData(validData); 

 

jqgrid addJSONData 사용 시 유의사항

아래와 같이 addJSONData를 통해 그리드에 데이터 삽입하는 경우

$grid[0].addJSONData(checkedData);

 var data = $grid.jqGrid("getGridParam", "data"); 시 data 변숫값이 empty로 나온다.

아래 방식으로 데이터 삽입할 것 

$grid.jqGrid('setGridParam', { 
   datatype: 'local',
   data:checkedData
}).trigger("reloadGrid");

 

18. jqGrid에서 특정 row 선택된 상태로 load

$Grid.jqGrid('setSelection','001',false);
$Grid.setSelection('001',false);
$("#grid tr").eq(1).trigger("click");
$("table").setSelection(rowId, true);

 

19. 특정 cell 데이터 가져오기

getCell(rowId, iCol)
jQuery("#jqGrid_3").getCell(ids[i], 4)

 

20. 전체 row id 가져오기(배열)

var ids = jQuery("#gridId").jqGrid('getDataIDs');

 

21. editoptions - selectbox 추가

editoptions:{  dataUrl: '/test.do',
       postData: function(rowid){
               return {data: data}
               },
               buildSelect:function (datas){
               if(typeof(datas)=='string')
        datas = $.parseJSON(datas);
var data = datas.list;
var rtSlt = '<select name="par_field">';
for ( var idx = 0 ; idx < data.length ; idx ++) {
rtSlt +='<option value="'+data[idx].VALUE+'">'+data[idx].LABEL+'</option>';
}
rtSlt +='</select>';
return rtSlt;
} }},

 

22. jqGrid selectbox selected

$("#par_field > option[value='"+$(e.target).val()+"']").attr("selected", "true");

 

23. 선택된 여러 개의 row 정보 가져오기

$( "{gridtableid}" ).jqGrid('getGridParam', 'selarrrow');

 

24. jqgrid 숫자만 입력되도록

editoptions:{    
            dataInit: function(element) {
             $(element).keyup(function(){
              var val1 = element.value;
              var num = new Number(val1);
              if(isNaN(num)){
               alert("Please enter a valid number");
               element.value = ''; }
             })
            }
           }

 

25. jqgrid 전체 rowid iterator

var list = $("#table").getDataIDs();
for(var i=0; i<list.length; i++){
    rowData = $("#table").getRowData(list[i]);
    rowData.fieldName1
    ....
}

 

26. jqgrid에서 cell에 class적용

cellattr: function(rowId, value, rowobject){
    return "class='not-editable-cell'";
}

 

27. jqgrid에서 column 명으로 iCol 가져오기

iCol = p.iColByName["ColumnName"]

 

28. jqgrid에서 특정 cell에 class 삭제

var grid = $("#jqGrid_6");
var tr = grid[0].rows.namedItem(id);
 
td = tr.cells[11];
 
$(td).removeClass("class-nml");