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

 

posted @ 2013-04-03 23:32  流年莫逝  阅读(1410)  评论(0)  编辑  收藏  举报