Dhtmlx 그리드 컨트롤 및 DhtmlxTree

- jsp
.
.
.
<p>Grid Sample Test!</p>
<div style="background-color: white; overflow: hidden; width: 500; text-align: right; margin-bottom: 10px">
     <input type="button" value="추가" onclick="javas-ript: AddRow()" style="cursor:pointer; margin-right: 10px" />
     <input type="button" value="삭제 " onclick="javas-ript: DelRow()" style="cursor:pointer" />
</div>
<div id="gridbox" style="background-color: white; overflow: hidden; width: 500; height: 385;"></div>
.
.
.


- Script
.
.
.
  mygrid = new dhtmlXGridObject('gridbox');
  mygrid.setImagePath("<%=xGrid %>codebase/imgs/");
  mygrid.setHeader('순번,체크박스,라디오버튼,입력창,셀렉트박스');
  
  // 셀렉트 박스 리스트 Ex
  mygrid.getCombo(4).put("all","--전체--");
  mygrid.getCombo(4).put("red","빨강");
  mygrid.getCombo(4).put("blue","파랑");
  mygrid.getCombo(4).put("green","녹색");
  
  mygrid.setInitWidths("80,80,100,150,150");
  mygrid.setColAlign("center,center,center,center,center");
  mygrid.setColTypes("ro,ch,ra,ed,coro");
  mygrid.setColumnColor("#ECF9FF,#FFFFFF,#FFFFFF,#FFFFFF,#FFFFFF");
  mygrid.setColSorting("int");
  mygrid.setSkin("light");
  //mygrid.enableEditEvents(true,true,true);
  mygrid.enableMultiselect(true);
  
  mygrid.init();
  mygrid.splitAt(2);
  mygrid.attachEvent("onCheckbox",doOnCheck);
.
.
.

- Row 추가 이벤트
.
.
.
     // Row 추가
     function AddRow() {
          var uid = mygrid.getRowsNum()+1;
   
          mygrid.addRow(uid,uid+",,,입력해보세요,클릭해보세요",mygrid.getRowsNum());
          mygrid.selectRow(mygrid.getRowIndex(uid));
    }
.
.
.

- Row 삭제 이벤트
.
.
.
  // Row 삭제
  function DelRow() {
      mygrid.deleteRow(mygrid.getSelectedId());
  }
.
.
.
- Check 이벤트
.
.
.
     // Check 이벤트
     function doOnCheck(id, val) {
           alert("cellId : " + id + " || value : " + val);
     }
.
.
.

- Cell 에디트 이벤트
.
.
.
     // Cell 이벤트
     mygrid.attachEvent("onEditCell",
           function(stage,rowId,cellIndex,newValue,oldValue){
              if(stage == 2 && newValue != oldValue && newValue != "" && cellIndex == 4) {
                  mygrid.setRowColor(rowId, newValue);
              }

              return true;
          }
    )
.
.
.

이 외에 많은 API 들이 존재하지만 기본적으로 많이 쓰이는 이벤트.

- jsp
.
.
.
<p>Tree Sample Test!</p>
 <div id="treeboxbox_tree" setImagePath="<%=xTree%>codebase/imgs/csh_bluebooks/" class="dhtmlxTree" style="width:400; height:200; background-color:#f5f5f5; border :1px solid Silver; margin-top:10px">
.
.
.

- Script
.
.
.
  var tree = new dhtmlXTreeObject('treeboxbox_tree', '100%', '100%', 0);
  tree.setSkin('dhx_skyblue');
  tree.setImagePath("<%=xTree%>codebase/imgs/csh_bluebooks/");
  tree.enableDragAndDrop(true);
  tree.loadCSVString("1,0,테스트1\n2,0,테스트2\n3,0,테스트3\n4,2,테스트2-1\n5,3,테스트3-1\n5,3,테스트3-2");
.
.
.

Tree 는 Json 형식으로 데이터만 밀어 넣어주면 된다.