c# API 로 JsTree 랜더링

JsTree는 API 호출 기반으로 랜더링이 가능하다.
하지만 예제가 별로 없는 것 같아서 예제를 하나 만들어 봅니다.

일단 REST API를 하나 만들어야 합니다.
POST 형식의 Json을 리턴하는 형식으로 만듭니다.
GET로 만들어도 상관없습니다. JsTree에서 설정가능하니까요.

JsTreeResult.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

namespace Sample

{

    public class JsTreeResult

    {

        /// <summary>

        /// 결과 값이 true인 기본 객체.

        /// </summary>

        public static readonly JsTreeResult Empty = new JsTreeResult();

        /// <summary>

        /// API 수행 성공 여부

        /// </summary>

        public bool Success { get; set; } = true;

        /// <summary>

        /// 오류 메시지

        /// </summary>

        public string Message { get; set; }

    }

    public class JsTreeResult<T> : JsTreeResult

    {

        public T d { get; set; }

    }

    public class JsTreeEntity

    {

        // Unique한 ID

        // ID가 같을 경우 같이 동작할 수 있다.

        public string id { get; set; }

        // 표시될 이름

        public string text { get; set; }

        // 자식이 있는지 판단. True면 확장가능

        public bool children { get; set; } = false;

        // Disable은 바로 적용은 안되고, after_open.jstree 이벤트에서 disable_node를 호출해야 한다.

        public bool isDisable { get; set; } = false;

        // icon를 커스터 마이징 할 수 있다.

        public string icon { get; set; }

        // 순서 조정가능

        public int sortIndex { get; set; }

    }

}

 

JsTreeResult 라는 객체를 Json String으로 리턴해줄껍니다.
isDisable 속성 말고는 Jstree에서 기본적으로 사용하는 속성입니다.
기본적으로 사용하는 속성은 item을 가져와서 바로 사용할 수 있고,
확장성 속성은 orignal 오브젝트에 저장되어 있습니다.

JsTreeApi.ashx.cs

using Newtonsoft.Json;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Web;

using System.Web.Script.Serialization;

using System.Web.SessionState;

namespace Sample

{

    public class JsTreeApi : IHttpHandler, IReadOnlySessionState

    {

        public void ProcessRequest(HttpContext context)

        {

            context.Response.ContentType = "application/json";

            JsTreeResult<List<JsTreeEntity>> responseData = new JsTreeResult<List<JsTreeEntity>>();

            context.Response.CacheControl = string.Empty;

            context.Response.Cache.SetCacheability(HttpCacheability.NoCache);

            responseData.d.add(new JsTreeEntity(){

                id = 1,

                text = "Test",

                children = false,

               

            });

            context.Response.Write(JsonConvert.SerializeObject(responseData));

        }

    }

}

 

$('#jsTreeElement')

    .jstree({

        'core': {

            // 새 폴더를 만들 경우 사용

            'strings': {

                'New node': '새 폴더'

            },

            // API 정보 입력

            'data': {

                type: 'post',

                'url': 'sample.com/api/TestJstree',

                'data': function (node) {

                    // 첫 루트인 경우

                    if (node.id == '#') return {

                        'Id': '1',

                        'customId': '2'

                    };

                    // Disable

                    if (node.original != null && node.original.isDisable == true)

                        return null;

                    if (node.original != null && node.original.folder_id)

                        return {

                            'Id': node.original.id,

                            'customId': node.original.custom_id

                        };

                    return {

                        'Id': node.id

                    };

                }

            },

            'force_text': true,

        'plugins': ['wholerow', 'unique']

    })

    .on('after_open.jstree', function (e, data) {

        // API가 호출 된 직후 랜더링 하기전 이벤트
        // 여기서 Disable 표시하고 싶은 아이템을 적용합니다.

        var node = $('#jsTreeElement').jstree('get_node', data.node.id);

        for (var i = 0; i < data.node.children.length; i++) {

            var childrenNode = $('#jsTreeElement').jstree('get_node', data.node.children[i]);

            if (childrenNode.original.isDisable == true) {

                $('#jsTreeElement').jstree('disable_node', childrenNode);

            }

        }

    })

    .on('changed.jstree', function (e, data) {

        var id = $('#jsTreeElement').jstree('get_selected');

        var node = $('#jsTreeElement').jstree('get_node', id[0]);

        if (node != null && ClickFolderCallback && node.original != null && node.original.id != null && node.original.isDisable == false) {

            var fullPath = $('#jsTreeElement').jstree('get_path', node, '/');

            self.ClickFolderCallback(node.original, fullPath);

        }

    });