简单Ztree的实现
Ztree之初涉——简单Ztree的实现
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<Tree> GetData()
{
List <Tree> tree = new List<Tree> ();
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;
}
<! DOCTYPE html >
< html >
< head >
< title > ZTREE DEMO - Custom Icon </ title >
< meta http-equiv ="content-type" content ="text/html; charset=UTF-8" >
< link href ="~/Script/css/demo.css" rel ="stylesheet" />
< link href ="~/Script/css/zTreeStyle/zTreeStyle.css" rel ="stylesheet" />
< script src ="~/Script/jquery-1.4.4.min.js" ></ script >
< script src ="~/Script/jquery.ztree.core-3.5.js" ></ script >
< script type ="text/javascript" >
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);
// });
</ script >
</ head >
< body >
< h1 > 自定义图标 -- icon 属性 </ h1 >
< h6 > [ 文件路径: core/custom_icon.html ] </ h6 >
< div class ="content_wrap" >
< div class ="zTreeDemoBackground left" >
< ul id ="treeDemo" class ="ztree" ></ ul >
</ div >
< div class ="right" >
< ul class ="info" >
< li class ="title" >
< h2 > 1、setting 配置信息说明 </ h2 >
< ul class ="list" >
< li > 自定义图标不需要对 setting 进行特殊配置 </ li >
</ ul >
</ li >
< li class ="title" >
< h2 > 2、treeNode 节点数据说明 </ h2 >
< ul class ="list" >
< li > 利用 节点数据的 icon / iconOpen / iconClose 属性实现自定义图标 </ li >
< li class ="highlight_red" > 详细请参见 API 文档中的相关内容 </ li >
</ ul >
</ li >
< li class ="title" >
< h2 > 3、其他说明 </ h2 >
< ul class ="list" >
< li class ="highlight_red" > 由于时间关系，例子直接采用 png 图片，如果需要解决 ie6 下 png 图片的透明问题，请针对 ie6 制作特殊的 gif 图片或者利用 css filter 解决 </ li >
</ ul >
</ li >
</ ul >
</ div >
</ div >
</ body >
</ html >
好了，这就是一个简单的树形菜单，我之前没用过Ztree,因为明天不用上班，就研究学习下，这只是个入门级的，有时间的话我会规整下Ztree返回Json对应数据格式的通用方法以及扩展Ztree的其他比较好的功能通用方法给大家，基本的效果如下：
稍后我会写下关于Ztree引发的Js异步的问题文章地址 http://www.cnblogs.com/liunianmoshi/articles/2998965.html
分类: 前端UI , .NET
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did46360