JS初始化菜单

这里以iframe版本为例。您可以将下面的代码放到 `index.min.js` 中，要放到 `;jQuery( function() {});` 外面，然后直接使用 `setSidebar(menus);`，调用时传入的参数，可以是 `json` 字符串，也可以是对象，不需要是树状结构的。

以下是主要的js代码。

```javascript
var menu_list = [{"id":"1","name":"后台首页","url":"lyear_main_1_v5.html","pid":0,"icon":"mdi mdi-home","is_out":0,"is_home":1},{"id":"2","name":"布局示例","url":"#!","pid":0,"icon":"mdi mdi-palette","is_out":0,"is_home":0},{"id":"3","name":"表单布局示例","url":"lyear_layout_form.html","pid":2,"icon":"","is_out":0,"is_home":0},{"id":"4","name":"聊天页面示例","url":"lyear_layout_chat.html","pid":2,"icon":"","is_out":0,"is_home":0},{"id":"5","name":"logo处使用文字","url":"lyear_layout_logo_text.html","pid":2,"icon":"","is_out":1,"is_home":0},{"id":"6","name":"多级菜单","url":"#!","pid":0,"icon":"mdi mdi-menu","is_out":0,"is_home":0},{"id":"7","name":"一级菜单","url":"#!","pid":6,"icon":"","is_out":0,"is_home":0},{"id":"8","name":"一级菜单","url":"#!","pid":6,"icon":"","is_out":0,"is_home":0},{"id":"9","name":"二级菜单","url":"#!","pid":8,"icon":"","is_out":0,"is_home":0},{"id":"10","name":"二级菜单","url":"#!","pid":8,"icon":"","is_out":0,"is_home":0},{"id":"11","name":"三级菜单","url":"#!","pid":10,"icon":"","is_out":0,"is_home":0},{"id":"12","name":"三级菜单","url":"#!","pid":10,"icon":"","is_out":0,"is_home":0}];

setSidebar(menu_list);

/**
 * 菜单
 * @param data 菜单JSON数据
 *        id 菜单唯一ID
 *        name 菜单名称
 *        url 菜单链接地址
 *        icon 图标
 *        pid  父级ID
 *        is_out 是否外链0否|1是,外链a标签没有class='multitabs'
 *        is_home 是否首页
 */
function setSidebar(data){
    if (data.length == 0) return false;
    var treeObj = getTrees(data, 0, 'id', 'pid', 'children');
    html = createMenu(treeObj, true);
    $('.sidebar-main').append(html);
}

/**
 * 树状的算法
 * @params list     代转化数组
 * @params parentId 起始节点
 * @params idName 主键ID名
 * @params parentIdName 父级ID名称
 * @params childrenName 子级名称
 * @author CSDN博主「伤包子」
 */
function getTrees(list, parentId, idName, parentIdName, childrenName) {
    let items= {};
    // 获取每个节点的直属子节点，*记住是直属，不是所有子节点
    for (let i = 0; i < list.length; i++) {
         let key = list[i][parentIdName];
         if (items[key]) {
             items[key].push(list[i]);
         } else {
             items[key] = [];
             items[key].push(list[i]);
         }
     }
     return formatTree(items, parentId, idName, childrenName);
}
/**
 * 利用递归格式化每个节点
 */
function formatTree(items, parentId, idName, childrenName) {
    let result = [];
    if (!items[parentId]) {
        return result;
    }
    for (let t in items[parentId]) {
        items[parentId][t][childrenName] = formatTree(items, items[parentId][t][idName], idName, childrenName)
        result.push(items[parentId][t]);
    }
    return result;
}
```

菜单这一块的html代码，保留如下：
```html
<div class="lyear-layout-sidebar-info lyear-scroll">

<div class="sidebar-footer">
    <p class="copyright">
      <span>Copyright &copy; 2022. </span>
      <a target="_blank" href="http://www.bixiaguangnian.com">笔下光年</a>
      <span> All rights reserved.</span>
    </p>
  </div>
</div>
```

> 注意：菜单的json串的变量，你在实际应用中可通过ajax从后端接口获取。

插件项目中页面名字：`lyear_layout_js_sidebar.html`

演示地址：http://lyear.itshubao.com/v5/example/