본문 바로가기

Javascript14

Javascript 숫자에 천단위로 콤마(,) 넣기 쉽게 숫자에 천단위에 콤마를 넣는 방법입니다. Intl.NumberFormat() 사용 var number = 1234567890.123456; // 브라우저의 Local에 따라 표시 console.log(new Intl.NumberFormat().format(number)); // 한국 Local로 표시 console.log(new Intl.NumberFormat('ko-KR').format(number)); // 독일 Local로 표시 // 독일의 경우 천단위에 "."을 소숫점을 ","로 표시함. console.log(new Intl.NumberFormat('de-DE').format(number)); // 천단위 와 소숫점 자리(5자리) 표시 // "0"을 5자리까지 채우지는 않음 console.l.. 2021. 8. 3.
[Javascript] 크롬 브라우저에서 클립보드에 문자 복사하기 크롬 브라우저에서 문자를 클립보드에 복사하는 코드입니다. 아래의 함수에 문자열을 넣으면 클립보드에 문자가 복사됩니다. function copyStringToClipboard (string) { function handler (event){ event.clipboardData.setData('text/plain', string); event.preventDefault(); document.removeEventListener('copy', handler, true); } document.addEventListener('copy', handler, true); document.execCommand('copy'); } 전체소스 2021. 7. 21.
SlickGrid 순번 컬럼 넣기 SlickGrid의 Formatter를 이용하여 순번 컬럼넣는 방법입니다. Formatter를 활용하면 조건에 따라 Sum, 색상 등의 자유롭게 사용가능합니다. 순번 Formatter 소스로 row Index는 0부터 시작이므로 1을 더해주면 순번이 됩니다. function NumberFormatter(row, cell, value, columnDef, dataContext) { return row + 1; } 위의 Formatter를 컴럼에 적용합니다. var columns = [ {id: "no", name: "No", field: "no", formatter: NumberFormatter}, ... ]; 실행하면 첫번째 컬럼에 순번이 표시됩니다. 전체 소스입니다. 2021. 7. 19.
Javascript에서 Json Object의 Key(name), Value 쉽게 얻기 Javascript에서 Json Object의 key, value를 for in 문으로 얻는 방법입니다. 간혹 key와 value를 배열에 넣어서 사용하는 경우가 있는데 아래는 해당 예제입니다. var jsonObj = {ID : 'DOCKO', PW : '1234560', NAME : '이름', AGE : 19}; var keys = []; var values = []; for(var key in jsonObj){ keys.push(key); values.push(jsonObj[key]); console.log(key + " : " + jsonObj[key]); } console.log("키 : " + keys); console.log("값 : " + values); 2021. 7. 16.
Slickgrid 멀티헤더(slickgrid-colgroup-plugin) Slickgrid에서 기본적으로 멀티헤더를 지원하지 않습니다. 그래서 멀티헤더를 지원하는 플러그인(slickgrid-colgroup-plugin)을 이용해야 합니다. Slickgrid의 멀티헤더 플러그인은 slickgrid-colgroup-plugin으로 아래의 URL을 참고하세요. https://github.com/keik/slickgrid-colgroup-plugin keik/slickgrid-colgroup-plugin SlickGrid plugin to create column group in a header. - keik/slickgrid-colgroup-plugin github.com 1. 아래의 URL에서 slick.colgroup.js 소스를 Slickgrid 폴더의 plugins에 생성합.. 2021. 7. 10.
[JS] SlickGrid 체크박스 추가 및 선택된 데이터 얻는 방법 SlickGrid에 체크박스를 추가하고 선택된 데이터를 얻는 방법에 대해서 설명합니다. 다른 Grid보다 체크박스를 넣는 것이 좀 번거롭긴 합니다. 1. 체크 박스 넣기 (1) SlickGrid에서 체크박스를 넣기 위해서는 플러그인을 사용해야 합니다. (2) Grid 컬럼의 첫번째에 체크박스를 넣습니다. var checkboxSelector = new Slick.CheckboxSelectColumn({ cssClass: "slick-cell-checkboxsel" }); columns.splice(0, 0, checkboxSelector.getColumnDefinition()) (3) Grid에 플러그인을 등록합니다. grid.registerPlugin(checkboxSelector); 2. 선택된 데이.. 2021. 5. 10.
SlickGrid 새로운 Row 추가하기 SlickGrid에 새로운 Row를 추가하는 방법입니다. 1. 새로운 Row를 추가하는 Javascript 함수를 추가합니다. function addRow(){ var data = grid.getData(); data.splice(data.length,0,{no: null, title: null, creator: null}); grid.invalidateRow(data.length); grid.updateRowCount(); grid.render(); grid.scrollRowIntoView(data.length-1) } 2. HTML 에 새로운 Row를 추가하는 버튼을 추가합니다. 3. 전체 소스입니다. 2021. 3. 26.
[JS] SlickGrid 다중정렬(Multi Sort)하기 SlickGrid의 타이틀을 클릭하며 정렬이 되는데 다중정렬을 구현해보도록 하겠습니다. SlickGrid에서 다중정렬 동작은 첫번째로 컬럼을 정렬 후 시프트 키를 누르고 타이틀을 클릭하면 다중정렬이 됩니다. 1. 컬럼 정의에 정렬 할 컬럼에 "sortable: true"를 지정합니다. var columns = [ {id: "no", name: "No", field: "no", sortable: true}, {id: "title", name: "Title", field: "title", width:300, sortable: true}, {id: "creator", name: "Creator", field: "creator", width:150, sortable: false} ]; 2. Grid 옵션에 "m.. 2021. 3. 13.
[JS] SlickGrid 단순 정렬하기 SlickGrid의 타이틀을 클릭하며 정렬이 되는데 이것을 구현하는 방법입니다. 1. 컬럼 정의에 정렬 할 컬럼에 "sortable: true"를 지정합니다. var columns = [ {id: "no", name: "No", field: "no", sortable: true}, {id: "title", name: "Title", field: "title", width:300, sortable: true}, {id: "creator", name: "Creator", field: "creator", width:150, sortable: false} ]; 2. SlickGrid의 onSort 이벤트를 아래와 같이 구현합니다. grid.onSort.subscribe(function (e, args) { da.. 2021. 3. 12.
[JS] 대용량 데이터에 성능 좋은 SlickGrid 시작하기 얼마전 프로젝트에서 DevExpress의 Web Component를 사용해서 Grid를 구현했었습니다. DevExpress는 많은 기능을 제공하고 있었지만 대용량의 데이터 처리에 문제가 발생했습니다. 컬럼이 60개, 데이터가 2000개 이상일 때 데이터 바인딩 시 화면에 너무 많은 시간이 걸리더군요. 그래서 해결책으로 찾은 것이 SlickGrid입니다. 1. 아래의 GitHub에서 SlickGrid 소스를 받으세요. https://github.com/6pac/SlickGrid 6pac/SlickGrid A lightning fast JavaScript grid/spreadsheet. Contribute to 6pac/SlickGrid development by creating an account on G.. 2021. 2. 5.
input checkbox 수정 할 수 없게 만들기 checkbox 수정 할 수 없게 하는 방법입니다.1, 2는 주의해야 하며 사용하지 않아야 할 코드입니다.3, 4는 checkbox가 수정되지 않는 코드입니다. 1. checkbox input의 속성에는 readonly가 없어 적용되지 않는다.(처리 안됨) 2. checkbox input는 수정 할 수 없으나, disabled를 지정하면 form을 submit 시 서버에 파라메터가 넘어가지 않는다.(처리 안됨) 3. onClick 이벤트에 return false를 넣어 더 이상 수정 할 수 없도록 처리한다. 4. 화면에 표시되는 checkbox input은 diabled로 처리하고, hidden input으로 서버로 파라메터를 넘긴다. 2017. 6. 19.
Javascript - getElementsByTagName, getElementsById, getElementsByClassName으로 HTML Element 찾기 자바스크립트로 HTML Element를 찾는 방법입니다. 3가지 방법으로 찾을 수 있는데 보통 ID로 찾는 document.getElementById를 가장 많이 사용합니다. 1. 태그명(Tag Name)으로 HTML Elements 찾기 - 아래의 Javascript로 HTML Elements를 찾을 수 있습니다. - 주의 할 점은 아래의 함수는 HTML Elements 배열로 리턴합니다. // Tag Name 태그 찾기 var a = document.getElementsByTagName("tagName"); 예제) 2. ID로 HTML Element 찾기 - 아래의 Javascript로 HTML Element를 찾을 수 있습니다. - 아래의 함수는 HTML Element를 리턴합니다. - 주의 할 점.. 2017. 3. 24.
Javascript - 메세지박스(Alert, Confirm, Prompt) 자바스크립터에서는 3가지 종류의 메세지박스를 지원합니다. 각각의 메세지박스는 아래와 같습니다. 1. Alert - 사용자게에 단순 정보를 표시합니다. 2. Confirm - 사용자에게 확인(OK) 또는 취소(Cancel)을 선택하게 합니다. - 예를 들면 저장하는 액션에서 "저장하겠습니까?"를 표시하고 확인 버튼을 클릭하면 저장하면 되겠죠. 3. Prompt - 사용자에게 특정 정보를 입력하기 위한 메세지박스인데, 잘 사용하지 않습니다. 2017. 2. 21.
Javascript - select 태그에 항목(option) 추가 삭제하기. 2017. 2. 8.