jsTree通过AJAX从后台获取数据
页面代码:
<div id="MenuTree"></div>
javascript代码:
$(document).ready(function ($) { InitMenuTree(); }); function InitMenuTree() { $('#MenuTree').data('jstree', false); $.getJSON('@Url.Action("GetMenuTree", "AdminMenu")', function (json) { $('#MenuTree').jstree({ 'core': { 'data': json } }); }); $('#MenuTree').on('changed.jstree',function (node,data){ var id = data.instance.get_node(data.selected[0]).id;//节点点击事件 获取ID ClickMenuTree(id); }) $('#MenuTree').on('loaded.jstree', function (e, data) { data.instance.open_all();//默认展开所有节点 }) }
使用jQuery的getJson方法从后台获取数据,然后直接放到data后面就行了。
后台代码:
Models:(这是jstree要求的格式)
public class AdminMenuTreeNoteModel { public string id { get; set; } public string parent { get; set; } public string text { get; set; } public string icon { get; set; } }
Controllers:(我用的是.Net MVC 这不重要,直接把数据按照规定的JSON格式传出去就行了)
public ActionResult GetMenuTree() { var trees = from a in dbc.AdminMenus select new AdminMenuTreeNoteModel { id = a.ID.ToString(), parent = (a.ParentMenu > 0 ? a.ParentMenu.ToString() : "#"),//默认根节点的parent是“#” text = a.Title, icon = (a.IconClass.Length > 0 ? a.IconClass : "icon-doc")//部分节设定好了图标,没有图标的使用默认图标 }; return Json(trees.ToList(), JsonRequestBehavior.AllowGet); }
完事,还是很简单的。但是JsTree的官方网站里的文档根本看不懂。
这里是规定的JSON格式:
// Alternative format of the node (id & parent are required) { id : "string" // required parent : "string" // required text : "string" // node text icon : "string" // string for custom state : { opened : boolean // is the node open disabled : boolean // is the node disabled selected : boolean // is the node selected }, li_attr : {} // attributes for the generated LI node a_attr : {} // attributes for the generated A node }
UPDATE:
后来初始化树代码改成这样了:
function InitMenuTree() { $('#MenuTree').on('changed.jstree',function (node,data){ var id = data.instance.get_node(data.selected[0]).id;//获取ID ClickMenuTree(id); FromStateShow(); }) $('#MenuTree').on('loaded.jstree', function (e, data) { data.instance.open_all();//默认展开所有节点 }) GetMenuTreeData(); } function GetMenuTreeData() { $('#MenuTree').data('jstree', false); $.ajax({ url: '@Url.Action("GetMenuTree", "AdminMenu")', type: 'post', dataType: 'json' }) .done(function(data) { $('#MenuTree').data('jstree', false).empty().jstree({ 'core': { 'data': data } }); }); }
这样可以直接调用 GetMenuTreeData() 刷新树了。
我发现 $.getJSON() 可能有缓存,反正还用 $.getJSON 修改后没有办法刷新树内容。
如果只是显示出来不需要刷新的话就无所谓,需要刷新还得换一个方法。