TreeView

[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..