[Plugin / EasyUi] Drag Drop Tree Nodes

 

안녕하세요. 우디코드 입니다:)

오늘은 제가 개발하면서 사용했던 EasyUi 플러그인에 대해 설명드리고

혹시 tree 기능을 활용하실 분들을 위해 제가 상황별로 사용했던 옵션과 그 소스를 설명드리도록 하겠습니다.

 

 

1. plugin 정보

# 플러그인명: EasyUi
# 내용: 웹 페이지 개발에 필요한 checkbox, treegrid 등 다양한 기능 존재
# 참고 url : www.jeasyui.com/demo/main/index.php?plugin=Tree&theme=material-teal&dir=ltr&pitem=&sort=asc#

 

2. Tree 설명 및 사용방법

# 기능설명 : 웹 페이지의 트리 구조에 계층 적 데이터를 표시하고,
                 사용자에게확장, 축소, 드래그 앤 드롭, 편집 및 비동기 로딩 기능을 제공 

# 사용방법

// css
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
// javascript
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>

 

2. 상황별 활용했던 tree 옵션

3.1 onDragOver 

# 적용상황 : 트리노드를 드래그앤 드롭시 노드의 depth를 제한

// 놓을 수있는 대상 행 위로 행을 끌면 발생하고, 놓기를 거부하려면 false를 반환
onDragOver: function (node) { 
    // 드래그앤드롭해서 놓을 노드의 depth를 구함
	var depth = $(node).parents("ul").length;

	// depth가 3보다 클 경우 false를 반환해서 드래그앤드롭 비활성화 시킴
	if (parseInt(depth) > 3) {
		return false;
	}
}

 

3.2 onContextMenu

# 적용상황 : 트리노드를 마우스 오른쪽 버튼 클릭시 노드 추가, 제거 등의 컨텍스트 메뉴 표시

// 노드를 마우스 오른쪽 버튼으로 클릭하면 실행
onContextMenu: function (e, node) { 
	e.preventDefault();
	// 선택된 노드
	$('ul#category-tree').tree('select', node.target);
	// 컨텍스트 메뉴 표시
	$('div#mm').menu('show', {
		left: e.pageX,
		top: e.pageY
	});
}

 

3.3 onBeforeSelect

# 적용상황 : 위의 onContextMenu를 통해 컨텍스트 메뉴를 표시할 때, 노드의 최하위 노드에서는 추가버튼 안보이게

// 노드가 선택되기 전에 실행되며이 선택 작업을 취소하려면 false를 반환
onBeforeSelect: function (node) { 
	// 현재 노드 depth 구함
	var depth = $(node.target).parents("ul").length;
	// depth가 3보다 클경우 추가버튼 안보이게
    if (parseInt(depth) > 3) {
		$("div#mm #btn_add").css("display", "none");
	}
	else {
		$("div#mm #btn_add").css("display", "block");
	}
}

 

3.4 onDblClick

# 적용상황 : 노드를 더블클릭 할경우 노드 명칭 변경

// 노드를 더블 클릭하면 실행
onDblClick: function (node) { 
	// 더블 클릭한 노드 명칭 변경 
	$(this).tree('beginEdit', node.target);
}

 

3.4 append

# 적용상황 : 노드 하위에 노드추가

<div id="mm" class="easyui-menu" style="width : 120px;">
	<div id="btn_add" onclick="appendRow(this)" data-options="iconCls:'icon-add'"> 추가 </div>
	<div id="btn_remove" onclick="deleteRow(this);" data-options="iconCls:'icon-remove'"> 제거 </div>
</div>

/* 하위에 노드 추가 */
function appendRow() {
	// 하위에 노드 추가할 노드 정보 불러옴
    var selected = $('ul#category-tree').tree('getSelected');
    // 하위에 노드 추가
    $('ul#category-tree').tree('append', {
        parent: selected.target,
        data: [{
            id: 23,
            text: '새 카테고리'
        }]
    });
}

 

3.4 remove

# 적용상황 : 노드 삭제, 하위에 노드가 존재할 경우 삭제 불가 알림 띄움

/* 노드 삭제 */
function deleteRow() {
    // 트리 노드 정보
    var t = $('ul#category-tree');
    // 선택된 노드
    var selected = $('ul#category-tree').tree('getSelected');    

    if ($(selected.target).next("ul").length != 0) { // 하위에 노드가 존재할 경우
        $.messager.alert("알림", "현재 노드에 하위노드가 존재합니다. <br/>삭제할 수 없습니다.");
    }
    else {
        $.messager.confirm(
            '알림',
            "해당 노드를 제거하면 복구할 수 없습니다. 정말 삭제하시겠습니까?",
            function (result) {
                if (result) {
                    t.tree("remove", selected.target);
                }
            }
        );
    }
}

 

3.4 collapseAll

# 적용상황 :트리노드 전체 접기

<input type="button" class="unfold_category" onClick="setUnFoldCategory();" value="전체 펼치기">

/* 노드 전체 접기 */
function setFoldCategory() {
    $('ul#category-tree').tree('collapseAll');
}

 

3.4 expandAll

# 적용상황 :트리노드 전체 펼치기

<input type="button" class="fold_categort" onClick="setFoldCategory();" value="전체 접기">

/* 노드 전체 펼치기 */
function setUnFoldCategory() {
    $('ul#category-tree').tree('expandAll');
}