樹形菜單 jsTree 使用方法

jsTree版本：3.0.4

 

在ASP.NET MVC中使用jsTree

Model：

    public class Department
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public int PId { get; set; }
    }

數據庫：

Controller：

jsTree既可以一次性把所有節點都加載到客戶端，也可以只加載一層，點擊節點后再去服務端獲取下層節點。對於小的菜單可以一次性加載完，如果節點很多，可以按需加載（lazy loading）。

1、 一次性加載完所有節點

public JsonResult GetTreeData(int clickId = 0)
{
    // use database
    var db=new Salary.Models.EntityContext();

    /* 一次性加載完所有節點.
     * 前端只需配置 'data': {
                'url': '/Home/GetTreeData',
                'dataType': 'json'
     * } 不用給服務端傳值
     * 服務端不需寫where
    */
    var items=from item in db.Department
              select new
              {
                  id = item.Id,
                  parent = item.PId.ToString() == "0" ? "#" : item.PId.ToString(), // root必須是# ！
                  text = item.Name
              };

    return Json(items, JsonRequestBehavior.AllowGet);
}

2、按需加載節點（lazy loading）

public JsonResult GetTreeData(int clickId = 0)
{
    // use database
    var db=new Salary.Models.EntityContext();

    /* 異步加載節點（按需）
        前端需提供id傳給服務端：
        'data': function (node) {
                    return { id: node.id };
        }
       后端要在linq中加where篩選
    */
    var items=from item in db.Department
              where item.PId == clickId     // 在服務端要把所有上級節點找出來
              select new                    // 匿名類可以添加需要的字段，比如HasChildren
              {
                  id = item.Id,
                  parent = item.PId.ToString() == "0" ? "#" : item.PId.ToString(), // root必須是# ！
                  text = item.Name,
                  children = db.Department.Any(p => p.PId == item.Id) // true|false 是否有子項

              };

    return Json(items, JsonRequestBehavior.AllowGet);
}

View：

<div id="jstree">

@section scripts{
<link href="~/Content/jstree/themes/default/style.min.css" rel="stylesheet" />
<script src="~/Scripts/jstree/jstree.js"></script>
<script>
        $(document).ready(function () {
          $("#jstree").jstree({
                "core": {
                   //'initially_open':["abc"],
                    'data': {
                        'url': '/Home/GetTreeData',
                        'dataType': 'json',
                        'data': function (node) { // 傳給服務端點擊的節點
                            //return { id: node.id == "#" ? "0" : node.id };
                            return { clickId: node.id };
                        },
                        success: function () {
                            //alert('ok');
                        }
                    }
                }
            });
            
             // 展開節點
            $("#jstree").on("loaded.jstree", function (event, data) {
                // 展開所有節點
                //$('#jstree').jstree('open_all');
                // 展開指定節點
                //data.instance.open_node(1);     // 單個節點 （1 是頂層的id）
                data.instance.open_node([1, 10]); // 多個節點 (展開多個幾點只有在一次性裝載后所有節點后才可行）
            });

            // 所有節點都加載完后
            $("#jstree").on("ready.jstree", function (event, data) {
                //alert('all ok');
                data.instance.open_node(1); // 展開root節點
                //// 隱藏根節點 http://stackoverflow.com/questions/10429876/how-to-hide-root-node-from-jstree
                $("#1_anchor").css("visibility", "hidden");
                $("li#1").css("position", "relative")
                $("li#1").css("top", "-20px")
                $("li#1").css("left", "-20px")
                $(".jstree-last .jstree-icon").first().hide();
            });
            
            // 獲得點擊節點的id
            $('#jstree').on("changed.jstree", function (e, data) {
                console.log("The selected nodes are:");
                console.log(data.selected);
                alert('node.id is:' + data.node.id);
                alert('node.text is:'+data.node.text);
                console.log(data);

                // TODO: 傳遞給Tab
                //$.ajax({
                //    'url': 'Home/GetTreeData/',
                //    'data': { 'id': data.node.id }
                //});
            });
        });// end ready
</script>

根節點的父項是0，根節點只有一個，似乎顯示出來也不好看：

所以我們把它隱藏起來：

 

PS:

ready 和loaded  的區別：
loaded.jstree: triggered after the root node is loaded for the first time
ready.jstree : triggered after all nodes are finished loading

 

參考：

https://github.com/vakata/jstree

https://groups.google.com/forum/#!forum/jstree

http://www.jstree.com/

http://www.codeproject.com/Questions/731612/jstree-binding-with-json-data-send-from-controller

--End--