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

Question

var dataSource &#61; { withCredentials: false, initialRequest: true, api: { readData: { url: '/api/readData', method: 'GET' } }; const grid &#61; 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사용중이고 별다른 프론트 프레임워크는 사용하지 않습니다.

그만물어봐 · Accepted Answer

dataSource 호출할때별도로 호출하지 말고tui.Grid 생성시 같이 호출 하세요~아래 링크에서 JavaScript 탭에서 예제 확인 가능합니다.https://nhn.github.io/tui.grid/latest/tutorial-example10-data-source만약 별도로 호출하고 싶으시다면tui.Grid 생성을 별도의 function 으로 만들어호출하는 방법으로 해야됩니다~(javascript Grid 라이브러리 대부분 비슷한 방식을 씁니다.)

쩌리 · Answer

&#64;그만물어봐답변 감사드립니다.Grid 생성 시 같이 호출해도 동일하네요 ㅠㅠdata: { api: { readData: { url: '/api/readData', method: 'GET' } } },

쩌리 · Answer

JSON 형태구요 columns: [ { header: '단계', name: 'step' }, { header: '순번', name: 'seq' }, { header: '메뉴코드', name: 'menu_CODE' }, { header: '메뉴명', name: 'menu_NAME' }, { header: '공통코드', name: 'parent_MENU_CODE' } ]컬럼입니다.

그만물어봐 · Answer

쩌리아래처럼 바꾸신거죠?const grid &#61; 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 쪽에 오류가 있는지 확인 가능하세요?

쩌리 · Answer

Console 오류 없습니다 ㅠㅠreturn되는 데이터는 위 사진처럼 날라오구요RestController에서 리턴해준겁니다!작성해주신 코드 그대로 사용중입니다만 전혀 데이터가 뿌려지질않네요 ㅠㅠ

그만물어봐 · Answer

쩌리그럼 우리 테스트 하나만 해보죠~!컨트롤러 호출하지마시고예시 데이터를 하나 만들어서 넣어보죠~! const grid &#61; 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' } ], });

쩌리 · Answer

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

그만물어봐 · Answer

쩌리음!?위에 코드로 넣은 건가요?직접 넣은 코드가 어떻게 되나요?

쩌리 · Answer

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

그만물어봐 · Answer

쩌리그럼 수상한 부분이 딱 한군대 있네요...json 가져올때데이터를 싱글 쿼터로 바꿔보죠이게 맞으면 좋겠네요ㅎㅎ

쩌리 · Answer

그만물어봐싱글쿼터로 어디부분을 바꿔보면될까요?자바는 무조건 더블쿼터로 묶어버리는걸로 알고있는데요...

그만물어봐 · Answer

쩌리맞습니다.json 타입은 더블 쿼터가 표준인데...그곳 밖에 의심되는 부분이 없네요...아니면 하나의 데이터를 넣을때더블 쿼터로 바꿔서 넣어보세요.이때 안된다면 쿼터 문제가 맞을것 같네요. data: [{ seq: 833, step: 2, menu_CODE: &#34;tmpTroubleList&#34;, menu_NAME: &#34;일상점검현황&#34;, parent_MENU_CODE: &#34;TPM3&#34; }],

쩌리 · Answer

그만물어봐아래 코드도 잘 들어가네요. ㅠㅠㅠdata: [{ seq: 833, step: 2, menu_CODE: &#34;tmpTroubleList&#34;, menu_NAME: &#34;일상점검현황&#34;, parent_MENU_CODE: &#34;TPM3&#34; }],

그만물어봐 · Answer

쩌리허허....그렇다면 js 쪽은 문제가 없는듯 한데....혹시 다른부분에 문제가 있을 수 있으니toast 쪽에 문의 하는게 빠르겠네요~https://github.com/nhn/tui.grid/issues도움이 안되었네요 ㅠㅠ

그만물어봐 · Answer

쩌리검색을 하다보니....toast 에서 json type 을 지원한다는 내용이 없는 것 같네요 ㄷㄷ;이슈 게시판에 물어보면 쉽게 알 수 있겠지만...혹시 모르니json type 객체로 되어 있다면json string 으로 변환 해보는것도....https://offbyone.tistory.com/373

f10024 · Answer

toast grid 를 쓸일이 있어 답글 남겨봅니다.api 에서 값을 넘겨 줄시아래의 형식으로 데이터를 넘겨 주시면 됩니다.contents : db 조회 값result : 성공, 실패pagination : 페이징저도 api 형식을 몰라 삽질을 좀 하였네요 ㅎㅎ { &#34;result&#34;: true, &#34;data&#34;: { &#34;contents&#34;: [], &#34;pagination&#34;: { &#34;page&#34;: 1, &#34;totalCount&#34;: 100 } } }

dhc · Answer

f10024 님 감사합니다

isaja · Answer

$.ajax({ type : 'GET', dataType : 'JSON', url : &#34;/listdata.do&#34;, success : function(data) { grid.resetData(data); } });api readData 호출시 정상적으로 호출되는거 같지만 정상적으로 json형태 데이터로 반환해서 매핑이 안되는거 같네요.번외지만 이렇게 하면 나오네요.

f10024 · Answer

&#64;isaja 님 안녕하세요 이제야 글을 봤네요.아마 데이터를 api 쪽에서 넘겨 주시면 잘될듯 한데요 . json 으로요 예전에 했던 기억을 되살려 보면 - api 코드 -아래를 보시면result : truedata 안에 contents 에 데이터를 넣어서 보내 주었네요.아래 코드는 nodejs 입니다.exports.getCompanys &#61; (req, res) &#61;> { admin.getCompanys(req, function(err, data){ if(err){ res.status(500).send({ message : err.message }); } else { var resData &#61; { result: true, data : { contents : data } } res.status(200).send(resData); } }); }; - 그리드 설정시 -columns 을 보시면 name 부분에 api 키값을 맞춰주었는데요.이렇게 하시면 그리드 데이터가 생성 됩니다. function initGrid() { grid &#61; new tui.Grid({ el: document.getElementById('grid'), header: { height: 40 }, rowHeaders: ['checkbox'], editingEvent : 'click', data: { api: { readData: { url: 'http://localhost:8081/adminApi/companys', method: 'GET' } } }, // scrollX: false, // scrollY: false, // minBodyHeight: 30, // rowHeaders: ['rowNum'], // 번호 보여주기 columns: [ { header: '제조사 아이디', name: 'COMPANY_ID', // editor:{ // type:'text', // disable:true // } }, { header: '제조사 명', name: 'COMPANY_NAME', editor:{ type:'text' } }, { header: '제조사 타입', name: 'COMPANY_TYPE', formatter: 'listItemText', editor: { type: 'select', options: { listItems : codeDetail } } }, ], }); } // init Grid

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

19개의 답변

Q&A 목록