쩌리
55
2019-10-22 14:34:41
15
840

toast grid 질문좀 드립니다.ㅠㅠ


var dataSource = {
withCredentials: false,
initialRequest: true,
api: {
readData: { url: '/api/readData', method: 'GET' }
};

const grid = new tui.Grid({
el: document.getElementById('grid'),
data: dataSource,
scrollX: false,
scrollY: false,
minBodyHeight: 30,
rowHeaders: ['rowNum'],
pageOptions: {
perPage: 5
},
columns: [
{
header: '단계',
name: 'step'
},
{
header: '순번',
name: 'seq'
},
{
header: '메뉴코드',
name: 'menu_CODE'
},
{
header: '메뉴명',
name: 'menu_NAME'
},
{
header: '공통코드',
name: 'parent_MENU_CODE'
}
],
}); 
readData url로 매핑하면 json형태로 잘 반환됩니다.
하지만 컬럼별 데이터를 뿌려주질 못하네요 ㅠㅠ 딱히 로그상 에러도없어서 미칠지경입니다..ㅠㅠ
jquery사용중이고 별다른 프론트 프레임워크는 사용하지 않습니다.
0
0
  • 답변 15

  • 그만물어봐
    526
    2019-10-22 15:17:36

    dataSource 호출할때

    별도로 호출하지 말고

    tui.Grid 생성시 같이 호출 하세요~

    아래 링크에서 JavaScript 탭에서 예제 확인 가능합니다.

    https://nhn.github.io/tui.grid/latest/tutorial-example10-data-source

    만약 별도로 호출하고 싶으시다면

    tui.Grid 생성을 별도의 function 으로 만들어

    호출하는 방법으로 해야됩니다~

    (javascript Grid 라이브러리 대부분 비슷한 방식을 씁니다.)

    1
  • 쩌리
    55
    2019-10-22 15:36:20

    @그만물어봐

    답변 감사드립니다.

    Grid 생성 시 같이 호출해도 동일하네요 ㅠㅠ

    data: {
    api: {
    readData: { url: '/api/readData', method: 'GET' }
    }
    },
    0
  • 쩌리
    55
    2019-10-22 15:38:37

    JSON 형태구요

    columns: [
    {
    header: '단계',
    name: 'step'
    },
    {
    header: '순번',
    name: 'seq'
    },
    {
    header: '메뉴코드',
    name: 'menu_CODE'
    },
    {
    header: '메뉴명',
    name: 'menu_NAME'
    },
    {
    header: '공통코드',
    name: 'parent_MENU_CODE'
    }
    ]
    컬럼입니다.
    0
  • 그만물어봐
    526
    2019-10-22 15:49:12

    쩌리

    아래처럼 바꾸신거죠?

    const grid = new tui.Grid({
    	el: document.getElementById('grid'),
    	data: {
    		api: {
    			readData: {
    				url: '/api/readData',
    				method: 'GET'
    			}
    		}
    	},
    	scrollX: false,
    	scrollY: false,
    	minBodyHeight: 30,
    	rowHeaders: ['rowNum'],
    	pageOptions: {
    		perPage: 5
    	},
    	columns: [{
    			header: '단계',
    			name: 'step'
    		},
    		{
    			header: '순번',
    			name: 'seq'
    		},
    		{
    			header: '메뉴코드',
    			name: 'menu_CODE'
    		},
    		{
    			header: '메뉴명',
    			name: 'menu_NAME'
    		},
    		{
    			header: '공통코드',
    			name: 'parent_MENU_CODE'
    		}
    	],
    });


    json 자료까지 받았다면 끝났다고 보여지는데

    혹시 브라우저 개발자모드(F12)에서 Console 쪽에 오류가 있는지 확인 가능하세요?

    0
  • 쩌리
    55
    2019-10-22 15:50:46

    Console 오류 없습니다 ㅠㅠ

    return되는 데이터는 위 사진처럼 날라오구요

    RestController에서 리턴해준겁니다!

    작성해주신 코드 그대로 사용중입니다만 전혀 데이터가 뿌려지질않네요 ㅠㅠ

    0
  • 그만물어봐
    526
    2019-10-22 16:07:47

    쩌리

    그럼 우리 테스트 하나만 해보죠~!

    컨트롤러 호출하지마시고

    예시 데이터를 하나 만들어서 넣어보죠~!


    const grid = new tui.Grid({
    	el: document.getElementById('grid'),
    	data: [{
    		seq: 833,
    		step: 2,
    		menu_CODE: 'tmpTroubleList',
    		menu_NAME: '일상점검현황',
    		parent_MENU_CODE: 'TPM3'
    	}],
    	scrollX: false,
    	scrollY: false,
    	minBodyHeight: 30,
    	rowHeaders: ['rowNum'],
    	pageOptions: {
    		perPage: 5
    	},
    	columns: [{
    			header: '단계',
    			name: 'step'
    		},
    		{
    			header: '순번',
    			name: 'seq'
    		},
    		{
    			header: '메뉴코드',
    			name: 'menu_CODE'
    		},
    		{
    			header: '메뉴명',
    			name: 'menu_NAME'
    		},
    		{
    			header: '공통코드',
    			name: 'parent_MENU_CODE'
    		}
    	],
    });


    0
  • 쩌리
    55
    2019-10-22 16:15:18

    직접 박는 데이터는 잘 들어가요 ㅠㅠ그래서 더 미치겠습니다.

    0
  • 그만물어봐
    526
    2019-10-22 16:17:31

    쩌리

    음!?

    위에 코드로 넣은 건가요?

    직접 넣은 코드가 어떻게 되나요?

    0
  • 쩌리
    55
    2019-10-22 16:28:00
    data: [{
    		seq: 833,
    		step: 2,
    		menu_CODE: 'tmpTroubleList',
    		menu_NAME: '일상점검현황',
    		parent_MENU_CODE: 'TPM3'
    	}],
    이 부분처럼 직접 데이터에 name값 맞춰서 넣으면 리스트는 나옵니다.
    하지만 컨트롤러에서 ResponeseBody던, RestController던
    뭔 방법을써도 리스트가 안나와요 ㅠㅠ JSON형태로 정상적으로 리턴되는데요
    0
  • 그만물어봐
    526
    2019-10-22 16:33:19

    쩌리

    그럼 수상한 부분이 딱 한군대 있네요...

    json 가져올때

    데이터를 싱글 쿼터로 바꿔보죠

    이게 맞으면 좋겠네요ㅎㅎ

    0
  • 쩌리
    55
    2019-10-22 16:36:37

    그만물어봐

    싱글쿼터로 어디부분을 바꿔보면될까요?

    자바는 무조건 더블쿼터로 묶어버리는걸로 알고있는데요...

    0
  • 그만물어봐
    526
    2019-10-22 16:49:17

    쩌리

    맞습니다.

    json 타입은 더블 쿼터가 표준인데...

    그곳 밖에 의심되는 부분이 없네요...

    아니면 하나의 데이터를 넣을때

    더블 쿼터로 바꿔서 넣어보세요.

    이때 안된다면 쿼터 문제가 맞을것 같네요.


    data: [{
    		seq: 833,
    		step: 2,
    		menu_CODE: "tmpTroubleList",
    		menu_NAME: "일상점검현황",
    		parent_MENU_CODE: "TPM3"
    	}],
    0
  • 쩌리
    55
    2019-10-22 16:51:46

    그만물어봐

    아래 코드도 잘 들어가네요. ㅠㅠㅠ

    data: [{
    		seq: 833,
    		step: 2,
    		menu_CODE: "tmpTroubleList",
    		menu_NAME: "일상점검현황",
    		parent_MENU_CODE: "TPM3"
    	}],


    0
  • 그만물어봐
    526
    2019-10-22 17:19:01

    쩌리

    허허....

    그렇다면 js 쪽은 문제가 없는듯 한데....

    혹시 다른부분에 문제가 있을 수 있으니

    toast 쪽에 문의 하는게 빠르겠네요~

    https://github.com/nhn/tui.grid/issues

    도움이 안되었네요 ㅠㅠ


    0
  • 그만물어봐
    526
    2019-10-22 17:29:56

    쩌리

    검색을 하다보니....

    toast 에서 json type 을 지원한다는 내용이 없는 것 같네요 ㄷㄷ;

    이슈 게시판에 물어보면 쉽게 알 수 있겠지만...

    혹시 모르니

    json type 객체로 되어 있다면

    json string 으로 변환 해보는것도....

    https://offbyone.tistory.com/373

    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.