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

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>

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

相关文章:

easyui-sidemenu 菜单 后台加载

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

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

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

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

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

C高级Day5

课后作业&#xff1a; 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…...

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

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

Linux dup dup2函数

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

设计模式系列-外观模式

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

DBeaver 下载、安装与数据库连接(MySQL)详细教程【超详细,保姆级教程!!!】

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

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

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

[论文笔记]SiameseNet

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

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

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

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

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

记录docker 部署nessus

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

qt 正则表达式

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

l8-d13 UNIX域套接字

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

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

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

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

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

Mybatis 动态语言 - mybatis-velocity

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

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

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

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

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

Java中同时POST文件和提交JSON数据的方法

一、引言 在Java中&#xff0c;可以使用java.net.URLConnection类来进行HTTP请求&#xff0c;并实现同时POST文件和提交JSON数据的功能。下面将通过一篇文章的形式为您详细讲解这个过程。 二、实现步骤 步骤一&#xff1a;导入所需的类库 首先&#xff0c;你需要导入以下类…...

【React】React获取URL参数,根据URL参数隐藏页面元素

React获取URL参数&#xff0c;根据URL参数隐藏页面元素 AI推荐方法 如果您想使用React获取URL参数并相应地隐藏页面元素&#xff0c;可以按照以下步骤进行操作&#xff1a; 导入React和React DOM&#xff1a; import React from react; import ReactDOM from react-dom;创建…...

第68步 时间序列建模实战:ARIMA建模(Matlab)

基于WIN10的64位系统演示 一、写在前面 这一期&#xff0c;我们使用Matlab进行SARIMA模型的构建。 不同样&#xff0c;这里使用另一个数据&#xff1a; 采用《PLoS One》2015年一篇题目为《Comparison of Two Hybrid Models for Forecasting the Incidence of Hemorrhagic …...

Gin学习记录3——模版与渲染

模版与渲染 一. 返回二. 模版2.1 基础模版2.2 同名模版2.3 模版继承2.4 模版语法 一. 返回 如果只是想返回数据&#xff0c;可以使用以下函数&#xff1a; func (c *Context) JSON(code int, obj any) func (c *Context) JSONP(code int, obj any) func (c *Context) String(…...

Python算法练习 9.11

leetcode 392 判断子序列 给定字符串 s 和 t &#xff0c;判断 s 是否为 t 的子序列。 字符串的一个子序列是原始字符串删除一些&#xff08;也可以不删除&#xff09;字符而不改变剩余字符相对位置形成的新字符串。&#xff08;例如&#xff0c;"ace"是"abcd…...

2023年中秋节和国庆节放假几天?用待办软件记录放假安排并提醒

进入公历9月&#xff0c;我们都期待着下个长假的到来。那么2023年中秋节和国庆节放假几天呢&#xff1f;因为今年的中秋节是公历的9月29日&#xff0c;所以今年的中秋节和国庆节是连在一起放假的。放假时间安排是9月29日至10月6日&#xff0c;一共放假8天。而10月7日和8日则是调…...

使用Python实现一个完整的声音采样和模拟,使用采样声音播放输入的文字,实现代码进行详细注释,并进行测试

目录 1.功能概述 2.原理介绍 2.1.声音采样原理 2.2.PCM系统原理 2.3.声音学习与训练...

测试----计算机网络

文章目录 计算机网络的历史OSI/RM 协议TCP/IP协议IP地址 计算机网络的历史 50-60年代 内部通讯功能&#xff08;连接的是同一台主机&#xff0c;只能主机和终端之间通信&#xff0c;终端和终端之间的通讯只能依靠主机来传输&#xff09;60-70年代 主机和主机之间能通讯70年代-…...

SVN 索引版本与打包版本号不匹配

今天突然遇到了一个问题&#xff0c;SVN上传不了&#xff0c;错误提示如下&#xff1a; 解决方法&#xff1a; 1.其实&#xff0c;这是SVN库不小心搞坏了&#xff0c;只能重新再创建一个SVN仓库了。...

HummerRisk V1.4.1 发布

HummerRisk V1.4.1发布&#xff1a; 大家好&#xff0c;增加检测整合报告下载&#xff0c;定制多云整合报告并下载PDF&#xff0c;增加K8s 检测规则组&#xff0c;Kubernetes、Rancher、KubeSphere 检测规则组以及规则。新增云账号管理页面关联菜单&#xff0c;新增资源同步日…...

wordpress直接密码注册/视频营销成功的案例

问题发生&#xff1a; Java从网络批量读取图片并保存至本网站服务器后再插入文章中 今天转入一篇文章 http://news.qq.com/a/20170605/045860.htm 发现图片未能成功上传 查看源码发现&#xff1a; 因为没有文件类型所以在转存图片的时候出错了 谷歌百度了一下发现解决办法&…...

商城网站建设哪家好/优化网络推广外包

linux中通过date命令获取昨天或明天时间的方法date命令可以获取当前的时间&#xff0c;通过man&#xff0c;可以看到date有很多参数可以用&#xff0c;很容易做到格式化date "%F"输出格式&#xff1a;2011-12-31 date "%F %H:%M:%S"输出格式&#xff1a;20…...

网站ui/360推广怎么收费

【科技犬】华为6月2日发布会上会公布鸿蒙系统第一批升级名单&#xff0c;并且会在5月31号开始归档&#xff0c;6月2日同步升级&#xff0c;后续再逐步公布各批次升级时间&#xff0c;其中首批名单包括&#xff1a;Mate40、Mate40 Pro、Mate40 Pro、Mate40 RS、MateX2、nova8、n…...

js 网站简体繁体/seo网站运营

选自过去1~2周的内容&#xff1a; https://twitter.com/unity3d “UGUIEffect”可以用uGUI实现在波浪上反射的阴影 https://github.com/AsehesL/UGUIEffect Unity 2019.1.0a10新功能现在可以通过单击Console的调用堆栈跳转到源代码的函数调用行 从Unity 2019.1.0a10开始 &a…...

网站建设推广怎么做/网站流量统计分析的维度包括

原文链接&#xff1a;http://www.phpweblog.net/AngelLee2009/archive/2009/08/16/6848.html 1&#xff0e;什么是模式&#xff1f; 模式&#xff0c;即pattern。其实就是解决某一类问题的方法论。你把解决某类问题的方法总结归纳到理论高度&#xff0c;那就是模式。 Alexand…...

广东城乡建设厅网站首页/怎么看百度关键词的搜索量

本人用VBMO开发近两年&#xff0c;中间积累了一些小经验&#xff0c;对老手可能没用&#xff0c;但对新手可能有一点帮助。下面把它记下来&#xff0c;也算是一个小小的总结。很多东西没想起来&#xff0c;下次更新时补上。 大部分内容只是概述了实现的思路&#xff0c;具体实现…...