JSTree的基本用法

  描述：JSTree是一个独立的插件，可以运用到.net，java,php等各个地方。JSTree功能庞大，我也是刚接触不久，先暂时记录下基本用法，至于去如何用其它功能，相信会了基本的用法就可以知道如何去摸索了。网络上大多都是只给出在html页面的使用方法，至少我没找到前后台都有的实例。而我今天就是要记录下JSTree整个的使用的方法（不同的版本用法不同，但思想基本一样）。
下面给出实例（运行环境.net mvc3.0）
准备工作：
去下载对应版本的JSTree.部署进项目中(下载的什么版本的JSTree就有对应的方法，但使用方法基本类似。)。部署后即可使用该插件了。

View页面
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.jstree.js")" type="text/javascript"></script> //这个就是我下载的JSTree版本的引用

<script type="text/javascript">
$(function () {
$.jstree._themes = "@Url.Content("~/Content/themes/")"; //应用各种主题。如树节点图标 PS:下载的JSTree里面自带各种主题

//创建数的开始 接下来逐一分析jstree的用法
$("#OrganizationTree").jstree({ //与下面的<div> 对应 数就显示在这个里面 相当于一个容器
"plugins": ["themes", "json_data", "ui"], //第二个参数类型为json 还有XML等其它类型 第三个参数"ui" 还可以是

//"checkbox" 这样树就有复选框了

"themes" : {"themes" : "default-rtl", "dots" : true , "icons" : true}, //第一个true表示有节点
//第二个true表示节点有图片

//接下来就是sjtree获取数据源了
"json_data": {
"ajax": {
"url":"@Url.Action("GetChildOrg", "Organization", new { area = "SYSManage" })",//url比表示数据源地址

//参数依次是Action,Controller,area(PS:如果你的项目没有area可以不写)
//每次展开节点的时候就访问一次数据源 如果有值 则子节点展开并显示值
"data": function (n){
return{
"id" : n.attr ? n.attr("id").replace("node_","") : 3 // 这里的replace("node_","")是我后台给id添加的值

//所以这里要获取纯数字我就做了处理，总之这里就是传参数就是了
//3是参数id的值,这里默认给了参数3 可以获得对应的值 参数id与GetChildOrg的参数id对应
};
}
}
}
});

//给JsTree绑定节点项选中（单击）事件 比如 单击选项后激发某个事件（至于事件内容自己定义了）

//我这里用这个是去实现 单击页面左边树里的选项后 激发事件后 使得右边的frame

//（即<frameset><frame></frame></frameset>显示不同的内容

$("#OrganizationTree").bind("select_node.jstree",function(event,data){
//alert(data.rslt.obj.attr("id").replace("node_","")); //获取节点id可以用这个条代码测试一下是否成功
var idstring=data.rslt.obj.attr("id").replace("node_",""); //获取节点的id值（id值由Controller赋值）
var test="@Url.Action("Details", "Organization", new { area = "SYSManage" })/"+idstring; //获取事件要激活的地址链接
$(parent.document.body).find('#content').attr('src', test);//"content"表示frame的ID 该行表示在frame里面要显示的内容
})
});

</script>

<div id="OrganizationTree">
</div>

Controller页面
public JsonResult GetChildOrg(int id) //与View中的GetChildOrg对应 id也是从那获取参数值
{
var d = GetOrgTree(id); //获取设置好了属性的数据源 这是我自定义的 下面有具体方法
return Json(d, JsonRequestBehavior.AllowGet); //将数据源传递给JSTree
}

//OrgTreeModel都是自定义模型
public static List<OrgTreeModel> GetOrgTree(int horgid)
{
var items = GetOrg(horgid); //自定义方法 获取list<>数据

var treelist = new List<OrgTreeModel>();

foreach (var item in items)
{
treelist.Add(new OrgTreeModel() { attr = new OrgTreeModel.attrs() {id = "node_" + item.FID }, data= item.OrgName, state = "closed" }); //设置各种JSTree数据源中的属性.这里设置了id ,设置了节点项显示的内容data
//设置了节点是否打开state 有3种状态 open, close, closed
}

return treelist;
}

提示：JSTree前后台的使用方法都在这了。其实具体的运用只要自己部署到项目中后，自己不断的调试，跟踪代码就会慢慢的发现每个地方的用处了。欢迎提问探讨。一起来完善里面的内容。

同时建议去JSTree官网，查看学习如何使用JSTree.