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>到前端页面，这个时候树状就可以发挥作用了，非常简单和方便。大致就是这样了。

巴特西

ztree的用法

最新文章

热门文章