制作树状图思路

深碍√TFBOYSˉ_ 2023-03-12 14:30 5阅读 0赞

**开发工具与关键技术：** ** **** **** VS2015       mvc      ****制作一个简单的树状图需要知道什么？**** ****；**

**作者：刘佳明**

**需要插件为：**

**HTML:**

<div class="con">
    
                <div class="containOne">
    
                   <b>系统角色</b>  
    
                <ul id="treeOne" class="ztree node_name"></ul>
    
            </div>

**Javascript:**

**控制器中的方法：**

public ActionResult GongNengZtree()
            {
                var List = (from tb in myModel.S_Module
                            select new zTreeNode
                            {
                                SID = tb.ModuleID,
                                PID = tb.ModuleID,
                                NodeName = tb.Module
                            }).ToList();
                List<Dictionary<string, Object>> jsonlist = new List<Dictionary<string, object>>();
                List<zTreeNode> ztree = new List<zTreeNode>();
                for (int i = 0; i < List.Count; i++)
                {
                    zTreeNode tree = new zTreeNode();
                    if (i==0)
                    {
                        tree.PID =0;//父亲id  
                        tree.SID = 0;//儿子id 
                        tree.NodeName = List[i].NodeName.ToString();//节点名
                        List.Add(tree);
                    }
                    else
                    {
                        tree.PID = 0;//父亲id  
                        tree.SID = List[i].SID;//儿子id 
                        tree.NodeName = List[i].NodeName.ToString();//节点名
                        ztree.Add(tree);//将对象添加到List<T>的结尾处
                    }
                }
                foreach (var modle in ztree)
                {
                    Dictionary<string, object> jsonZtree = new Dictionary<string, object>();
                    jsonZtree.Add("pId", modle.PID);
                    jsonZtree.Add("id", modle.SID);
                    jsonZtree.Add("name", modle.NodeName);
                    jsonlist.Add(jsonZtree);
                }
                return Json(jsonlist, JsonRequestBehavior.AllowGet);
            }

效果图如下：

![20200509103750290.png][]

数据库的结构是这样的：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70][]

**通过相同的方法还可以实现出如下的效果：(对应的数据库结果不在局限于一个表：)**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70 1][]

ztree官网文档

链接：[http://www.treejs.cn/v3/main.php\#\_zTreeInfo][http_www.treejs.cn_v3_main.php_zTreeInfo]

[20200509103750290.png]: /images/20230312/4a6da903cf444b4eacd090bd526d6804.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70]: /images/20230312/c06e17766375492bb9f919212a379c16.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70 1]: /images/20230312/32b4b458817745a69729cad78380ce84.png
[http_www.treejs.cn_v3_main.php_zTreeInfo]: http://www.treejs.cn/v3/main.php#_zTreeInfo