FANCYTREE

[JavaScript] TreeView 사용하기 (fancytree) - 5 Drag N Drop 이전 글 : [JavaScript] TreeView 사용하기 (fancytree) - 4 context menu 드래그앤드롭(DragNDrop)기능을 사용하기 위해서는 dnd5모듈을 추가해야한다. dnd5 모듈을 이용해서 기본적인 기능은 가능하지만, 드래그앤 드롭시 목적지 폴더에 내가 옮기려는 파일과 이름이 같은 파일이 존재할 경우 예외처리를 추가하고자 한다. dnd5의 이벤트는 다음과 같다. dragStart : 드래그 이벤트 시작시 (마우스 누름) dragDrag : 드래그 이벤트 중 dragEnd : 드래그 이벤트 끝남 dragEnter : 드래그 이벤트 중 "over", "before, "after"..

[JavaScript] TreeView 사용하기 (fancytree) - 4 context menu Electron에서 fancytree를 사용하면서 $.ui.fancytree 로 fanctree 사용이 불가능하기 때문에, 찾아낸 또 다른 fancytree 사용 방법을 적어둔 글 이다. 이전 글 : [JavaScript] TreeView 사용하기 (fancytree) - 3 title 줄바꿈 하기 참고 예제 : Example: use 'jquery.contextmenu' 먼저, jquery-ui 와 jquery-ui-contextmenu 를 추가해 준다. jquery-ui는 contextmenu 의 UI를 만들어주며, jquer-ui-contextmenu 는 contextmenu를 만들어 준다. Elec..

[JavaScript] TreeView 사용하기 (fancytree) - 3 title 줄바꿈 하기 노드(node)의 이름(title)들이 줄 바꿈이 안되고 원하는 너비를 넘어가면 Scroll-X 가 생성되어 보여진다. 원래 아래 노드의 이름은 `개구리 - 복사본` 이지만 X축 스크롤이 생기고 화면상 짤려져보인다. X축 스크롤이 아닌, 글자가 자동 줄 바꿈이 되었으면 한다면 두 가지 방법이 있다. 먼저, 가장 간단한 방법은 css 속성을 이용하는 것이다. 방법1. css 속성 사용 span.fancytree-title { white-space: normal; } 방법1이 안 될 경우가 있다. 그러면 두 번째 방법인 rendernode를 통해서 해결할 수 있다. 방법2. fancytree 의 rendern..

[JavaScript] TreeView 사용하기 (fancytree) - 2 노드 추가하기 이전 글 : [JavaScript] TreeView 사용하기 (fancytree) # fancytree를 선언한 후 노드(데이터)에 노드를 추가하는 방법이다. 이전 글에서 처럼 fancytree를 생성할 때 변수에 할당 했었으면, 아래와 같이 사용할 수 있고, const _tree = fancytree.createTree('#tree', { ... } // 데이터 추가 _tree.options.source = 데이터 // 트리 reload _tree.reload() 만약, 할당하지 않았을 경우엔 이와 같이 사용할 수 있다. fancytree.createTree('#tree', { ... } // 데이터 추가 fan..