[JavaScript] TreeView 사용하기 (fancytree) - 4 context menu

2019. 6. 14. 16:33· WEB/JavaScript
반응형

[JavaScript] TreeView 사용하기 (fancytree) - 4 context menu


Electron에서 fancytree를 사용하면서 $.ui.fancytree 로 fanctree 사용이 불가능하기 때문에,
찾아낸 또 다른 fancytree 사용 방법을 적어둔 글 이다.

이전 글 : [JavaScript] TreeView 사용하기 (fancytree) - 3 title 줄바꿈 하기

참고 예제 : Example: use 'jquery.contextmenu'

 

fancytree context menu

 

먼저, jquery-ui 와 jquery-ui-contextmenu 를 추가해 준다.
jquery-ui는 contextmenu 의 UI를 만들어주며, jquer-ui-contextmenu 는 contextmenu를 만들어 준다.


Electron 은 npm으로 직접 다운 받은 jquery-ui 파일을 추가해 주어야 한다.
jquery-ui-dist를 다운 받는다. ( 왜 jquery-ui가 아닌 jquery-ui-dist 인지는 모르겠다:-) )

$ npm install jquery-ui-dist
<!-- jQuery -->
<script>
    // jQuery
    window.$ = window.jQuery = require('./statics/jquery/3.3.1/jquery-3.3.1.min.js');
    // jQuery ui
    require('jquery-ui-dist/jquery-ui')
</script>

그리고 contextmenu 스타일도 추가해 준다.

<link type="text/css" rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/start/jquery-ui.css" />

<style type="text/css">
   .ui-menu {
      width: 100px;
      font-size: 63%;
      z-index: 3; /* over ext-wide titles */
    }
</style>

 

이제, javascript에서 fancytree에 contextmenu 함수를 추가해 주면 된다.

예제에서는 `$.ui.fancytree.getNode(ui.target);` 방식으로 선택한 노드에 대한 정보를 갖고 왔는데

`$.ui.fancytree` 가 사용이 안되다보니 getNode라는 함수를 사용할 수 없었다.

그래서, 트리의 모든 노드를 돌면서 선택한 노드와 비교하여 일치하는 노드의 정보를 갖고왔다.

$("#tree").contextmenu({
  delegate: "span.fancytree-title",
  menu: [
          {title: "Cut", cmd: "cut", uiIcon: "ui-icon-scissors"},
          {title: "Copy", cmd: "copy", uiIcon: "ui-icon-copy"},
          {title: "Paste", cmd: "paste", uiIcon: "ui-icon-clipboard", disabled: false },
          {title: "----"},
          {title: "Edit", cmd: "edit", uiIcon: "ui-icon-pencil", disabled: true },
          {title: "Delete", cmd: "delete", uiIcon: "ui-icon-trash", disabled: true },
          {title: "More", children: [
            {title: "Sub 1", cmd: "sub1"},
            {title: "Sub 2", cmd: "sub1"}
            ]}
          ],
  beforeOpen: function (event, ui) {

    // 트리의 모든 노드 돌면서 이전에 선택한 노드 모두 제거
    fancytree.getTree().visit(function (node){
      node.setSelected(false);
      node.setActive(false);

      // 우 클릭으로 선택한 노드 활성화
      if (node.span.lastChild == ui.target[0]) {
        node.setSelected(true);
      }
    });

  }
});

 

* 우 클릭으로 선택 가능한 노드는 1개이다. 복수 개를 선택하는 방법을 알고 싶다!!

 

 


[참고] http://downtown.trilo.de/svn/daftarimat/trunk/eval/fancytree-2.19.0/demo/sample-3rd-ui-contextmenu.html#

반응형
저작자표시 비영리 변경금지 (새창열림)

'WEB > JavaScript' 카테고리의 다른 글

[JavaScript] Bootstrap Modal 닫힘 방지 방법  (0) 2019.07.19
[JavaScript] 다른 서버에 있는 이미지 불러오기  (0) 2019.07.04
[JavaScript] TreeView 사용하기 (fancytree) - 3 title 줄바꿈 하기  (0) 2019.06.11
[JavaScript] TreeView 사용하기 (fancytree) - 2 노드 추가하기  (0) 2019.06.06
[JavaScript] TreeView 사용하기 (fancytree)  (0) 2019.06.03
'WEB/JavaScript' 카테고리의 다른 글
  • [JavaScript] Bootstrap Modal 닫힘 방지 방법
  • [JavaScript] 다른 서버에 있는 이미지 불러오기
  • [JavaScript] TreeView 사용하기 (fancytree) - 3 title 줄바꿈 하기
  • [JavaScript] TreeView 사용하기 (fancytree) - 2 노드 추가하기
S0PH1A
S0PH1A
반응형
S0PH1A
Web Programmer
S0PH1A
전체
오늘
어제
  • 전체
    • About Me
    • Python
      • Python
      • Django
    • DataBase
      • MySQL
      • MongoDB
    • JAVA
      • JAVA
      • Spring
    • WEB
      • JavaScript
      • HTML
      • CSS
      • Vue.js
      • React
      • Nest.js
      • Node.js
      • Electron
      • PHP
    • Linux
    • Algorithm
    • 기타
    • 생각
    • App
      • ReactNative

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • electron
  • vue.js
  • nodejs
  • install
  • javascript
  • django
  • vue
  • Error
  • mysql
  • Python

최근 댓글

최근 글

hELLO · Designed By 정상우.v4.2.2
S0PH1A
[JavaScript] TreeView 사용하기 (fancytree) - 4 context menu
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.