반응형 Library & Framework/jsTree12 [jsTree] 검색(search plugin) 감지하기 jstree 에서 제공하는 plugin중에 하나인 search에 대해 알고 있다는 가정하에 작성한다. https://mine-it-record.tistory.com/397 2022. 2. 12. [jsTree] dnd plugin - node 이동시 이벤트 감지/처리하기 (ft. move_node.jstree) [jsTree] jstree 드래그 앤 드롭(dnd) 적용하기 (ft. Drag & drop plugin) 2021. 3. 1. [jsTree] 선택된 node 선택해제 하기 (ft. deselect_all) ★jstree 그 외 유용한 함수 모음 ★jstree 선택한 node 정보 가져오기 ★jstree 단축키를 활용한 node 다중 선택 jstree에 선택을 제공해준다면 당연히 해제하는것도 제공해준다. 전부 선택해제 시켜주는건데 예제를 통해 가볍게 알아보자. ▶javascript $('#tree').jstree({ 'core' : { 'data' : [ { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" }, { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" }, { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" }, { "id" : "a.. 2021. 2. 20. [jsTree] node 다중 선택(multiple select) 하기 (ft. 단축키) 사실 보면 진짜 별거 아닌데 검색할때 잘 안나와서 정리해둔다. (물론 영어로 검색하니까 바로 나오긴 하더라.) ▶javascript $('#tree').jstree({ 'core' : { 'data' : [ { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" }, { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" }, { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" }, { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" }, ] } }); 그냥 하던데로 jstree를 만들어주고나서.. 2021. 2. 20. [jsTree] 선택된 node 정보 가져오기 (ft. get_selected) ★jstree 그 외 유용한 함수 모음 jstree를 사용할 때 선택한 node의 정보를 가져오는 방법에 대해 알아보자. plugins과 다르게 따로 뭔가를 설정해줄 필요없이 바로 가져오는게 가능하다. 예제를 통해 쉽게 알아보자. ▶javascript $('#tree').jstree({ 'core' : { 'data' : [ { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" }, { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" }, { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" }, { "id" : "ajson4", "parent.. 2021. 2. 20. [jsTree] plugin search를 사용하여 검색기능 활성화하기 jstree 에서 제공하는 plugin중에 하나인 search에 대해 알아보자 영어단어 그대로의 의미인 검색기능을 제공해주는 플러그인인데 사용방법은 간단하다. $('#tree').jstree({ 'core' : { 'data' : [ { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" }, { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" }, { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" }, { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" }, ] }, 'plugins' :.. 2021. 2. 6. [jsTree] plugin wholerow 사용하여 tree node 편하게 클릭 하기 jstree 에서 제공하는 plugin중에 하나인 wholerow plugin 에 대해 알아보자. 이번에 알아볼 wholerow는 사실 가볍게 사용할 수 있는거라 그렇게 어렵지않다. $('#tree').jstree({ 'core' : { 'data' : [ { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" }, { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" }, { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" }, { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" }, ] }.. 2021. 1. 3. [jsTree] jstree 마우스 우클릭 서브메뉴(contextmenu) 사용하기 (ft. Contextmenu plugin) jstree에서 제공해주는 plugin중에 하나인 contextmenu plugin에 대해 알아보자. $('#tree').jstree({ 'core' : { 'data' : [ { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" }, { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" }, { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" }, { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" }, ], "check_callback" : true }, 'plugins' : ["cont.. 2021. 1. 1. [jsTree] jstree 유용한 함수모음 jstree 사용할 때 마다 계속 찾아서 쓰기 귀찮아서 지금까지 사용한것들 정리한것이다. (사실 더 나은 방법이 있을수 있다 그냥 썼던거 옮겨놓은거라...) var jstreeExtend = {}; /** * jstree 제어 * elem : jstree dom 객체 */ jstreeExtend.jstree = function(elem){ //jstree 객체 $tree = elem; // jstree 생성 //$tree.jstree({ // //core 제어 // 'core' : { // 'data' : data, // "check_callback" : true // plugins 'dnd'와 같이 사용 이동하고싶을때 // }, // "plugins" : ["dnd","types"], // "types.. 2020. 12. 15. 이전 1 2 다음 반응형
