ztree的用法

哎哟，好久没写什么这个虽然没人看的博客了，其实这段时间情绪非常低谷，就没有写博客了，不过我还是回来了，回到正题，在前端页面编程的时候，我们经常用到树状，用原始的树状呢，功能没有那么强大，所以这个时候

我们需要引入一个非常好用的插件，ztree，其实就是JQuery的一个插件，这个是接口文档：http://www.treejs.cn/v3/api.php

然后呢  我们在页面中使用呢，就的先引入ztree ，这个是下载地址：https://gitee.com/zTree/zTree_v3/tree/master/js

这个是我引入的包：

下载之后放在你的js文件夹中方便引入就好了，然后就是在页面中引入：

<script src="~/js/ztree/jquery.ztree.core.min.js"></script>
<script src="~/js/ztree/jquery.ztree.exhide.min.js"></script>
<link href="~/css/zTreeStyle.css" rel="stylesheet" />
<script src="~/js/ztree/jquery.ztree.exedit.min.js"></script>
<script src="~/js/fuzzysearch.js"></script>

然后就可以开始使用了：

先定义一个<ul id="shuai" class="ztree"></ul>

然后 先写加载树状数据的函数：

 $(function () {
        Tree();
    });

    function Tree() {
        var setting = {

            data: {
                simpleData: {
                    enable: true
                }
            },
            view: {
                showIcon: false

            }
            ,
            callback: {
                onClick: TreeClick
            }
        };
        $.ajax({
            url: "", //这个是请求数据的action url
            type: "get",
            async: false,
            success: function (data) {   // data返回的数据
                $.fn.zTree.init($("#AccountTree"), setting, data.data);
                //初始化模糊搜索方法
                fuzzySearch('AccountTree', '#keyword', null, true); //引入模糊查询的插件就可以使用这个方法

            }
        });
    }

    function TreeClick(event, treeId, treeNode) {
        $('.layui-tab-title li').removeClass('layui-this');
        var treeObj = $.fn.zTree.getZTreeObj("AccountTree");
        var nodes = treeObj.getSelectedNodes();
        if (treeNode.pId == null) {
           //点击事件，当点击父节点时候，进行的操作
        }
        else {

        }
    }

这样就可以实现基本的树状结构啦，非常简单和方便，后端的话需要这样实现：

需要一个Nodelist去传递数据到前端页面：

public class NodeTree
    {
        /// <summary>
        /// 节点Id
        /// </summary>
        public string Id { get; set; }

        /// <summary>
        /// 父节点Id
        /// </summary>
        public string PId { get; set; }

        /// <summary>
        /// 节点名称
        /// </summary>
        public string Name { get; set; }

        /// <summary>
        /// 是否选中
        /// </summary>
        public bool Checked { get; set; }
    }

 public async Task<List<NodeTree>> GetSocialTree(string[] supplier)
        {
            // 返回的所有节点
            List<NodeTree> returnNodes = new List<NodeTree>();

            // 父节点
            List<NodeTree> Nodes = new List<NodeTree>();

            // 子节点
            List<NodeTree> FNodes = new List<NodeTree>();

            var query = db.database..Select(x => new NodeTree
            {
                Id = x.Name,
                Name = x.Name,
                PId = "0"
            });

            Nodes = await query.ToListAsync();

            var queryCity = db.SocialAccount.Where.Select(x => new NodeTree
            {
                Id = x.Id,
                Name = x.City,
                PId = x.Name
            });

            FNodes = await queryCity.ToListAsync();

            returnNodes.AddRange(Nodes);
            returnNodes.AddRange(FNodes);
            return returnNodes;
        }

这段代码是伪代码，只是举一个例子看起来更直观，总之返回list<nodes>到前端页面，这个时候树状就可以发挥作用了，非常简单和方便。大致就是这样了。