ztree树形插件之查询分类数据

最新推荐文章于 2024-01-30 20:03:36 发布

*千殇*

最新推荐文章于 2024-01-30 20:03:36 发布

阅读量691

点赞数 1

CC 4.0 BY-SA版权

分类专栏： ztree 文章标签： ztree树形插件之查询分类数据

本文链接：https://blog.youkuaiyun.com/weixin_44540178/article/details/97394490

ztree 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何在.NET环境中利用ZTree插件实现数据分类的递归展示，涵盖类定义、查询方法及树形图配置，适用于上下级分类的数据结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在软件中一些数据需要通过分类来归纳数据，存储数据，以方便数据的查询和查询已有数据，
对于存在上下级的分类的表，则需要用用到递归的方式，对分类进行分配。
表的设置：
在这里插入图片描述

使用ztree树形插件中的其中一种分类方式，实现分类。
ztree树形插件提供多种树形分类方法。
先定义一个类

namespace WisdomCommerce.EntityClass
{
    public class zTreeNode
    {
        ///（ 副）父ID
        public int? pId { get; set; }
        /// 子ID
        public int? id { get; set; }
        /// 节点名
        public string name { get; set; }

    }
}


 /// 查询方法
 public ActionResult TreeData()
        {
            var listClientType = (from tbCustype in myModels.S_CustomerType
                                  select new zTreeNode
                                  {
                                      id = tbCustype.CustomerTypeID,//主键ID
                                      pId = tbCustype.B_C_CustomerTypeID,//递归ID
                                      name = tbCustype.CustomerTypeName,//分类名称
                                  });
            return Json(listClientType, JsonRequestBehavior.AllowGet);
        }

需要使用到ztree的Css样式和js文件
在这里插入图片描述
文件的路径换成您文件路径。

在这里插入图片描述

  //树形图的配置参数
        var setting = {
            async: {
                enable: true//设置 zTree 是否开启异步加载模式
            },
            data: {
                simpleData: {
                    enable: true//确定 zTree 初始化时的节点数据、异步加载时的节点数据、或 addNodes 方法中输入的 newNodes 数据是否采用简单数据模式 (Array)
                }
            },
            callback: {
                onClick: zTreeOnClick,//用于捕获节点被点击的事件回调函数
            }
        };
        //客户分类树形图
        $(function () {
            $.ajax({
                url: 'TreeData',//控制器链接
                type: 'POST',//数据传输的方式
                dataType: "json",//传输的数据格式
                async: false,//取消异步
                success: function (data) {//传回节点数据数组
                    $.fn.zTree.init($("#treeDemo"), setting, data);///初始化树形
                }
            });
            //获取节点树的数据
            var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
            //展开全部节点
//（可写可不写，不写默认为false，即不展开树形，只显示最高级节点，需要手动展开树形节点）
            treeObj.expandAll(true);
        });
//点击事件
        function zTreeOnClick(event, treeId, treeNode) {

}