jeecg中實現信息從側邊欄彈出的效果

最終實現效果以下：

當點「號碼清單」連接時從側邊欄彈出具體的號碼的清單。

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