数据树形

最新推荐文章于 2024-09-08 16:54:43 发布

原创最新推荐文章于 2024-09-08 16:54:43 发布 · 817 阅读

0 ·

CC 4.0 BY-SA版权

因项目要求，需实现树形菜单导航效果。重要步骤是数据库设计，要设置商品类型名称与隶属父级ID字段以区分父子级元素。完成树形功能需引入插件，还给出了控制器代码和页面主要对应代码，用于查询数据并返回Json。

数据树形

开发工具与关键技术：we
作者：熊琪
撰写时间：2019.06.17

由于项目的要求所以对树形菜单有了基本的了解，主要功能就是体现一个导航的效果，具体要实现的重要步骤就是数据库的设计，因为数据添加树形菜单栏也会跟随着添加，所以要对数据库中相应的表进行设计，如图：
在这里插入图片描述
（图一）
主键ID自动累加，如图所示SizeGrouID是CommodityType表中的一外键，该外键是由于项目中其他功能的需要所对应设计的，而后面的CommodityTypeName,和Commodity-BigTypeID才是该表需要的字段，商品类型名称与隶属父级ID,添加后者这个字段就是为了设置父级元素与子级元素。原理就是看图中的CommodityTypeID对应的CommodityBigTypeID
(也就是父级ID)可以是自己本身，比如ID为2时他的父级ID为1所以就是上衣的父级为服装，同理裤子的父级ID为1那么裤子父级也为服装。总结出有关规律，就当自己本身的ID与父级ID相等时就证明该主键ID对应的name在树形当中是父级节点，对应的CommodityName就是树形中对应的节点名称。
完成该树形功能需要引入对应的插件，在http://zTree.me/链接中可查询插件
插件如图：
在这里插入图片描述
对应引入一个css和js就好了。
控制器代码：

public JsonResult Get_TreeView()
        {
        List<Dictionary<string, object>> jsonlist = new List<Dictionary<string,object>>();
            List<TreeVo> treeList = new List<TreeVo>();
            var listAuthorityTemplet = (from tbCommodityType in myModels.D_CommodityType
                   select new TreeVo
                     {pid = tbCommodityType.CommodityBigTypeID,//父亲id
                       d = tbCommodityType.CommodityTypeID,//儿子id
                      name = tbCommodityType.CommodityTypeName,//节点名称}).ToList();
            for (int i = 0; i < listAuthorityTemplet.Count; i++)
            {
                TreeVo tree = new TreeVo();
                tree.pid = listAuthorityTemplet[i].pid;//父亲id
                tree.id = listAuthorityTemplet[i].id;//儿子id;
                tree.name = listAuthorityTemplet[i].name.ToString();//节点名称
                treeList.Add(tree);
            }
            foreach (var model in treeList)
            {
                Dictionary<string, object> jsonobj = new Dictionary<string, object>();
                jsonobj.Add("pId", model.pid);//父id
                jsonobj.Add("id", model.id);//子id
                jsonobj.Add("name", model.name);//节点名称
                jsonlist.Add(jsonobj);
            }return Json(jsonlist, JsonRequestBehavior.AllowGet);}

如代码所述控制器方法名称为Get_TreeView，第一句与第二句都是实例化，第二句是事例化自己的实体类，类中有pid,与id1和name,在数据库中查出对应的数据并赋值与实体类，查询的就是在上所述的商品类别表，pid代表的是父级，id代表的是子级id,name代表的是
节点的名称。然后接着for循环，意思就是当i的条数小于查出来的条数父节点，子节点，节点名称就继续添加。对应的实例化的jsonobj中的pId,与pid对应添加，id与id对应，name与节点名对应。最后返回Json。
页面主要对应代码：

$(function () {$.ajaxSettings.async = false; 
            $.ajax({   type: "post",
                     url: "/Commoditymanagement/Commodity/Get_TreeView",
                     success: function (data) {
                    $.fn.zTree.init($("#sxt"), setting, data);
                }
            }); 
        });

sxt是对应的div中的id，url中是对应控制器方法。