文档章节

jeecg中实现信息从侧边栏弹出的效果

z_jordon
 z_jordon
发布于 2015/04/21 10:22
字数 917
阅读 357
收藏 0

最终实现效果如下:

当点“号码清单”链接时从侧边栏弹出具体的号码的清单。

在jeecg中实现这个效果特别简单:

  1. 在生成的列表页面的最外一层的div中增加一个id属性,如下:

<div id="main_task_list" class="easyui-layout" fit="true">

默认生成的界面是没有id这个属性的。

2. 在列表中增加链接

<t:dgFunOpt funname="queryMsisdnList(id)" title="号码清单"></t:dgFunOpt>

3.在列表页面的最下方增加相应的脚本,如下:

<div data-options="region:'east',
	title:'mytitle',
	collapsed:true,
	split:true,
	border:false,
	onExpand : function(){
		li_east = 1;
	},
	onCollapse : function() {
	    li_east = 0;
	}"
     style="width: 400px; overflow: hidden;" id="eastPanel">
    <div class="easyui-panel" style="padding: 1px;" fit="true" border="false" id="userListpanel"></div>
</div>

<script type="text/javascript">
    $(function() {
        var li_east = 0;
    });

    function queryMsisdnList(taskId){
        var title = '任务编号: ' + taskId;
        if(li_east == 0){
            $('#main_task_list').layout('expand','east');
        }
        $('#main_task_list').layout('panel','east').panel('setTitle', title);
        $('#userListpanel').panel("refresh", "smMsisdnListController.do?smMsisdnList&taskId=" + taskId);
    }
    function loadSuccess() {
        $('#main_task_list').layout('panel','east').panel('setTitle', "");
        $('#main_task_list').layout('collapse','east');
        $('#userListpanel').empty();
    }
</script>

注意其中的id的属性名要和第一步中的id属性名对应

4. 在对应的controller的方法中增加一段代码处理对查询条件的中转,如下:

@RequestMapping(params = "smMsisdnList")
	public ModelAndView smMsisdnList(HttpServletRequest request) {
		String taskId = request.getParameter("taskId");
		if (StringUtil.isNotEmpty(taskId)) {
			request.setAttribute("taskId", taskId);
		}
		return new ModelAndView("com/jason/ddoWeb/smtask/smMsisdnListList");
	}

其中增加了对属性taskId的处理,因为号码清单界面中需要获取这个属性进行查询

5.最后在生成的代码的基础上修改号码清单界面,注意要把该行去掉,否则页面显示会不正常。

<t:base type="jquery,easyui,tools,DatePicker"></t:base>

完整代码如下:

列表界面(jsp)

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<t:base type="jquery,easyui,tools,DatePicker"></t:base>
<div id="main_task_list" class="easyui-layout" fit="true">
  <div region="center" style="padding:1px;">
  <t:datagrid name="smTaskList" title="短信任务" actionUrl="smTaskController.do?datagrid" idField="id" fit="true">
   <t:dgCol title="编号" field="id" hidden="true"></t:dgCol>
   <t:dgCol title="号码数量" field="msisdnNum" ></t:dgCol>
   <t:dgCol title="是否去重" field="recapture" dictionary="bool"></t:dgCol>
   <t:dgCol title="发送类型" field="sendType" dictionary="sendType"></t:dgCol>
   <t:dgCol title="定时发送时间" field="timeToSendTime" formatter="yyyy-MM-dd hh:mm:ss"></t:dgCol>
   <t:dgCol title="状态" field="state" dictionary="taskState"></t:dgCol>
   <t:dgCol title="执行时间" field="executeTime" formatter="yyyy-MM-dd hh:mm:ss"></t:dgCol>
   <t:dgCol title="渠道" field="channelId" dictionary="ddo_channel, id, name"></t:dgCol>
   <t:dgCol title="计费业务" field="billBusinessId" dictionary="ddo_bill_business, id, price"></t:dgCol>
   <t:dgCol title="操作" field="opt" width="100"></t:dgCol>
   <%--<t:dgDelOpt title="删除" url="smTaskController.do?del&id={id}" /> --%>
   <t:dgFunOpt funname="queryMsisdnList(id)" title="号码清单"></t:dgFunOpt>
   <t:dgToolBar title="手工输入号码" icon="icon-add" url="smTaskController.do?addorupdate" funname="add"></t:dgToolBar>
   <t:dgToolBar title="批量导入号码" icon="icon-add" url="smTaskController.do?upload" funname="add"></t:dgToolBar>
   <%--<t:dgToolBar title="编辑" icon="icon-edit" url="smTaskController.do?addorupdate" funname="update"></t:dgToolBar>--%>
   <%--<t:dgToolBar title="查看" icon="icon-search" url="smTaskController.do?addorupdate" funname="detail"></t:dgToolBar>--%>
  </t:datagrid>
  </div>
 </div>
<div data-options="region:'east',
	title:'mytitle',
	collapsed:true,
	split:true,
	border:false,
	onExpand : function(){
		li_east = 1;
	},
	onCollapse : function() {
	    li_east = 0;
	}"
     style="width: 400px; overflow: hidden;" id="eastPanel">
    <div class="easyui-panel" style="padding: 1px;" fit="true" border="false" id="userListpanel"></div>
</div>

<script type="text/javascript">
    $(function() {
        var li_east = 0;
    });

    function queryMsisdnList(taskId){
        var title = '任务编号: ' + taskId;
        if(li_east == 0){
            $('#main_task_list').layout('expand','east');
        }
        $('#main_task_list').layout('panel','east').panel('setTitle', title);
        $('#userListpanel').panel("refresh", "smMsisdnListController.do?smMsisdnList&taskId=" + taskId);
    }
    function loadSuccess() {
        $('#main_task_list').layout('panel','east').panel('setTitle', "");
        $('#main_task_list').layout('collapse','east');
        $('#userListpanel').empty();
    }
</script>

controller部分:

/**
	 * 号码清单列表 页面跳转
	 * 
	 * @return
	 */
	@RequestMapping(params = "smMsisdnList")
	public ModelAndView smMsisdnList(HttpServletRequest request) {
		String taskId = request.getParameter("taskId");
		if (StringUtil.isNotEmpty(taskId)) {
			request.setAttribute("taskId", taskId);
		}
		return new ModelAndView("com/jason/ddoWeb/smtask/smMsisdnListList");
	}

号码清单界面(jsp):

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<div class="easyui-layout" fit="true">
  <div region="center" style="padding:1px;">
  <t:datagrid name="smMsisdnListList" title="号码清单" actionUrl="smMsisdnListController.do?datagrid&taskId=${taskId}" idField="id" fit="true">
   <t:dgCol title="编号" field="id" hidden="true"></t:dgCol>
   <t:dgCol title="手机号码" field="msisdn" query="true"></t:dgCol>
  </t:datagrid>
  </div>
 </div>


© 著作权归作者所有

共有 人打赏支持
z_jordon
粉丝 36
博文 251
码字总数 78212
作品 0
厦门
技术主管
私信 提问
JEECG 3.7.8 版本发布,Java 快速开发平台

JEECG 3.7.8 版本发布了,此版本主要目标是努力消灭BUG,让大家既有鱼丸也有粗面,多样化话主题UI满足你不同的需求,新增加5套Bootstrap风格代码生成器模板,极大提升美感和代码可控性,降低...

Jeecg
08/06
1K
4
D2Admin 7月份更新内容:cli3以及更方便的全局控制等

时间过的真快,自从 1.1.4 发布又过去一个月了,这个月依旧每天在忙,D2Admin 也进行了大重构,先介绍一下这次的 1.1.5 相比 1.1.4 有哪些大的改变吧 ~ 重要升级 vue-cli3 D2Admin 这次完成了...

FaryEver
07/30
0
0
JEECG 集成KiSSO单点登录实现统一身份认证

JEECG 集成KiSSO单点登录实现统一身份认证 JEECG 如何为其他第三方系统实现统一身份认证服务,实现单点登录? 第三方系统如何对接呢? 今天为大家揭开这层面纱,让大家了解实质,使用它更快速...

Jeecg
11/29
0
0
jeecg-framework-3.3.2-RELEASE 最新版本发布

平台介绍 JEECG(J2EE CodeGeneration)是一款基于代码生成器的智能开发平台,引领新开发模式(OnlineCoding模式->代码生成器模式->手工MERGE智能开发),可以帮助解决Java项目60%的重复工作,...

Jeecg
2013/09/02
0
1
任侠/dedecms_jqm_template

dedecmsjqmtemplate dedecms织梦内容管理系统手机版模板,基于jquery mobile 开发 特性简介: 漂亮的界面、切换效果; 简单实现的上下文链接; 手势控制、文章页触控翻页; 菜单设置; 社交分...

任侠
2015/04/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周二乱弹 —— 其实我在地板也睡不着

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @witt-z :分享歌词: 阴天 在不开灯的房间,当所有思绪都一点一点沉淀。 分享莫文蔚的单曲《阴天》: 《阴天》- 莫文蔚 手机党少年们想听歌,...

小小编辑
7分钟前
9
1
微服务分布式事务实现

https://www.processon.com/view/link/5b2144d7e4b001a14d3d2d30

WALK_MAN
今天
3
0
《大漠烟尘》读书笔记及读后感文章3700字

《大漠烟尘》读书笔记及读后感文章3700字: 在这个浮躁的社会里,你有多久没有好好读完一本书了? 我们总觉得自己和别人不一样,所以当看到别人身上的问题时,很少有“反求诸己”,反思自己。...

原创小博客
今天
4
0
大数据教程(9.5)用MR实现sql中的jion逻辑

上一篇博客讲解了使用jar -jar的方式来运行提交MR程序,以及通过修改YarnRunner的源码来实现MR的windows开发环境提交到集群的方式。本篇博主将分享sql中常见的join操作。 一、需求 订单数据表...

em_aaron
今天
3
0
十万个为什么之什么是resultful规范

起源 越来越多的人开始意识到,网站即软件,而且是一种新型的软件。这种"互联网软件"采用客户端/服务器模式,建立在分布式体系上,通过互联网通信,具有高延时(high latency)、高并发等特点...

尾生
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部