easyui-sidemenu 菜单 后台加载
前言
一个项目的功能较齐全，而齐全就预示着功能菜单比较长，但是现实中在不同的甲方使用中往往只需要摘取其中几项功能，所以就想到用配置菜单以满足其需求，且无需变更原始代码，查找一些资料总是似是而非或是誊抄别的什么，不知所云。最后自己总结了下，给需要的人或是下次自己再次用到的时候以参考。
首先看一个基础的侧边栏案例：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>侧边栏</title><link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css"><link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/color.css"><link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/demo/demo.css"><script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script><script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script></head><body><!-- 侧边菜单 --><h2>Basic SideMenu</h2><p>Collapse the side menu to display the main icon.</p><div style="margin:20px 0;"><a href="javascript:;" class="easyui-linkbutton" onclick="toggle()">Toggle</a></div><div id="sm" class="easyui-sidemenu" data-options="data:data, onSelect: onSideMenuSelect"></div><script type="text/javascript">var data = [{text: 'Item1',iconCls: 'icon-sum',state: 'open',children: [{text: 'Option1'，url: '关联网页路径'},{text: 'Option2'},{text: 'Option3',children: [{text: 'Option31'，url: '关联网页路径'},{text: 'Option32'，url: '关联网页路径'}]}]},{text: 'Item2',iconCls: 'icon-more',children: [{text: 'Option4',url:'关联网页路径'},{text: 'Option5',url:'关联网页路径'},{text: 'Option6',url:'关联网页路径'}]}];function toggle(){var opts = $('#sm').sidemenu('options');$('#sm').sidemenu(opts.collapsed ? 'expand' : 'collapse');opts = $('#sm').sidemenu('options');$('#sm').sidemenu('resize', {width: opts.collapsed ? 60 : 200})}function onSideMenuSelect(item){}</script></body>
</html>这是一个固定的菜单栏，菜单已完全展示，点击加载相对应的url内容。
观察属性有：text（名称），iconCls（图标），url（路径），state（状态，折叠展开），children（子节点-属性与父节点一致）这是最常用的，其余的属性暂不启用不一一叙述。
那么首先要有一个菜单对象包含这些属性：
public class SidemenuModel{public string text { set; get; } //titlepublic string iconCls { set; get; } //图标public string url { set; get; } //路径public string state { set; get; } //状态 open 展开折叠public List<SidemenuModel> children =null;}然后设置配置文件（其中配置文件类型太多，XML,JSON.DEF......）根据自己擅长方向来，最终能正确获取到想要的数据即可：
<?xml version="1.0" encoding="GBK" standalone="yes"?>
<SIDEMENU_LIST><SIDEMENU text="Fname" iconCls="icon-mp" url="" state="open" show="1"><CHILDREN text="Cname" iconCls="icon-search" url="../**/***" show="1"/></SIDEMENU>。。。
</SIDEMENU_LIST>这是一个xml配置（打个样），加了一个show属性，区分哪些是需要的菜单
剩下的就是读取与缓存了。。这一步根据自己擅长来。
最终HTML：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>侧边栏</title><link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css"><link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/color.css"><link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/demo/demo.css"><script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script><script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script></head><body><!-- 侧边菜单 --><h2>Basic SideMenu</h2><p>Collapse the side menu to display the main icon.</p><div style="margin:20px 0;"><a href="javascript:;" class="easyui-linkbutton" onclick="toggle()">Toggle</a></div><div id="sm" class="easyui-sidemenu" ></div><script type="text/javascript">$(function () {InitTree();})function InitTree() {$.ajax({url: "/BasicMain/GetSidemenuList",type: "post",async: false,success: function (data) {$('#sm').sidemenu({data: data,onSelect: onSideMenuSelect,border: false});}});}function toggle(){var opts = $('#sm').sidemenu('options');$('#sm').sidemenu(opts.collapsed ? 'expand' : 'collapse');opts = $('#sm').sidemenu('options');$('#sm').sidemenu('resize', {width: opts.collapsed ? 60 : 200})}function onSideMenuSelect(item){//业务处}</script></body>
</html>按照上述步骤，基本上就搞定了加载配置菜单。全是硬货，一目了然。散花。