做树形图的方法

做树形图的方法

开发工具与关键技术：Visual Studio 2015
作者：徐晶旗
撰写时间：2019年6月27日 

下面是我做项目时用到的的树形图代码,首先要引用树形图的css插件和js的插件,还要引用一个jquery的插件。

@*插件*@
<link href="~/Plugins/zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<script src="~/Plugins/jquery-3.2.1.min.js"></script>
<script src="~/Plugins/zTree_v3/js/jquery.ztree.core-3.5.js"></script>

下面是css样式

/*Css代码*/                    
  .ztree {
            margin: 0;
            height: 65%;
            width: 255px;
            background: white;
            overflow-x: auto;
            overflow-y: scroll;
            border: 1px solid #dcdcdc;
        }
        #sxt li a .ico_open, #sxt li a .ico_close, #sxt li a .ico_docu {
            background: url(/Plugins/treeImag/one.png) 0 0 no-repeat;
        }

下面是树形图的控制器代码，写了一个查询的方法，这里查的是商品类别表，然后查询到的数据就会通过树形图的样式展现出来，这里的TreeVo是一个封装好的实体类。

 //树形图控制器代码 
   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.CommodityTypeID_Fa, //父id  
                                      id = 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);
        }

js里面的一些代码

//配置树形参数
            var setting = {
                data: {
                    simpleData: {
                        enable: true
                    }
                },
                callback: {
                  onClick: SetIcon                }
            };
            $(function () {
                $.ajaxSettings.async = false;
                //加载树形
                $.ajax({
                    type: "post",
                    url: "Get_TreeView",
                    success: function (data) {
                        $.fn.zTree.init($("#sxt"), setting, data);
                    }
                });
                SetIcon();
            });

下面是给树形图不同层次加上不同的图片的方法，让每一层的图片都不同，更好区分商品的隶属级别

function SetIcon() {
//给树形图不同层次加上不同的图片
                var treeObj = $.fn.zTree.getZTreeObj("sxt"); 
                var two = treeObj.getNodesByParam("level", 1, null);
                for (var i = 0; i < two.length; i++) {
                    $(two[i]).attr("icon", "/Plugins/treeImag/two.png");
                };
                var two = treeObj.getNodesByParam("level", 2, null);
                for (var i = 0; i < two.length; i++) {
                    $(two[i]).attr("icon", "/Plugins/treeImag/tree.png");
                };
                var two = treeObj.getNodesByParam("level", 3, null);
                for (var i = 0; i < two.length; i++) {
                    $(two[i]).attr("icon", "/Plugins/treeImag/four.png");
                };
            }