Ztree可以去官网去下载相应的版本和API，我这里就简单的介绍下它的实现以及因为Ztree的小例子印发的Js问题，稍后我会在博客中写JS的异步问题，

我这里用的是MVC4.0,好了正文开始，上代码

namespace ZtreeDemo.Controllers

{

public class HomeController : Controller

{

//

// GET: /Home/

public ActionResult Index()

{

return View();

}

public ActionResult Edit()

{

var list = GetData();

return Json(list, JsonRequestBehavior.AllowGet);

}

[NonAction]

public List GetData()

{

List tree = new List();

tree.Add(new Tree { id = 1, pId = 0, name = "蔬菜", icon = "../Script/css/zTreeStyle/img/diy/1_open.png" });

tree.Add(new Tree { id = 2, pId = 0, name = "动物", icon = "../Script/css/zTreeStyle/img/diy/1_open.png" });

tree.Add(new Tree { id = 3, pId = 0, name = "人类", icon = "../Script/css/zTreeStyle/img/diy/1_open.png" });

tree.Add(new Tree { id = 4, pId = 1, name = "茄子", icon = "../Script/css/zTreeStyle/img/diy/1_open.png" });

return tree;

}

}

public class Tree

{

public int id { get; set; }

public int pId { get; set; }

public string name { get; set; }

public string icon { get; set; }

}

}

这里我就不在解释了，类等我都没去规划，直接在这里写了，比较方便。接下来是视图代码，视图上我用的是ajax获取数据，

@{

Layout = null;

}

ZTREE DEMO - Custom Icon

var tree;

$(function () {

$.ajax({

type: "Get",

url: "@Url.Action("Edit","Home")",

//async: false,

success: function (data) {

tree = data;

$.fn.zTree.init($("#treeDemo"), setting, tree);

}

});

})

var setting = {

data: {

simpleData: {

enable: true

}

}

};

//var zNodes = [

// { id: 1, pId: 0, name: "展开、折叠 自定义图标不同", open: false, iconOpen: "../Script/css/zTreeStyle/img/diy/1_open.png", iconClose: "../Script/css/zTreeStyle/img/diy/1_close.png" },

// { id: 11, pId: 1, name: "叶子节点1", icon: "../Script/css/zTreeStyle/img/diy/2.png" },

// { id: 12, pId: 1, name: "叶子节点2", icon: "../Script/css/zTreeStyle/img/diy/3.png" },

// { id: 13, pId: 1, name: "叶子节点3", icon: "../Script/css/zTreeStyle/img/diy/5.png" },

// { id: 2, pId: 0, name: "展开、折叠 自定义图标相同", open: true, icon: "../Script/css/zTreeStyle/img/diy/4.png" },

// { id: 21, pId: 2, name: "叶子节点1", icon: "../Script/css/zTreeStyle/img/diy/6.png" },

// { id: 22, pId: 2, name: "叶子节点2", icon: "../Script/css/zTreeStyle/img/diy/7.png" },

// { id: 23, pId: 2, name: "叶子节点3", icon: "../Script/css/zTreeStyle/img/diy/8.png" },

// { id: 3, pId: 0, name: "不使用自定义图标", open: true },

// { id: 31, pId: 3, name: "叶子节点1" },

// { id: 32, pId: 3, name: "叶子节点2" },

// { id: 33, pId: 3, name: "叶子节点3" }

//];

//$(document).ready(function () {

// $.fn.zTree.init($("#treeDemo"), setting, Data);

//});

自定义图标 -- icon 属性

[ 文件路径: core/custom_icon.html ]

好了，这就是一个简单的树形菜单，我之前没用过Ztree,因为明天不用上班，就研究学习下，这只是个入门级的，有时间的话我会规整下Ztree返回Json对应数据格式的通用方法以及扩展Ztree的其他比较好的功能通用方法给大家，基本的效果如下：