[Django][fancytree] ajax로 서버에서 데이터 불러오기

[Django][fancytree] ajax로 서버에서 데이터 불러오기

---

사용 언어

• Django 1.11.22

• Python 2.7

 

###

먼저, Fancytree에 ajax 로 서버에서 데이터를 갖고 올 수 있도록 source에 함수를 추가해 준다.
source may be callback that returns one of the above data formats.

source: function(event, data){
    return [{title: "node1", ...}, ...];
}

[참고] https://github.com/mar10/fancytree/wiki/TutorialLoadData#use-a-callback

• url과 type은 자신에게 맞게 변경해 준다.
• 여기서 async: false를 해준 이유는 ajax가 성공 한 후 결과 값을 source에 넣어줄 것이기 때문이다.

  $('#tree').fancytree({
    // ...
    source: function (event, data) {
        $.ajax({
            url: '/get/files',
            type: "post",
            dataType: "json",
            async: false,
            success: function (files) {
                data.result = files.models_to_return
            }
        })
        return data.result
    },
      // ...
  })

 

그 다음, urls.py에 경로를 추가해 준다.

from django.conf.urls import include, url
from . import views

urlpatterns = [
    # ...
    url(r'^get/files$', views.getFiles, name='getFiles'),
]

 

마지막으로 views.py에서 fancytree data 구조에 맞게 변경하여 값을 json형태로 반환하도록 한다.

• JsonResponse를 이용해서 JSON으로 반환하도록 한다.
• fancytree 데이터에 사용가능한 옵션들은 이곳을 보면 된다.

  from django.http import JsonResponse
  from django.views.decorators.csrf import csrf_exempt
  @csrf_exempt
  def getFiles(request):
    structure = []
    if request.POST:
        // 구조 옵션 및 값들은 DB에서 갖고 오도록 하는 것이 좋다.
        // 예제이므로, 임의의 값을 넣어주었다.
        structure = [
            {
                'folder': True,
                'title': "bbb",
                'key': 'folder#1',
                'checkbox': False,
                'children': [
                    {
                        'name': "개구리",
                        'key': "file#1",
                        'checkbox': False,
                        'title': "개구리"
                    },
                    {
                        'name': "이름",
                        'key': "file#2",
                        'checkbox': False,
                        'title': "이름"
                    }
                ]
            }
        ]
        return JsonResponse({"models_to_return": structure})
    else:
        JsonResponse({"models_to_return": structure})

* 결과 이미지

fancytree 결과

 

---

[참고] https://github.com/mar10/fancytree/wiki/TutorialLoadData