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/
