[Kendo UI] [Kendo UI] Kendo UI grid nested json 처리하는 쉬운 법

 

---

json 포맷 안에 있는 데이터를 추출하려고 할때 nested 된 경우가 있다.

이런 경우에 대한 것을 이전에 포스팅을 했었지만..

설명을 더 찾아본 결과 더욱 쉬운 방법이 있어서 추가적으로 포스팅한다.

 

우선 kendo grid 의 schema 파라미터 안에는 ' data ' 라는 파라미터가 있다.

이 파라미터는 특정 key의 안에 value 값들을 추출해주는 역할을 한다.

 

schema: {
   data: "data",
   total: "total"
   }
   
   

 

schema 의 data 파라미터에 추출할 값이 들어있는 key 값을 써넣고 kendoGrid 의 column 에 추출할 

key 값의 key를 써주면 자동으로 key 값의 value 를 추출해준다

 

전체 코드는 아래와 같다.

var dataSource = new kendo.data.DataSource({
	type: "jsonp",
	transport:{
		read: {
        	# 자신이 가져오고자 하는 특정 경로
			url : "http://localhost:8080/haha/getLst.json"
		}
		},
		schema: {
			data: "Lst"
			}
	});
				
				
				
$("#tbs1").kendoGrid({
	dataSource: dataSource,
	serverPaging: true,
	serverSorting: true,
	ServerFiltering: true,
	serverAggregates: true,
	pageable:{
		refresh: true,
		pageSizes: true
	},
	scrollable: true,
	columnMenu: false,
	columns:[
		{field:"id", title: '번호'}, 
		{field:"view_cnt", title: '조회수'}, 
		{field:"reg_ts", title: '작성일'}, 
		{field:"title", title: '제목'}
		]
	});
}

이런식으로 한다면 for 문을 쓰거나 이전에 서술했던 것 처럼 복잡하게 

json value 값을 추출할 필요가 없을 것이다

 

 

참고 링크

demos.telerik.com/kendo-ui/grid/grouppaging

Group paging of remote data in jQuery Grid Widget Demo | Kendo UI for jQuery