当前位置：首页 > news >正文

easyui-sidemenu 菜单后台加载

news 2025/9/15 18:58:44

前言

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

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

<!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>

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

easyui-sidemenu 菜单后台加载

前言一个项目的功能较齐全，而齐全就预示着功能菜单比较长，但是现实中在不同的甲方使用中往往只需要摘取其中几项功能，所以就想到用配置菜单以满足其需求，且无需变更原始代码，查找一些资料总是似是而非或是誊抄别的什…...

编程日记 2023/9/11 23:14:51

Python总结上传图片到服务器并保存的两种方式

一、前言图片保存到服务器的两种方法： 1、根据图片的 URL 将其保存到服务器的固定位置 2、根据 request.FILES.get("file") 方式从请求中获取上传的图片文件，并将其保存到服务器的固定位置二、方法 1、图片的 URL 要根据图片的 URL 将…...

编程日记 2023/9/11 23:13:50

【ETH】以太坊合约智能合约逆向方案

技术角度了解区块链区块链技术逆袭专栏文章目录区块链技术逆袭专栏获取合约代码逆向工具方案1方案2实操演示：获取合约代码在反编译之前，你需要先知道如果获取编译后的字节码。这里以 USDT 举例 eth.getCode(0xdAC17F958D2ee523a2206206994597C13D831ec7)字节码： 0x…...

编程日记 2023/9/11 23:12:48

课后作业： rootlinux:~/shell# cat qh.sh #!/bin/bash function sum_array() {local brr($*) local sum0for i in ${brr[*]} dosum$((sum i))doneecho $sum } arr(1 2 3 4 5) result$(sum_array ${arr[*]}) echo "数组的和为: $result"#!/bin/bash fun…...

编程日记 2023/9/11 23:11:47

AI绘画：Midjourney超详细教程Al表情包超简单制作，内附关键词和变现方式

大家好，本篇文章主要介绍AI绘画完成表情包的制作和变现方式分享。你还不会AI表情包制作吗？下面我们详细的拆解制作过程。跟着这个教程做出一套属于自己的表情包。核心工具Midjourney PS，你就可以得到一套自己的专属表情包啦~ 整体制作…...

编程日记 2023/9/11 23:10:45

Linux dup dup2函数

/*#include <unistd.h>int dup2(int oldfd, int newfd);作用：重定向文件描述符oldfd 指向 a.txt, newfd 指向b.txt,调用函数之后，newfd和b.txt close，newfd指向a.txtoldfd必须是一个有效的文件描述符 */ #include <unistd.h> #i…...

编程日记 2023/9/11 23:09:44

设计模式系列-外观模式

一、上篇回顾上篇我们主要讲述了创建型模式中的最后一个模式-原型模式，我们主要讲述了原型模式的几类实现方案，和原型模式的应用的场景和特点，原型模式适合在哪些场景下使用呢？我们先来回顾一下我们上篇讲述的3个常用的场景。 1…...

编程日记 2023/9/11 23:08:43

DBeaver 下载、安装与数据库连接（MySQL）详细教程【超详细，保姆级教程！！！】

本文介绍DBeaver 下载、安装与数据库连接（MySQL）的详细教程一、DBeaver 下载官网下载地址：https://dbeaver.io/download/ 二、安装 1、双击下载的安装包，选择中文 2、点击下一步 3、点击我接受 4、如下勾选，…...

编程日记 2023/9/11 23:07:42

使用adjustText解决标签文字遮挡问题python

使用adjustText解决文字遮挡问题 1、一个例子2、adjust_text的用法使用pip install adjustText或conda install -c conda-forge adjusttext来安装adjustText。安装成功之后，首先生成随机示例数据以方便之后的演示： 1、一个例子我们先不使用adjustText调整图像，直接绘制出原…...

编程日记 2023/9/11 23:06:41

[论文笔记]SiameseNet

引言这是Learning Text Similarity with Siamese Recurrent Networks的论文笔记。论文标题意思是利用孪生循环神经网络学习文本相似性。什么是孪生神经网络呢？满足以下两个条件即可：输入是成对的网络结构和参数共享(即同一个网络)如下图所示：看到这种图要知道可能代…...

编程日记 2023/9/11 23:05:39

只有个体户执照，可以用来在抖音开店吗？抖店开通问题解答

我是王路飞。在抖音开店的门槛，本身就是需要有营业执照的。至于执照的类型，其实主要看商家自己。如果你是新手商家，之前也没有怎么接触过电商行业，那么用个体执照在抖音开店足够用了，毕竟你要先入门，…...

编程日记 2023/9/11 23:04:38

微服务高可用容灾架构设计

导语相对于过去单体或 SOA 架构，建设微服务架构所依赖的组件发生了改变，因此分析与设计高可用容灾架构方案的思路也随之改变，本文对微服务架构落地过程中的几种常见容灾高可用方案展开分析。作者介绍刘冠军腾讯云中间件中心架构组负责…...

编程日记 2023/9/11 23:03:37

记录docker 部署nessus

1、开启容器 docker run -itd --nameramisec_nessus -p 8834:8834 ramisec/nessus 2、登录 ：注意是https https://ip8843 3、修改admin密码 #进入容器 docker exec -it ramisec_nessus /bin/bash#列出用户名 /opt/nessus/sbin/nessuscli lsuser#修改密码&a…...

编程日记 2023/9/11 23:02:36

qt 正则表达式

以上是正则表达式的格式说明以下是自己写的正则表达式 22-25行是一种设置正则表达式的方式， 29-34行 : 29行 new一个正则表达式的过滤器对象 30行正则表达式的过滤格式这个格式是0-321的任意数字都可以输入 31行将过滤格式保存到过滤器对象里面 32行将验…...

编程日记 2023/9/11 23:01:35

l8-d13 UNIX域套接字

一、UNIX 域流式套接字本地地址 struct sockaddr_un { unsigned short sun_family; /* 协议类型 */ char sun_path[108]; /* 套接字文件路径 */ }; UNIX 域流式套接字的用法和 TCP 套接字基本一致，区别在于使用的协议和地址不同 UNIX 域流式套接字服务器…...

编程日记 2023/9/11 23:00:34

@RequiredArgsConstructor(onConstructor=@_(@Autowired))是什么语法？

这是 Lombok 语法糖写法。在我们写controller或者Service层的时候，需要注入很多的mapper接口或者另外的service接口，这时候就会写很多的AutoWired注解 lombok提供注解： RequiredArgsConstructor(onConstructor __(Autowired))写在类上可以…...

编程日记 2023/9/11 22:59:33

FL Studio Producer Edition 21.0.3.3713中文完整破解版功能特点及安装激活教程

FL Studio Producer Edition 21.0.3.3713中文完整破解版是一款由Image Line公司研发几近完美的虚拟音乐工作站,同时也是知名的音乐制作软件。它让你的计算机就像是全功能的录音室，漂亮的大混音盘，先进的创作工具，让你的音乐突破想象力的限制。…...

编程日记 2023/9/11 22:58:31

Mybatis 动态语言 - mybatis-velocity

前面我们介绍了Mybatis动态SQL的使用；本篇我们介绍使用mybatis-velocity动态语言生成动态SQL。如果您对Mybatis动态SQL不太了解，建议您先进行了解后再阅读本篇，可以参考： Mybatis 动态SQL – 使用if,where标签动态生成条件语句…...

编程日记 2023/9/11 22:57:30

Fourier傅里叶变换的线性性质和位移性质

Fourier傅里叶变换的线性性质和位移性质为了阐述方便, 假定在这些性质中, 凡是需要求Fourier变换的函数都满足Fourier积分定理中的条件。在证明这些性质时, 不再重述这些条件。一、线性性质设 F 1 ( ω ) F [ f 1 ( t ) ] {F_1}(\omega ) {\mathscr F}[{f_1}(t)] F1(…...

编程日记 2023/9/11 22:56:28

# 磁盘引导方式相关知识之BIOS、msdos、MBR、UEFI、gpt、esp、csm

磁盘引导方式相关知识之BIOS、msdos、MBR、UEFI、gpt、esp、csm 磁盘、分区、引导等知识经常似懂非懂，不能完全说清楚，梳理下： 序号主板芯片引导方式支持的磁盘分区表类型支持的磁盘分区表格式对应引导位置备注1BIOS传统方式（俗…...

编程日记 2023/9/11 22:55:28

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展：显示创建时间8. 功能扩展：记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

编程新知 2025/8/31 5:08:06

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外，K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案，全安装在K8S群集中。具体可参…...

编程新知 2025/8/23 5:51:08

【Linux】C语言执行shell指令

在C语言中执行Shell指令在C语言中，有几种方法可以执行Shell指令： 1. 使用system()函数这是最简单的方法，包含在stdlib.h头文件中： #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

编程新知 2025/9/9 5:40:10

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中，用户注册、登录、修改密码等操作，都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输，在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

编程新知 2025/9/14 23:47:44