[jqGrid] Composite Model Data 사용하기

서버에서 가져온 데이터(DB)를 특별히 가공하지 않고 클라이언트(JavaScript)까지 전달하고 싶을때가 있습니다!!!

사실 항상 그렇습니다. 난 개발자 이고 편하고 싶으니까...

서버 사이트는 SpringFramework + Hibernate 조합으로 개발하고 있는데, Hibernate를 사용하면서 셀렉트를 하면

List<EntityObject> 형태로 데이터셋이 만들어 집니다.

일차원 적인 구조라면 변환후 바로 jqGrid에서 사용이 가능합니다. EntityObject안에 또 컴포지트 오브젝트가 존재하면

그리고 그 오브젝트를 그리드에 표현하고 싶다면 일반적인 jqGrid구조로는 되지 않습니다.

이렇게 이야기 하니까 엄청 거창한것 같은데 예제 코드를 보면 별것 없습니다.

colModel의 sorttype과 formatter를 함수로 만들어 주고 각 상황에 맞게 처리해 주면 됩니다.

// 데이터 구조

var mydata = [
    {id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"     , test: {name: 'testName1'}},
    {id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"   , test: {name: 'testName2'}},
    {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"   , test: {name: 'testName3'}},
    {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"     , test: {name: 'testName4'}},
    {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"   , test: {name: 'testName5'}},
    {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"   , test: {name: 'testName6'}},
    {id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"     , test: {name: 'testName7'}},
    {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"   , test: {name: 'testName8'}},
    {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"   , test: {name: 'testName9'}}
];

$grid.jqGrid({
    datatype: "local",
    height: 250,
    colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes', 'test'],
    colModel:[
        {name:'id',index:'id', width:60, sorttype:"int"},
        {name:'invdate',index:'invdate', width:90, sorttype:"date"},
        {name:'name',index:'name', width:100},
        {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
        {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
        {name:'total',index:'total', width:80,align:"right",sorttype:"float"},
        {name:'note',index:'note', width:150, sortable:false},
        {
            name: 'test',
            index: 'test',
            width:150,
            sorttype: function(cell) {
                return cell['name'];
            },
            formatter: function(cellvalue, options, rowObject) {
                return cellvalue['name'];
            }
        }
    ],
    multiselect: true,
    caption: "Manipulating Array Data"
});

for(var i=0;i<=mydata.length;i++)
    $grid.jqGrid('addRowData',i+1,mydata[i]);