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 ]

• 1、setting 配置信息說明

  • 自定義圖標不需要對 setting 進行特殊配置

• 2、treeNode 節點數據說明

  • 利用 節點數據的 icon / iconOpen / iconClose 屬性實現自定義圖標
  • 詳細請參見 API 文檔中的相關內容

• 3、其他說明

  • 由于時間關系，例子直接采用 png 圖片，如果需要解決 ie6 下 png 圖片的透明問題，請針對 ie6 制作特殊的 gif 圖片或者利用 css filter 解決

好了，這就是一個簡單的樹形菜單，我之前沒用過Ztree,因為明天不用上班，就研究學習下，這只是個入門級的，有時間的話我會規整下Ztree返回Json對應數據格式的通用方法以及擴展Ztree的其他比較好的功能通用方法給大家，基本的效果如下：

總結

以上是生活随笔為你收集整理的mysql 实现ztree_简单Ztree的实现————不连接数据库版的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。