# ajax加載側邊欄 ## 11.2.ajax加載側邊欄 ajax加載可以使用laytpl來渲染，[查看演示](https://demo.easyweb.vip/iframe/page/example/side-ajax.html)。 ~~~ <div class="layui-side"> <div class="layui-side-scroll"> <ul class="layui-nav layui-nav-tree" lay-filter="admin-side-nav" lay-shrink="all"></ul> </div> </div> <script id="sideNav" type="text/html"> {{# layui.each(d, function(index, item){ }} <li class="layui-nav-item"> <a lay-href="{{item.url}}"><i class="{{item.icon}}"></i>&emsp;<cite>{{ item.name }}</cite></a> {{# if(item.subMenus&&item.subMenus.length>0){ getSubMenus(item.subMenus); } }} </li> {{# }); }} {{# function getSubMenus(subMenus){ }} <dl class="layui-nav-child"> {{# layui.each(subMenus, function(index, subItem){ }} <dd> <a lay-href="{{ subItem.url }}">{{ subItem.name }}</a> {{# if(subItem.subMenus&&subItem.subMenus.length>0){ getSubMenus(subItem.subMenus); } }} </dd> {{# }); }} </dl> {{# } }} </script> <script> layui.use([ 'element', 'admin','laytpl'], function () { var $ = layui.jquery; var element = layui.element; var admin = layui.admin; var laytpl = layui.laytpl; $.get('json/side.json', function (res) { laytpl(sideNav.innerHTML).render(res.data, function (html) { $('[lay-filter=admin-side-nav]').html(html); element.render('nav', 'admin-side-nav'); // 這里非常重要 }); }, 'json'); }); </script> ~~~ json數據格式： ~~~ { "code": 200, "msg": "", "data": [{ "name": "系統管理", "icon": "layui-icon layui-icon-set", "url": "javascript:;", "subMenus": [{ "name": "用戶管理", "url": "system/user.html" }] }] } ~~~