前言
一个项目的功能较齐全,而齐全就预示着功能菜单比较长,但是现实中在不同的甲方使用中往往只需要摘取其中几项功能,所以就想到用配置菜单以满足其需求,且无需变更原始代码,查找一些资料总是似是而非或是誊抄别的什么,不知所云。最后自己总结了下,给需要的人或是下次自己再次用到的时候以参考。
首先看一个基础的侧边栏案例:
<!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; } //title
public 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:文章来源:https://www.toymoban.com/news/detail-701414.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>
按照上述步骤,基本上就搞定了加载配置菜单。全是硬货,一目了然。散花。文章来源地址https://www.toymoban.com/news/detail-701414.html
到了这里,关于easyui-sidemenu 菜单 后台加载的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!