纯js代码来实现树形菜单

纯js代码来实现树形菜单（自定义树形菜单）

开发工具与关键技术：MVC、JavaScript
撰写时间：2019/06/15

树形菜单：其实树形菜单实现起来挺简单的，只是我的案例主要是使用插件和js代码实现的。
下面就来说说实现的过程吧，
我呢就直接用插件把样式先搭起来，首先就是先把框架给搭起来：

<style>.west {width: 200px; padding: 10px;}</style>
<div region="west" class="west" title="树形菜单">
        <ul id="tree"></ul>
 </div> 

效果就是这样。
也就是说接下来的树形菜单是出现在“树形菜单”的下方的。
接下来就是使用JS和插件把树形菜单放到ul标签里去，
全部插件：《注意：引用时要把路径改为自己本地的》

<script src="~/ifame/js/jquery-1.7.2.min.js"></script>
<link href="~/ifame/css/easyui.css" rel="stylesheet" />
<script src="~/ifame/js/jquery.easyui.min.js"></script>

JS代码：

 $(function () {
            //动态菜单数据
            var treeData = [{
                //第一个树形菜单
                text: "菜单",
                state: "closed",
                children: [{
                    text: "数据表格",//子文件
                }, {
                    text: "基础资料",//子文件
                },
                {
                    text: "供应商",//第二个父文件
                    state: "closed",
                    children: [{
                        text: "联系人",//子文件
                    }, {
                        text: "电话",//子文件
                    },
                    {
                        text: "第三个父文件",
                        state: "closed",
                        children: [{
                            text: "子文件1",
                        }, {
                            text: "子文件2",
                        }, {
                            text: "子文件3",
                        }]
                    }]
                }]
            }];
           
            //实例化树形菜单
            $("#tree").tree({
                data: treeData,
                lines: true,
                onClick: function (node) {
                    if (node.attributes) {
                        Open(node.text, node.attributes.url);
                    }
                }
            });
        });

效果图：