树形图

《树形图》

开发工具：VS 2015, SQL Server
相关插件：树形插件

一、数据库

数据库中的父子id要区分好

二、界面

三、代码：

1.控制层代码

public JsonResult LouDongInforTree()// (树形代码)
        {
            List<Dictionary<string, object>> jsonlist = new List<Dictionary<string, object>>();
            List<LouDongInfor> treeList = new List<LouDongInfor>();
            var listAuthorityTemplet = (from TbTrees in myModels.B_RegionList
                                        select new LouDongInfor
                                        {
                                            SuperiorCode = TbTrees.SuperiorCode,//父id  
                                            RegionID = TbTrees.RegionID,//子id        
                                            RegionMC = TbTrees.RegionMC,//节点名
                                        }).ToList();
            for (int i = 0; i < listAuthorityTemplet.Count; i++)
            {
                LouDongInfor tree = new LouDongInfor();
                tree.SuperiorCode = listAuthorityTemplet[i].SuperiorCode;//父id
                tree.RegionID = listAuthorityTemplet[i].RegionID;//子id   
                tree.RegionMC = listAuthorityTemplet[i].RegionMC.ToString();//节点名
                treeList.Add(tree);
            }
            foreach (var model in treeList)
            {
                Dictionary<string, object> jsonobj = new Dictionary<string, object>();
                jsonobj.Add("id", model.RegionID);//父亲id
                jsonobj.Add("pId", model.SuperiorCode);//儿子id
                jsonobj.Add("name", model.RegionMC);//节点名称
                jsonlist.Add(jsonobj);
            }
            return Json(jsonlist, JsonRequestBehavior.AllowGet);
        }
        public ActionResult LouDongInforTreeTable(int RegionID, int SuperiorCode)
//显示数据
        {
            if (SuperiorCode == 0)
            {
                var a = (from dbRegionList in myModels.B_RegionList
                         where dbRegionList.RegionID == RegionID
                         select dbRegionList.RegionMC).FirstOrDefault();
                var b = "该级已是最高级！";
                var c = (from dbRegionList in myModels.B_RegionList
                         where dbRegionList.RegionID == RegionID
                         select dbRegionList.Remark).FirstOrDefault();
                LouDongTree myTree = new LouDongTree();
                myTree.RegionMC = a;
                myTree.SuperiorCodeName = b;
                myTree.Remark = c;
                return Json(myTree, JsonRequestBehavior.AllowGet);
            }
            if (SuperiorCode != 0)
            {
                var a = (from dbRegionList in myModels.B_RegionList
                         where dbRegionList.RegionID == RegionID
                         select dbRegionList.RegionMC).FirstOrDefault();
                var b = (from dbRegionList in myModels.B_RegionList
                         where dbRegionList.RegionID == SuperiorCode
                         select dbRegionList.RegionMC).FirstOrDefault();
                var c = (from dbRegionList in myModels.B_RegionList
                         where dbRegionList.RegionID == RegionID
                         select dbRegionList.Remark).FirstOrDefault();
                LouDongTree myTree = new LouDongTree();
                myTree.RegionMC = a;
                myTree.SuperiorCodeName = b;
                myTree.Remark = c;
                return Json(myTree, JsonRequestBehavior.AllowGet);
            }
            return Json("", JsonRequestBehavior.AllowGet);
        }

2.页面代码

function asdf() {
                $.ajax({
                    type: "Get",
                    url: "/ItemInfor/LouDongInfor/LouDongInforTree",
                    
                    success: function (data) {
                        $.fn.zTree.init($("#treeDemo"), setting, data);
                    }
                });
            }
            $(function () {
                $.ajax({
                    type: "Get",
                    url: "/ItemInfor/LouDongInfor/LouDongInforTree",
                   
                    success: function (data) {
                        $.fn.zTree.init($("#treeDemo"), setting, data);
                    }
                });
            })
            var setting = {
                check: {
                    enable: false,
                    chkStyle: "checkbox",
                    chkboxType: { "Y": "", "N": "" },
                    isSimpleData: true,              
//数据是否采用简单 Array 格式，默认false
                    treeNodeKey: "id",              
 //在isSimpleData格式下，当前节点id属性
                    treeNodeParentKey: "pId",       
 //在isSimpleData格式下，当前节点的父节点id属性
                    showLine: true,                  
//是否显示节点间的连线
                    checkable: true
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                },
                callback: {
                    onClick: zTreeOnClick,
//点击时调用zTreeOnClick函数
                    onNodeCreated: zTreeOnNodeCreated
//加载时调用的函数
                },
                view: {
                    selectedMulti: true
                },
                zTreeObj:{
                    expandAll: true,
                }
            };
            //展开所有节点
            function zTreeOnNodeCreated(e) {
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                zTree.expandAll(true);
            }
            //点击事件的方法
            function zTreeOnClick(event, treeId, treeNode) {
                var RegionID = treeNode.id;
                $("#RegionID").val(RegionID);
                var SuperiorCode = treeNode.pId;
                if (SuperiorCode == null || SuperiorCode == undefined) {
                    SuperiorCode = 0
                    $.post("/ItemInfor/LouDongInfor/LouDongInforTreeTable", { RegionID: RegionID, SuperiorCode: SuperiorCode }, function (data) {
                        //使用封装方法：绑定数据：实现数据回填
                        loadDatatoForm("tbLouDongInforTree", data);
                    });
                }
                else {
                    $.post("/ItemInfor/LouDongInfor/LouDongInforTreeTable", { RegionID: RegionID, SuperiorCode: SuperiorCode }, function (data) {
                        //使用封装方法：绑定数据：实现数据回填
                        loadDatatoForm("tbLouDongInforTree", data);
                    });
                } 
            }

四、总结：树形图可以把有层级意义的数据以非常直观的方式展现出来，例如权限，家庭信息等等都可以用到，对于一个编程员来说树形图是必不可少的东西。