domingo, 14 de junio de 2015

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


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/


No hay comentarios:

Publicar un comentario