Ztree可以去官網(wǎng)去下載相應(yīng)的版本和API，我這里就簡單的介紹下它的實(shí)現(xiàn)以及因?yàn)閆tree的小例子印發(fā)的Js問題，稍后我會(huì)在博客中寫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 = "動(dòng)物", 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; }

}

}

這里我就不在解釋了，類等我都沒去規(guī)劃，直接在這里寫了，比較方便。接下來是視圖代碼，視圖上我用的是ajax獲取數(shù)據(jù)，

@{

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: "展開、折疊 自定義圖標(biāo)不同", 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: "葉子節(jié)點(diǎn)1", icon: "../Script/css/zTreeStyle/img/diy/2.png" },

// { id: 12, pId: 1, name: "葉子節(jié)點(diǎn)2", icon: "../Script/css/zTreeStyle/img/diy/3.png" },

// { id: 13, pId: 1, name: "葉子節(jié)點(diǎn)3", icon: "../Script/css/zTreeStyle/img/diy/5.png" },

// { id: 2, pId: 0, name: "展開、折疊 自定義圖標(biāo)相同", open: true, icon: "../Script/css/zTreeStyle/img/diy/4.png" },

// { id: 21, pId: 2, name: "葉子節(jié)點(diǎn)1", icon: "../Script/css/zTreeStyle/img/diy/6.png" },

// { id: 22, pId: 2, name: "葉子節(jié)點(diǎn)2", icon: "../Script/css/zTreeStyle/img/diy/7.png" },

// { id: 23, pId: 2, name: "葉子節(jié)點(diǎn)3", icon: "../Script/css/zTreeStyle/img/diy/8.png" },

// { id: 3, pId: 0, name: "不使用自定義圖標(biāo)", open: true },

// { id: 31, pId: 3, name: "葉子節(jié)點(diǎn)1" },

// { id: 32, pId: 3, name: "葉子節(jié)點(diǎn)2" },

// { id: 33, pId: 3, name: "葉子節(jié)點(diǎn)3" }

//];

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

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

//});

自定義圖標(biāo) -- icon 屬性

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

• 1、setting 配置信息說明

  • 自定義圖標(biāo)不需要對(duì) setting 進(jìn)行特殊配置

• 2、treeNode 節(jié)點(diǎn)數(shù)據(jù)說明

  • 利用 節(jié)點(diǎn)數(shù)據(jù)的 icon / iconOpen / iconClose 屬性實(shí)現(xiàn)自定義圖標(biāo)
  • 詳細(xì)請(qǐng)參見 API 文檔中的相關(guān)內(nèi)容

• 3、其他說明

  • 由于時(shí)間關(guān)系，例子直接采用 png 圖片，如果需要解決 ie6 下 png 圖片的透明問題，請(qǐng)針對(duì) ie6 制作特殊的 gif 圖片或者利用 css filter 解決

好了，這就是一個(gè)簡單的樹形菜單，我之前沒用過Ztree,因?yàn)槊魈觳挥蒙习?#xff0c;就研究學(xué)習(xí)下，這只是個(gè)入門級(jí)的，有時(shí)間的話我會(huì)規(guī)整下Ztree返回Json對(duì)應(yīng)數(shù)據(jù)格式的通用方法以及擴(kuò)展Ztree的其他比較好的功能通用方法給大家，基本的效果如下：

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。