본문 바로가기

dhtmlx10

DHTMLX - Gantt Chart Task Link (간트차트 태스크 링크) Gantt Chart Task Link (간트차트 태스크 링크)에 대해서 간략하게 설명하겠습니다. 1. FS(Finish to Start) 선행 태스트(Task)가 끝나면(Finish) 후행 태스트(Task)가 실행되는(Start) 링크(Link)입니다. 2. SS(Start to Start) 두개의 태스크(Task)가 동시에 시작(Start)하는 링크(Link)입니다. 3. FF(Finish to Fnish) 두개의 태스트(Task)가 끝나면(Finish) 후행 태스크(Task)가 시작하는(Start) 링크(Link)입니다. 2015. 6. 26.
DHTMLX - Gantt Chart(간트차트) 다운로드 하기 몇년전 DHTMLX의 Gantt Chart를 이용하여 개발을 하려고 하였으나 기능이 빈약하여 검토만 하고 사용하지 않았습니다. 하지만 현재 DHTMLX의 Gantt Chart는 다른 사용 또는 무료 Gantt Chart보다 사용하기도 편리하면 많은 기능을 제공하고 있습니다. 아래의 이미지는 DHTMLX의 기본 Gantt Chart입니다.그럼 이제 DHTMLX의 Gantt를 어디서 다운로드 하면 되는지 알아보겠습니다. 1. DHTMLX 사이트로 접속합니다. http://www.dhtmlx.com 2. DHMTLX 사이트의 메뉴 Products > Gantt를 클릭합니다. 3. 오른쪽 상단 부분의 Download 버튼을 클릭합니다. 4. Standard Edition의 Download 버튼을 클릭하여 DHT.. 2015. 6. 26.
DHTMLX - Tree Grid 활용하기 개인적으로 DHTMLX Component에서 Tree Grid가 가장 마음에 듭니다 Tree Grid를 사용하기 위해서는 DHTMLX Suite의 dhtmlxGrid PRO를 구매해야합니다. 1. XML Data - X ML Data는 계층구조로 구성해야 합니다. ... ... ... ... ... ... Honda Plain text Text 1 0 BMW Plain text Text 1 0 325i 30,800 2.5L 1 1 M3 Coupe 47,100 3.2L 1 1 ※ row의 id 속성은 반드시 유일해야 합니다. ※ 만일 row의 id 속성이 중복되면, 하나만 표시됩니다. 2. HTML + Javascript 소스 - DHTMLX의 Grid Class인 dhtmlXGridObject를 동일하게.. 2015. 6. 11.
DHTMLX - Calendar(dhtmlXCalendarObject) 사용하기 DHTMLX에서는 Input 태크에 간단하게 달력을 붙일 수 있습니다. 아래의 소스를 참고하세요. 1. Javascript & HTML 소스 - 달력 오브젝트 : dhtmlXCalendarObject - 달력 오브젝트 생성자 : new dhtmlXCalendarObject(["Input ID #1", "Input ID #2", ...]); 달력 2. 실행화면 2015. 6. 3.
DHTMLX - Grid(dhtmlxGridObject) Cell 배경색(Background Color) 변경하기 DHTMLX Grid(dhtmlxGridObject)의 Cell 배경색을 변경하기 위해서는 2개의 함수(dhtmlxGridObject API, Cell Level API)를 사용해야합니다. 1. dhtmlxGridObject API : 특정 Cell을 얻는 함수 2. Cell Level API : Cell의 배경색을 변경하는 함수 3. Cell의 배경색 변경하는 Javascript 코드 var grid = new dhtmlXGridObject("grid"); // 중략 // Cell의 배경색 변경 grid.cells(rId, cInd).setBgColor("#ff0000"); 4. Grid를 선택하면 배경색을 변경하는 예제 - Row와 Cell의 위치를 지정하고, "Change color"라는 버튼을 클.. 2015. 5. 19.
DHTMLX - Grid(dhtmlxGridObject) 활용 웹프로그래밍을 하다보면 가장 많이 사용하는 것이 Grid입니다. 요즘은 Web Component가 좋아서 활용하면 되지만 예전에는 주로 Table Tag를 사용했었죠. 1. Grid XML(grid.xml) - XML의 Tag는 로 구성되어야합니다. - row Tag의 id 속성은 반드시 유일해야합니다. 유일하지 않으면 Grid에 중복 데이터를 표시되지 않습니다., -1500 A Time to Kill John Grisham 12.99 1 24 0 05/01/1998 1000 Blood and Smoke Stephen King 0 1 24 0 01/01/2000 2. HTML + Javascript 3. 실행 결과 2015. 5. 8.
DHTMLX - 두개의 Combo 연결하기 DHTMLX Combo는 주로 분류를 표시할 때 많이 사용합니다. 예를 들어 부서, 직원으로 구분되어 있는 두개의 Combo에 부서를 변경하면 직원 Combo의 데이터가 부서에 따라 변경되도록 개발합니다. 이렇게 두개의 Combo를 서로 연결하는 방법을 알아보겠습니다. 1. 부서 XML (department.xml) 연구소 생산기술 생산 2. 직원 XML - 연구소 직원 데이터 (employment_1.xml) 연구소-1 연구소-2 연구소-3 연구소-4 연구소-5 - 생산기술 직원 데이터 (employment_2.xml) 생산기술-1 생산기술-2 생산기술-3 - 생산 직원 데이터(employment_3.xml) 생산-1 3. HTML + JavaScript - 부서 Combo를 선택할 때마다 직원 Com.. 2015. 5. 3.
DHTMLX - Combo DHTMLX Suite의 Combo를 작업해 보겠습니다. 1. DHTMLX Suite의 js와 css를 include합니다. 2. XML - Server Side에서 XML를 만들어야 합니다. - 아래의 XML은 DHTMLX의 Combo에 표시될 데이터입니다. 연구소 생산기술 생산 구매 인사 3. HTML + JavaScript 부서 4. 실행 결과 - XML의 데이터가 Combo에 표시됩니다. 2015. 5. 3.
DHTMLX - AJAX 활용 DHTMLX는 Client와 Server간의 통신은 AJAX를 이용하고 있으며, 동기식/비동기식 통신이 가능합니다. DHTMLX에서 AJAX를 사용하는 방법을 알아보겠습니다. 1. DHTMLX Suite의 js와 css를 include합니다. 2. 동기식 AJAX - 아래의 함수를 실행하면 "[동기식 통신] 로딩 완료" > "함수 호출 완료" 순으로 Alert이 표시됩니다. // 동기식 AJAX function doSync(){ //var url = "/example/ajax/smartrend.xml"; var url = "smartrend.xml"; var loader = dhx4.ajax.getSync(url); var xml = loader.xmlDoc.responseText; alert("[동기식.. 2015. 5. 3.
DHTMLX - 소스 다운로드 http://www.dhtmlx.com에서 DHTMLX Suite 4.2를 다운로드 할 수 있습니다. 1. DHTMLX 사이트에서 아래의 이미지와 같이 소스를 다운로드 받을 수 있습니다. 2. 다운로드 받은 dhtmlxSuite_v412_std.zip을 압축해제 하면 아래와 같은 폴더 구조로 구성되어 있습니다 2015. 4. 24.