ax5ui / ax5ui-grid

Javascript UI Component - GRID ( Excel Grid, jqGrid, angularjs grid, jquery grid, SlickGrid, ag-grid gridify)
http://ax5.io/ax5ui-grid/demo/index.html
MIT License
99 stars 36 forks source link

Data 에 < 문자가 포함되면 표시되지 않는 거 같네요. #3

Open ghost opened 7 years ago

ghost commented 7 years ago

이곳에 질문해도 되는건가요? 잘못올린거라면 죄송합니다. GitHub 가 아직 익숙하지 않네요.

http://ax5.io/ax5ui-grid/demo/13-inline-edit.html 페이지에서 field A 컬럼값 "A" 를 "A<B" 로 바꾸면 A 로 표시되네요.

thomasJang commented 7 years ago

인라인 에디트 할 때 htmlEncode 하는 구문을 추가 하여 패치 하였습니다. 버그를 찾아주셔서 감사합니다.

ghost commented 7 years ago

"A<B" 로 직접 입력한 경우 "A<B" 로 잘 표시됩니다. 감사합니다.

그런데 다음과 같이 가져온 데이터에 < 들어가 있으면 "A" 로 표시되네요.

var sampleData = [ {a: "A<B", b: "A01", price: 1000, amount: 12, saleDt: "2016-08-29", customer: "장기영", userType: "M"}];

thomasJang commented 7 years ago

서버에서 데이터를 가져오는경우 escape 된 값을 가져오게 하는것이 좋겠습니다. 내부에서 htmlencode 처리를 해야 하는데 그리드 성능이 떨어지게 합니다.

고민이 되네요..

http://stackoverflow.com/questions/1219860/html-encoding-in-javascript-jquery htmlEncode관련된 이런 자료도 있는데요. 컬럼마다 필드 값을 가져오는 함수에. encode처리를 해줘야 하니까 부담이 됩니다.

thomasJang commented 7 years ago
{
    key: "b", label: "field  B", align: "center", editor: {type: "text"},
    formatter: function(){
                        return this.value.replace(/</g, '&lt;');
                    }
},

이런식으로 formatter 를 추가하여 처리하는 방법이 더 좋을 것 같습니다.

ghost commented 7 years ago

답변해주셔서 감사합니다.

대부분의 컬럼에 formatter 를 넣어주는 건 내키지 않아서, 다음과 같이 작성해놓았지만 이것도 좀 그렇고..

var sampleData = [
{a: "A<B", b: "A01", price: 1000, amount: 12, saleDt: "2016-08-29", customer: "장기영", userType: "M"}];

firstGrid.setData(JSON.parse(JSON.stringify(sampleData.replace(/</g, "&lt;")));
thomasJang commented 7 years ago

서버에서 json을 리턴하는 경우엔 이런 경우가 발생하지 않던데요. 어떤환경이신지 모르겠네요

thomasJang commented 7 years ago

고민고민 하다 내부에서 escape 하도록 했습니다. 그냥 쓰시면 되겠습니다.

hyunjun19 commented 7 years ago

@thomasJang 그리드에 escapeHtml 옵션을 하나 추가해서 escape를 끌수있게 설정(기본값이 true)할 수 있게 하는게 좋을 것 같아요... 누군가는 컨텐츠에 HTML을 쓰는 상황이 생기게 될 것 같은데 그런 경우 자동 escape 되어 버리면 원하는대로 표현이 안될테니까요.

 firstGrid.setConfig({
    target: $('[data-ax5grid="first-grid"]'),
    escapeHtml: true
});
thomasJang commented 7 years ago

@hyunjun19 고민을 좀 해봤는데요. html 쓰고 싶으신 경우엔 formatter 로 하시게 하는 것이 맞겠다.~ 싶었습니다. escapeHtml 옵션추가 여부는 더 고민 해보겠습니다.

ghost commented 7 years ago

@thomasJang 어떤환경인지 모르겠다고 하셔서 글 남깁니다.

insert into Variable (variableKey, variableValue, detailValue) values ('APPLICATION_TITLE', 'Kwangsik''s System', '화면내 <title> 태그에 사용되는 Text 예제) Kwangsik''s System');

화면내 태그 안에 들어갈 텍스트를 Database 에서 관리하고 있으며, 위 Query 를 이용하여 미리 Insert 합니다. JPA 기술 익혀보려고 그냥 만들어보는 Project 이고, detailValue 컬럼값은 그냥 설명이나 주석같은 값이라서 < 를 빼고 Insert 해도 되긴 합니다.</p> <p>그런데 제가 경험했던 Project 중에 기존 Data 를 함부로 Update 하기 힘든 경우가 있기도 하고, 이상한 문자가 들어있는 경우는 흔해서 질문글 한번 남겨보았습니다.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/ghost"><img src="https://avatars.githubusercontent.com/u/10137?v=4" />ghost</a> commented <strong> 7 years ago</strong> </div> <div class="markdown-body"> <p>답변해 주셔서 감사합니다. replace 없이도 < 문자가 잘 표시되네요.</p> <p>그런데 Data 에 null 이 있으면(Database 에서 가져오거나 addRow({a: null}) API를 이용하는 경우) Script Error 가 발생하는거 같네요. 이전 Version(1.3.4) 에서 field 값이 null 인 경우 컬럼정렬시 최상단이나 최하단으로 정렬되지 않고 "null" 문자열 값을 인식해 정렬되는 거 같았습니다. 이번 version(1.3.12) 에서 다시 Test 해보려 했는데 Script Error 가 보이네요.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/thomasJang"><img src="https://avatars.githubusercontent.com/u/5884902?v=4" />thomasJang</a> commented <strong> 7 years ago</strong> </div> <div class="markdown-body"> <p>픽스된 버전을 받아서 해보세요~</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/ghost"><img src="https://avatars.githubusercontent.com/u/10137?v=4" />ghost</a> commented <strong> 7 years ago</strong> </div> <div class="markdown-body"> <p>답변해 주셔서 감사합니다.</p> <p>이번 Version(1.3.14) 에서 addRow({a: null}) API 를 이용하여 Data 에 null 을 넣는 경우, 이제 오류가 발생하지 않습니다. 컬럼 정렬 또한 잘됩니다.</p> <p>그런데 Database 에서 가져온 Data 에 null 이 있는 경우 여전히 다음과 같은 Script Error 가 발생합니다.</p> <pre><code>TypeError: returnValue.replace is not a function ax5grid.js:1842</code></pre> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/thomasJang"><img src="https://avatars.githubusercontent.com/u/5884902?v=4" />thomasJang</a> commented <strong> 7 years ago</strong> </div> <div class="markdown-body"> <p>같은 상황을 재현해 보았는데. 에러가 나오지 않습니다. Database에서 가져온 Data를 보내주시겠습니까?</p> <pre><code class="language-js">{"page":{"totalPages":0,"totalElements":0,"currentPage":0,"pageSize":0},"list":[{"compCd":"C000002","createdAt":"2016-10-19T00:42:00","updatedAt":"2016-10-19T09:09:16","createdBy":"system","updatedBy":"system","compNm":"(주)롯데리아","ceoNm":"대표자","regNo":"221123512","companyNo":"1111","tel":"0212341234","businessType":"업태","businessCondition":"업종","zipCode":"01601","address":"서울 노원구 누원로 19 (상계동)","addressDetail":"1234","managerNm":"황인서","managerTel":"01046223039","managerEmail":"dlstj3039@gmail.com","useYn":"Y","delYn":"N","storeList":null,"allStoreList":null,"id":"C000002","dataStatus":"ORIGIN","__deleted__":false,"__created__":false,"__modified__":false},{"compCd":"C000004","createdAt":"2016-10-24T12:13:07","updatedAt":"2016-10-24T12:13:07","createdBy":"system","updatedBy":"system","compNm":"맥널티","ceoNm":"홍길동","regNo":"123456789","companyNo":"1223133131313","tel":"027777777","businessType":"도소매","businessCondition":"김바","zipCode":"06267","address":"서울 강남구 강남대로 240 (도곡동)","addressDetail":"맥널티","managerNm":"홍길동","managerTel":"01025456546","managerEmail":"hong@gmail.com","useYn":"Y","delYn":"N","storeList":null,"allStoreList":null,"id":"C000004","dataStatus":"ORIGIN","__deleted__":false,"__created__":false,"__modified__":false},{"compCd":"C000003","createdAt":"2016-10-24T11:21:26","updatedAt":"2016-10-24T11:21:26","createdBy":"system","updatedBy":"system","compNm":"세븐일레븐","ceoNm":"홍길동","regNo":"123456789","companyNo":"111111111111","tel":"0212345678","businessType":"편의점","businessCondition":"도소매","zipCode":"06267","address":"서울 강남구 강남대로 238 (도곡동)","addressDetail":"세븐일레븐","managerNm":"홍길동","managerTel":"01033323233","managerEmail":"hong@gmil.com","useYn":"Y","delYn":"N","storeList":null,"allStoreList":null,"id":"C000003","dataStatus":"ORIGIN","__deleted__":false,"__created__":false,"__modified__":false}]}</code></pre> <p>이런식으로 값을 올려주세요.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/ghost"><img src="https://avatars.githubusercontent.com/u/10137?v=4" />ghost</a> commented <strong> 7 years ago</strong> </div> <div class="markdown-body"> <p>죄송합니다.</p> <p>Data 가 null 이라서 Script Error 가 발생한게 아니네요. 숫자값이 들어있을때 Script Error 가 발생합니다.</p> <pre><code>TypeError: returnValue.replace is not a function ax5grid.js:1842</code></pre> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/thomasJang"><img src="https://avatars.githubusercontent.com/u/5884902?v=4" />thomasJang</a> commented <strong> 7 years ago</strong> </div> <div class="markdown-body"> <p>패치된 소스가 배포되고 있습니다. 1.3.15 를 사용하시면 문제가 해결 될 것 같습니다. 잘 되면 알려주시고.</p> <p>저희 깃헙 리포지터리에 "Star" 꼭 눌러주세요. 주변분들에게도 꼭 추천 해주시구요. 감사합니다.</p> <p>저희 오픈소스 리포지터리들은 </p> <ul> <li><a href="https://github.com/ax5ui">https://github.com/ax5ui</a></li> <li><a href="https://github.com/axboot">https://github.com/axboot</a></li> </ul> <p>입니다. 부디 잘 해결 되었으면 좋겠습니다.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/ghost"><img src="https://avatars.githubusercontent.com/u/10137?v=4" />ghost</a> commented <strong> 7 years ago</strong> </div> <div class="markdown-body"> <p>답변 감사합니다.</p> <p>이번 Version(1.3.16) 에서 Data 에 숫자값이 있을 경우에도 Script Error 없이 정상적으로 처리되네요.</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>