簡單Ztree的實現————不鏈接數據庫版

時間 2019-11-13

標籤簡單 ztree 實現鏈接數據庫欄目 SQL 简体版

原文原文鏈接

Ztree能夠去官網去下載相應的版本和API，我這裏就簡單的介紹下它的實現以及由於Ztree的小例子印發的Js問題，稍後我會在博客中寫JS的異步問題，javascript

我這裏用的是MVC4.0,好了正文開始，上代碼css

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獲取數據，html

@{
    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>一、setting 配置信息說明</h2>
                    <ul class="list">
                        <li>自定義圖標不須要對 setting 進行特殊配置</li>
                    </ul>
                </li>
                <li class="title">
                    <h2>二、treeNode 節點數聽說明</h2>
                    <ul class="list">
                        <li>利用 節點數據的 icon / iconOpen / iconClose 屬性實現自定義圖標</li>
                        <li class="highlight_red">詳細請參見 API 文檔中的相關內容</li>
                    </ul>
                </li>
                <li class="title">
                    <h2>三、其餘說明</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的其餘比較好的功能通用方法給你們，基本的效果以下：java