[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]);