[easyUI]Layout组件的使用

最新推荐文章于 2022-07-18 08:18:04 发布

_YOLO_

最新推荐文章于 2022-07-18 08:18:04 发布

阅读量624

点赞数

分类专栏： EasyUI 文章标签： easyUI layout 系统开发

本文链接：https://blog.csdn.net/Azi_mi/article/details/68937304

版权

EasyUI 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

'微商红'系统, 经技术选型,使用easyUI框架作为后台开发页面.在开发过程中涉及到的技术点,在此进行记录分析,加深印象,以便往后的开发中若再遇此能够迎刃而解.

1. easyUI的layout组件的引入 -- layout & tabs

<%
	String path = request.getContextPath();
	request.setAttribute("base", path);
%>

<body class="easyui-layout">
      <div data-options="region:'north',border:false" style="height:60px; padding:5px; background:#F3F3F3">
           <span class="northTitle">微商红系统</span>
      </div>
      <div data-options="region:'west',title:'菜单',split:true" style="width:180px;">
           <!-- 使用隐藏域加载session中的当前登录用户 -->
           <input id="id" name="id" type="hidden" value="${loginUser.id}" />
           <ul id="menu" class="easyui-tree" style="margin-top: 10px;margin-left: 5px;">
                <li>
                    <span>膜卡管理</span>
                    <ul>
                        <li data-options="attributes:{'url':'${base}/card-list'}">查看膜卡</li>
                        <li data-options="attributes:{'url':'${base}/card-querySell'}">膜卡销售查询</li>
                        <li data-options="attributes:{'url':'${base}/card-queryBuy'}">膜卡购彩查询</li>
                    </ul>
                </li>
                ///其他菜单项
        </div>
        <div data-options="region:'center',title:''">
             <!-- 选项卡:作为下面各个面板的总容器 -->
             <div id="tabs" class="easyui-tabs">
                  <div title="首页" style="padding:20px;"></div>
             </div>
        </div>

	<!-- 页脚信息 -->
	<div data-options="region:'south',border:false" style="height:20px; background:#F3F3F3; padding:2px; vertical-align:middle;">
		<span id="sysVersion">系统版本：V1.0</span>
	    <span id="nowTime"></span>
	</div>

以下是与之对应的jQuery代码:

$(function(){
     $('#menu').tree({
          onClick: function(node){
              if($('#menu').tree("isLeaf",node.target)){
                   var tabs = $("#tabs");
                   var tab = tabs.tabs("getTab",node.text);
                   if(tab){
                         tabs.tabs("select",node.text);
                   }else{
                         tabs.tabs('add',{
                              title:node.text,           //设置面板标题为tree节点的内容
                              href: node.attributes.url, //从URL读取远程数据并且显示到面板
                              closable:true,             //选项卡面板有关闭按钮
                              bodyCls:"content"          //添加一个CSS类ID到面板正文部分
                          });
                    }
               }
          }
     });
})

setInterval("document.getElementById('nowTime').innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());",1000);

以上实现了:

1. 实现了easyUI的layout布局 <body class="easyui-layout">;

2. 菜单项以'树'的形式展示 $('#menu').tree;

3. 每个菜单项,点击后将请求展示与之对应的页面,并且会以"切面"的形式出现在tab上 tabs.tabs('add',

4. setInterval 可以实时获取当前时间,并显示在页脚信息的 <span id="nowTime"></span>中

jQuery easyUI 技术支持链接: 点击打开链接

_YOLO_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[easyUI]Layout组件的使用

easyUI的Layout组件基本使用
复制链接

扫一扫

专栏目录

[easyUI]Layout组件的使用

“相关推荐”对你有帮助么？