본문 바로가기

Javascript29

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) 추가 삭제하기. function add(){ var today = new Date(); // select 태그의 option을 정의한다. var op = new Option(); op.value = today; op.text = today; // select 태그에 생성 된 option을 넣는다. document.forms["frm"].sel.add(op);}function clearAll(){ // select 태그의 option을 전체 삭제한다. document.forms["frm"].sel.options.length = 0;} 2017. 2. 8.