본문 바로가기
반응형

Library & Framework/jsTree12

[jsTree] jstree 드래그 앤 드롭(dnd) 적용하기 (ft. Drag & drop plugin) jstree에서는 다양한 plugin을 제공해주는데 그중에 하나가 "dnd" 이다. 예제를 통해 알아보자. ▶예제1) $('#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".. 2020. 11. 25.
[jsTree] jstree 데이터 포맷 (ft. JSON DATA) jstree 에서 사용되는 data format은 html 과 json 형식이 있는데 html 보다는 json형식을 많이 사용하기 때문에 json 데이터 포맷에 대해 알아보고자 한다. ▷jstree 기본 형식(첫번째 제공 형식) { id : "string", // node id로 사용되는데 필수값이다. text : "string", // node text로 트리에서 node명 같은것이다. icon : "string", // node 좌측에 아이콘이 존재하는데 custom 아이콘 사용이다. state : { opened : boolean, // is the node open disabled : boolean, // is the node disabled selected : boolean // is the n.. 2020. 11. 25.
[jsTree] jstree 시작하기 (ft. 트리구조 jstree란?) jstree는 말 그대로 트리형식의 구조를 지원해 웹에 출력을 도와주는 라이브러리 이다. jquery 기반으로 HTML 또는 JSON 데이터를 가지고 Tree 형식을 만들어준다. 이런 형식의 구조를 많이 봤을 것이다. 이 구조를 만들수 있게 도와주는게 jstree.js 이다. 공식 사이트는 다음과 같다. (당연히 영문이다.) https://www.jstree.com/ 이제 사이트를 기반으로 하나하나 배워보자. jstree를 본격적으로 시작하기에 필요한 세팅을 해보자. ▷js : jquery 와 jstree 스크립트이다. ▷css : jstree css 파일 이렇게 베이스를 깔아두고 간단하게 시작을 해보자. 글 시작할때 보여주었던 트리구조 이미지 그대로 만들것이다. ▷html ▷script $('#tree.. 2020. 11. 24.
반응형
TOP