页面代码：
<divid="MenuTree"></div>
javascript代码：
$(document).ready(function($) {
InitMenuTree();
});functionInitMenuTree() {
$('#MenuTree').data('jstree',false);
$.getJSON('@Url.Action("GetMenuTree", "AdminMenu")',function(json) {
$('#MenuTree').jstree({'core': {'data': json
}
});
});
$('#MenuTree').on('changed.jstree',function(node,data){varid = data.instance.get_node(data.selected[0]).id;//节点点击事件获取IDClickMenuTree(id);
})
$('#MenuTree').on('loaded.jstree',function(e, data) {
data.instance.open_all();//默认展开所有节点})
}
使用jQuery的getJson方法从后台获取数据，然后直接放到data后面就行了。
后台代码：
Models:（这是jstree要求的格式）
publicclassAdminMenuTreeNoteModel
{publicstringid {get;set; }publicstringparent {get;set; }publicstringtext {get;set; }publicstringicon {get;set; }
}
Controllers：（我用的是.Net MVC 这不重要，直接把数据按照规定的JSON格式传出去就行了）
publicActionResult GetMenuTree()
{vartrees =fromaindbc.AdminMenusselectnewAdminMenuTreeNoteModel
{
id=a.ID.ToString(),
parent= (a.ParentMenu >0? a.ParentMenu.ToString() :"#"),//默认根节点的parent是“#”text =a.Title,
icon= (a.IconClass.Length >0? a.IconClass :"icon-doc")//部分节设定好了图标，没有图标的使用默认图标
};returnJson(trees.ToList(), JsonRequestBehavior.AllowGet);
}
完事，还是很简单的。但是JsTree的官方网站里的文档根本看不懂。
这里是规定的JSON格式：
//Alternative format of the node (id & parent are required){
id :"string"//requiredparent :"string"//requiredtext :"string"//node texticon :"string"//string for customstate : {
opened : boolean//is the node opendisabled : boolean//is the node disabledselected : boolean//is the node selected},
li_attr : {}//attributes for the generated LI nodea_attr : {}//attributes for the generated A node}
UPDATE：
后来初始化树代码改成这样了：
function InitMenuTree() {
$('#MenuTree').on('changed.jstree',function (node,data){varid = data.instance.get_node(data.selected[0]).id;//获取IDClickMenuTree(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 修改后没有办法刷新树内容。
如果只是显示出来不需要刷新的话就无所谓，需要刷新还得换一个方法。