서버에서 가져온 데이터(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]);


저작자 표시 비영리 변경 금지
신고

'JavaScript > jqGrid' 카테고리의 다른 글

[jqGrid] Composite Model Data 사용하기  (0) 2013.12.18
[jqGrid] Homepage and Manual  (0) 2013.11.12
[jqGrid] Grid DataSet 만들기 MultiSelect 포함  (0) 2011.12.19
posted by 뚱2

데모페이지 : http://trirand.com/blog/jqgrid/jqgrid.html

그리드 옵션 : http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options

메소드 : http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods

이벤트 : http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events

ColModel 옵션 : http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options

데이터 조작 : http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#json_data

Form Editing : http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing

작성방법 : http://www.trirand.com/jqgridwiki/doku.php?id=wiki:conventions

download : http://www.trirand.com/jqgridwiki/doku.php?id=wiki:download


jqGrid With Java : http://www.sunilgulabani.com/2013/06/jqgrid-example-with-java.html

jqGrid workflow : http://marobiana.tistory.com/26


저작자 표시 비영리 변경 금지
신고

'JavaScript > jqGrid' 카테고리의 다른 글

[jqGrid] Composite Model Data 사용하기  (0) 2013.12.18
[jqGrid] Homepage and Manual  (0) 2013.11.12
[jqGrid] Grid DataSet 만들기 MultiSelect 포함  (0) 2011.12.19
posted by 뚱2

/**
 * jqGrid 
 * desc   : 선택된 Rows를 Dataset Array를 만들어준다.
 *          isAll에 true를 넣어주면 전체 데이터를 가져온다.
 * return : array
 * 
 * comment : 데이터가 선택되지 않으면 빈 배열을 리턴한다.
 */
jQuery.fn.getArrayFromGridRow = function(isAll) {
	var _isAll = false;
	if ( arguments.length > 0 && isAll == true ) {
		_isAll = true;
	}

    var arrayData = [];	
	try {
        var $grid = this;
        
        // jqGird검사
        if ( $grid.jqGrid == null || $grid.jqGrid == undefined ) {
            return arrayData;
        }
        
        var selRows = ( _isAll ? $grid.getDataIDs() : $grid.getGridParam("selarrrow") );
        $.each(selRows, function(index, value) {
            arrayData[index] = $grid.getRowData(value);
        });
	}
	catch(e) {
		alert(e.message);
		return arrayData;
	}
	
    return arrayData;
};

/**
 * jqGrid 
 * desc   : 현재 선택된 Rows를 Dataset Array를 만들어준다.
 * return : array
 */
jQuery.fn.getArrayFromMultiSelectedRow = function() {
	return this.getArrayFromGridRow(false);
};

/**
 * jqGrid 
 * desc   : 전체 row를 Dataset Array를 만들어준다.
 * return : array
 */
jQuery.fn.getArrayFromAllRow = function() {
	return this.getArrayFromGridRow(true);
};

저작자 표시
신고

'JavaScript > jqGrid' 카테고리의 다른 글

[jqGrid] Composite Model Data 사용하기  (0) 2013.12.18
[jqGrid] Homepage and Manual  (0) 2013.11.12
[jqGrid] Grid DataSet 만들기 MultiSelect 포함  (0) 2011.12.19
posted by 뚱2