easyui-sidemenu 菜单后台加载

前言

一个项目的功能较齐全，而齐全就预示着功能菜单比较长，但是现实中在不同的甲方使用中往往只需要摘取其中几项功能，所以就想到用配置菜单以满足其需求，且无需变更原始代码，查找一些资料总是似是而非或是誊抄别的什么，不知所云。最后自己总结了下，给需要的人或是下次自己再次用到的时候以参考。

首先看一个基础的侧边栏案例：


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 SideMenuh2>
		<p>Collapse the side menu to display the main icon.p>
		<div style="margin:20px 0;">
			<a href="javascript:;" class="easyui-linkbutton" onclick="toggle()">Togglea>
		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; }        //title
        public string iconCls { set; get; }     //图标
        public string url { set; get; }         //路径
        public string state { set; get; }       //状态 open 展开折叠
        public List children =null;
    }

然后设置配置文件（其中配置文件类型太多，XML,JSON.DEF......）根据自己擅长方向来，最终能正确获取到想要的数据即可：


"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：


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 SideMenuh2>
		<p>Collapse the side menu to display the main icon.p>
		<div style="margin:20px 0;">
			<a href="javascript:;" class="easyui-linkbutton" onclick="toggle()">Togglea>
		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>

按照上述步骤，基本上就搞定了加载配置菜单。全是硬货，一目了然。散花。

相关阅读:
软件测试工程师的职场发展顺序，月薪30k的测试岗技术要求是真的高...
CSAPP Attack Lab
关于 HTML 的一切：初学者指南
 QT QTextEdit富文本插入字体-表格-编号-图片-查找-语法高亮功能
 Jenkins集成AppScan实现
 XPath的使用
 C++编程题目2
Base64隐写
 【python】自动化工具Selenium与playwright去除webdriver检测
 14 【TS类型声明 keepAlive】
原文地址：https://blog.csdn.net/weixin_40899924/article/details/132756303

easyui-sidemenu 菜单 后台加载

前言

easyui-sidemenu 菜单后台加载