jsTree y Web Api

Después de buen tiempo voy a postear una nota sobre el uso del jsTree, que me parece muy práctico.

vámos a obtener los datos desde una web api que devuelve json para poder popular el jstree

Pasos:

1. Referenciar el js en la pagina

 <script src=@Url.Content("~/js/plugins/tree/jstree.js")> ....

2. Elemento donde se va a renderizar el jsTree

                  

3. la API

       Entidad: creamos la estructura que necesita el jstree para poder crear un árbol

    

El método de la API

       [HttpGet]

        public HttpResponseMessage GetMenuList()

        {

            List oList = new List();

            List oMenuList = new BLMenu().GetMenuListAll();

            foreach (var item in oMenuList)

            {

                oList.Add(new BEJSTree()

                {

                    text = item.LongDescription,

                    parent = (item.MenuParentID == 0 ? "#" :              item.MenuParentID.ToString()),

                    icon = NullSafe.GetValueOrDefault(item.Icon),

                    id = item.MenuID.ToString()

                });

            }

            return Request.CreateResponse(HttpStatusCode.OK, oList);

        }

4. El Script

  function GetTreeView() {

    $.ajax({

        type: "GET",

        //url: "/Security/GetMenuList",

        url: urlBase + "api/MenuWebApi/GetMenuList",

        datatype: "json",

        success: function (data) {

            menuList = data;

            $('#tree-menu').jstree({

                'core': {

                    "animation": 0,

                    'check_callback': true,

                    "themes": { "stripes": true },

                    'data': menuList

                },

                "checkbox": {

                    "keep_selected_style": false

                },

                "plugins": ['types', "themes", "json_data", "dnd", "wholerow"],

                

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

                var i, j, r = [];

                for (i = 0, j = data.selected.length; i < j; i++) {

                    

                    r.push(data.instance.get_node(data.selected[i]).id, data.instance.get_node(data.selected[i]).text);

                }

               

            });

        }

    });    

}

5. Resultado

  datos de prueba

  Renderizado

más información en la web de jstree:
http://www.jstree.com/