jstree使用笔记

1、前言

最近在做一个项目，需要使用树形菜单，网上搜索了一大堆，发现jstree挺好用的，功能很强大，下面介绍下简单的使用，以备忘

2、引入样式和js文件

在这里其实引入两个文件就够用。网上搜索jstree下载，得到一个jstree的文件夹，引入style.min.css和jstree.min.js即可，style.min.css在theme文件夹下，至于选择哪种风格自己决定。如下：

<link href="~/scripts/jtree/themes/default/style.min.css" rel="stylesheet" />
<script src="~/scripts/jtree/jstree.min.js"></script>

3、开始使用

创建一个div如下：

<div id="FlatTree" style="" class="">
</div>

初始化：

$('#FlatTree').jstree({
            "core": {
                'data': {
                    "url": '@Url.Action("TreeData", "DepartmentManage")',
                    "data": function (node) {
                        return { "id": node.id };
                    }
                    // "dataType": "json"
                }
            }
        });

以上的初始化方式属于动态加载的一种，也就是说点击一个节点再动态获取节点下的数据重新构建为子数。该初始化的意思就是每次点击节点都会执行代码中的action，并把当前点击节点id传入处理函数当中。后台根据这个参数返回相应的数据，当然你也可以在这里传输任何你想要的数据值，这在jsTree中也称为“懒加载”。以上这种写法为ajax的get请求方式。（此处的点击节点指的是点击节点名称前面展开符号，当然双击节点名称也是同样的效果）

后台代码：

public List<TreeModel> TreeData(string id)
        {
            List<TreeModel> list1 = new List<TreeModel>();
            //懒加载
            if (id == "#" || id == null)
            {
                var r = service.TreeDataRoot(id);
                foreach (var item in r)
                {
                    var depart = service.TreeDataSubRoot(Convert.ToString(item.id));//TreeDateSubRoot获取的父节点下   //的子节点信息。
                    list1.Add(new TreeModel(item.company, "company" + Convert.ToString(item.id),       "/images/tree.png",    depart.Count > 0 ? true : false));//TreeModel是自己建的一个实体类，将在下面给出，此处将数据 //装在实体中，软后放入list，是为了将list转换为json，提供给前端的jsTree解析生成树。
                }
            }
            else
            {
                var r = service.TreeDataSubRoot(id.Substring(7));
                foreach (var item in r)
                {
                    list1.Add(new TreeModel(item.department, Convert.ToString(item.id), "/images/leaf2.png",     false));
                }
            }
            return list1;
        }

当第一次初始化树的时候，传入的id为“#”，此处为了保险加了一个“null”。第一次初始化就执行else中的代码，当后面点击节点调用该函数的时候，传入了节点的id，获取相应的数据。当然此处的节点的id也是我自己指定的。下面介绍

TreeModel实体类

public class TreeModel
    {
        //{
        //    "text": "深圳银宝山新",
        //     "icon": "/images/tree.png",
        //     "id":"wwwwwwwwwww",
        //	"children": false
        //}
        public string text { get; set; }
        public string id { get; set; }
        public string icon { get; set; }
        public bool children { get; set; }
        public TreeModel(string text, string id, string icon, bool children)
        {
            this.text = text;
            this.id = id;
            this.icon = icon;
            this.children = children;
        }
    }

实体类中注释的地方就是要返回去的json数据格式。当然jsTree这个数据格式还有别的样子，而且还有别的属性（其他属性查找资料），只是我项目中只要这几个属性就够了。children是bool类型的，它是用来标识是否还有子节点数据，true代表有，false代表没有。icon是显示的时候节点前的图表（小图片，美观用的）。这里id就是指定的每个节点的id，也就是每次点击传入的id值。这里你只需要将id返回回去，它就会对应的为这个节点的id属性附上我们传过去的id值。

4、别的一些操作

刷新树数据

$('#FlatTree').jstree(true).refresh();

节点名称的点击事件

$('#FlatTree').on("changed.jstree", function (e, data) {
        //data.selected是节点的id属性
        var id = "";
        var type = "";
        //刷新树时也会触发changed方法，那么此时此处的data.selected[0] 就是undefiend了，所以此处判断避免错误
        if (data.selected[0] == undefined) {
            return;
        }
    });

5、总结

基本上，上面的代码能够满足简单的使用。如果需要更深层次的了解，还需要查阅资料。 注意：在传到前台的数据中，子节点和父节点的id都要保证唯一性，也就是你构建json的时候要保证每个实体中id的唯一性。这样树才会被很好的创建出来。