使用portal实现个人工作台 - 每天进步一点点！ - ITeye技术网站
博客分类：
Object { title="服务查询", url="widget/serviceQuery.do", wId=1},
Object { title="服务订阅", url="widget/serviceOrder.do", wId=2},
Object { title="订阅审批", url="widget/serviceOrderApprove.do"
jquery.cookie.js:$.cookie(‘the_cookie’); // 读取 cookie$.cookie(‘the_cookie’, 'the_value’); // 存储 cookie$.cookie(‘the_cookie’, 'the_value’, { expires: 7 }); // 存储一个带7天期限的 cookie$.cookie(‘the_cookie’, '', { expires: -1 }); // 删除 cookie
用户表SYS_USER中有个WIDGET_STATE字段，用于保存当前用户的widget状态，
48,44:46,49 即表示有两行两列，第一列的两个widget ID 为48 44
"1,3,5:2,4"
登录之后：
function afterLogin(data) {
var returnStr = "";
if ("1" == data) {
returnStr = "用户名或密码错误，请重新输入!";
focusPassword();
if ("2" == data) {
returnStr = "用户已经登录！";
if ("3" == data) {
returnStr = "密码错误！";
if ("4" == data) {
returnStr = "用户不存在！";
if ("5" == data) {
returnStr = "用户角色不存在！";
if ("6" == data) {
returnStr = "登录出错！";
if ("0" == data ) {
location.href = root + 'main.do';
showErrorMessage(returnStr);
@RequestMapping(value="/main.do",method=RequestMethod.GET)
public String main(HttpServletRequest request,HttpSession session) {
("main...");
return "admin";
layout.xml:
&tiles-definitions&
&definition name="admin" template="/WEB-INF/layouts/admin.jsp"&
&put-attribute name="header" value="/WEB-INF/views/header.jsp" /&
&put-attribute name="menu" value="/WEB-INF/views/menu.jsp" /&
&put-attribute name="footer" value="/WEB-INF/views/footer.jsp" /&
&put-attribute name="body" value="" /&
&/definition&
&definition name="content" template="/WEB-INF/layouts/content.jsp"&
&/definition&
&/tiles-definitions&
系统登录后页面admin.jsp：
&body class="easyui-layout"&
&!-- north --&
&div id="header" class="top_body" data-options="region:'north',border:false"&
&tiles:insertAttribute name="header"/&
&!-- west --&
&div id="menu" data-options="region:'west',split:true"
style="width: 200 overflow:"&
&div id="firstMenu" class="easyui-accordion" animate="false"
data-options="fit:true,border:false"&&/div&
&!-- center --&
&div id="content" data-options="region:'center'" style="overflow:"&
&div id="centerTabs" class="easyui-tabs"
data-options="fit:true,border:false"&
&!-- centerMenu --&
&div id="tabsMenu" style="width: 100 display:"&
&div type="close"&
&spring:message code="index.close" text="关闭"/&
&div type="closeOther"&
&spring:message code="index.closeOther" text="关闭其他" /&
&div type="closeAll"&
&spring:message code="index.closeAll" text="关闭所有"/&
&!-- south --&
&div id="footer" data-options="region:'south',border:false"
style="height: 20 padding: 3 background: # overflow:"&
&tiles:insertAttribute name="footer"/&
&div id="addAppDialog" style="overflow:"&&/div&
登录后进入的页面的JS：
$(function () {
var firstMenu = $('#firstMenu');
//var fistMenuUrl = root + 'js/app/home/menuMain.json';
// ================================================================================
url : root + "login/initRootMenu.do",
type : 'POST',
dataType : 'json',
success : function(data) {
//构造左侧树
addAccordions(data);
//构造进入时默认内容页（即默认的个人工作台的TAB页，各Widget都放在该TAB里）
addHome();
var centerTabs = $('#centerTabs');
//个人工作台右侧的“添加组件”按钮
//点击弹出“添加组件”页面
centerTabs.tabs({
fit : true,
border : false,
onContextMenu : function(e, title) {
e.preventDefault();
tabsMenu.menu('show', {
left : e.pageX,
top : e.pageY
}).data('tabTitle', title);
tools : [{
iconCls : 'icon-add',
text : '添加组件',
handler : function() {
addAppDialog(1);
addHome = function(){
var title = '个人工作台';
if(centerTabs.tabs('exists', title)){
centerTabs.tabs('select', title);
"/index.do";
centerTabs.tabs(
title : title,
closable : false,
content : '&iframe src="'
+ '" frameborder="0" style="border:0;width:100%;height:99.4%;"&&/iframe&'
此处用于构造一个个人工作台的TAB页
跳转到真正的个人工作台页面index.jsp:
@RequestMapping(value="/index.do",method=RequestMethod.GET)
public String index(HttpServletRequest request,HttpSession session) {
SysUser currentUser = (SysUser) session.getAttribute(SessionKeys.SESSION_SYS_USER);
request.setAttribute("USER_ID", currentUser.getId());
return "index";
&definition extends="content" name="index"&
&put-attribute name="body" value="/WEB-INF/views/index.jsp"/&
&/definition&
index.jsp页面：
&%@ page language="java" contentType="text/ charset=UTF-8" pageEncoding="UTF-8"%&
&%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%&
&link type="text/css" rel="stylesheet" href="&%=request.getContextPath()%&/js/easyui-portal/portal.css"&&/link&
&script type="text/javascript" src="&%=request.getContextPath()%&/js/app/common/jquery.cookie.js" charset="UTF-8"&&/script&
&script type="text/javascript" src="&%=request.getContextPath()%&/js/easyui-portal/jquery.portal.js" charset="UTF-8"&&/script&
&script type="text/javascript" src="&%=request.getContextPath()%&/js/app/common/widget.js" charset="UTF-8"&&/script&
&script type="text/javascript" src="&%=request.getContextPath()%&/js/app/common/portal.js" charset="UTF-8"&&/script&
&div class="easyui-layout" data-options="fit:true" id="portalDiv"&
&div region="center" border="false" style="width: 500 height: 306 overflow:"&
&div id="portal${USER_ID}" style="width: 100%; height: 99.4%;"&&/div&
&div id="maxWidget${USER_ID}" style="width: 100%; height: 99.4%; display: overflow-y:overflow-x:"&&/div&
个人工作台展示部分：
入口portal.js：
$(function() {
url : root + "widget/initPortalPage.do",
type : 'post',
cache : false,
success : function(response) {
if (response.flag == '0') {
responseObj = response.
initPortalPage();
$.messager.alert('系统提示', '获取Widget失败！', 'error');
error:function(data){
$.messager.alert('系统提示', '获取Widget失败！', 'error');
个人工作台，所以可以使用用户Bean定位：
* 初始化所有Widget
* @param session
@RequestMapping(value="widget/initPortalPage.do",method=RequestMethod.POST)
@ResponseBody
public Map&String,Object& initPortalPage(HttpSession session) {
("initPortalPage begin .. ");
SysUser currentUser = (SysUser) session.getAttribute(SessionKeys.SESSION_SYS_USER);
Map&String,Object& result = new HashMap&String,Object&();
List&EsbWidgetV& ls = esbWidgetDS.findWidgetVListByUserId(currentUser.getId());
List&Map& rList = new ArrayList&Map&();
for(EsbWidgetV w : ls){
Map wMap = new HashMap();
wMap.put("wId", w.getId());
wMap.put("title", w.getMenuName());
wMap.put("url", w.getUrl());
rList.add(wMap);
currentUser.setPorlets(rList);
result.put("flag", "0");
result.put("data", currentUser);
("initPortalPage end .. ");
OR REPLACE VIEW ESB_WIDGET_V
W.MENU_ID,
W.USER_ID,
M.MENU_NAME,
W.ENABLED_FLAG
ESB_WIDGET W
LEFT JOIN SYS_MENU M ON W.MENU_ID = M.ID;
widget.java:
@Table(name = "ESB_WIDGET", uniqueConstraints= {@UniqueConstraint(columnNames={"MENU_ID", "USER_ID"})})
public class EsbWidget implements java.io.Serializable {
private static final long serialVersionUID = 0883826L;
@GeneratedValue(strategy = GenerationType.IDENTITY)
@Column(name = "ID", nullable = false)
@Column(name = "MENU_ID")
private Long menuId;
@Column(name = "USER_ID")
private Long userId;
@Column(name = "URL")
widget表数据： widgetV数据：
widght表中含有USER_ID、MENU_ID，对应各个用户的菜单Widght
各Widght其实就是各菜单的快速入口
添加并展示Widget：
function initPortalPage(){
var maxWidgetId = $('#maxWidget' + responseObj.id) // 最大工作台
var portalId = $('#portal' + responseObj.id);
portalId.children().remove();
var panels = responseObj. // 工作台下widget明细
if (panels.length == 0) {
$.cookie("portal"+responseObj.id, null);
var content = '&div class="add-component"&&p&抱歉,在&span class="workbench"&&a href="#" onFocus="this.blur()"&个人工作台&/a&&/span&中未找到相关组件.&/p& &div style="height:20px"&&/div&&/div&'
portalId.panel({
fit : true,
border : false,
content : content
responseObj.columnType = 6;
/////////////////////////////////
/*portalId.append(" &div style='width:33%'&&/div&&div style='width:34%'&&/div&&div style='width:35%'&&/div&");
responseObj.columnTemplate = 3;*/
portalId.append(" &div style='width:50%'&&/div&&div style='width:50%'&&/div&");
responseObj.columnTemplate = 2;
var columnTemplate = responseObj.columnT // 列
var portal = portalId.portal({
border : false,
fit : true,
cid : responseObj.cid,
cname : ame,// 自定义属性 cname
onStateChange : function() {
var id = $(this).attr('id');
var oldS = $.cookie(id).split(':'); // 拖动前cookie
var state = getPortalState(id);
$.cookie(id, state, {
expires : 7
var newS = $.cookie(id).split(':');// 拖动后cookie
// 更新用户工作台widget状态
updateUserPlatformState(id.substring(6), state);
// 拖动后更新tab类型widget
updateTabWidget(oldS, newS);
var state = responseObj.
if (yxui.replaceAll(state, ':', '') == '') {// 工作台下无widget
} else if (state.split(':').length != responseObj.columnTemplate) {// 工作台模板变更
} else {// 工作台上已有widget编号与工作台widget状态比较
var flag =
var compareState = yxui.replaceAll(state, ':', ',').split(',');
for (var i = 0; i & panels. i++) {
var wid = panels[i].wId;
for (var j = 0; j & compareState. j++) {
if (wid == compareState[j]) {
if (flag) {
if (!flag) {
if (!state) {
var col0 = [], col1 = [], col2 = [], col3 = [], col4 = [], stateArr = [];
for (var i = 1; i &= panels. i++) {
var mo = i % columnT
switch (mo) {
col0.push(panels[i - 1].wId);
////////////////////id =& wId
col1.push(panels[i - 1].wId);
col2.push(panels[i - 1].wId);
col3.push(panels[i - 1].wId);
col4.push(panels[i - 1].wId);
if (col1.join(",") != '') {
stateArr.push(col1.join(","));
if (col2.join(",") != '') {
stateArr.push(col2.join(","));
if (col3.join(",") != '') {
stateArr.push(col3.join(","));
if (col4.join(",") != '') {
stateArr.push(col4.join(","));
if (col0.join(",") != '') {
stateArr.push(col0.join(","));
// state = 'w1,w2:w3';/* 冒号代表列，逗号代表行
state = stateArr.join(":");
var stateCha = columnTemplate - stateArr.
if (stateCha & 0) {
for (var i = 0; i & stateC i++) {
state = state + ":";
$.cookie('portal' + responseObj.id, state, {
expires : 7
// 更新用户工作台widget状态
updateUserPlatformState(responseObj.id, state);
$.cookie('portal' + responseObj.id, state, {
expires : 7
addPanels(portal, panels, state);
portal.portal('resize');
组件Widget操作widget.js:
* 初始化添加widget
function addPanels(portal, panels, portalState) {
var columns = portalState.split(':');
for (var columnIndex = 0; columnIndex & columns. columnIndex++) {
var cc = columns[columnIndex].split(',');
for (var j = 0; j & cc. j++) {
var tmp = "";
if(cc[j] != ""){
tmp = parseInt(cc[j]);
var options = getPanelOptions(tmp, panels);
if (options) {
// panelWidgetUrlSet
options.url = panelWidgetUrlSet(options);
var p = $('&div style="overflow:"/&').attr('id', options.wId).appendTo('body');
var result = /^http:\/\/+/.test(options.url); // 是否外网
if (result) {
options.content = '&iframe src="' + options.url + '" frameborder="0" style="border:0;width:100%;height:99.4%;"&&/iframe&';
options.href = '';
options.content = '';
options.href = options.
/*options.collapsible =
options.closable =*/
options.tools = panelToolsSet(options);
p.panel(options);
// panelAddTips
panelAddTips(p);
portal.portal('add', {
panel : p,
columnIndex : columnIndex
几个其中的主要JS方法：
* 更新用户工作台widget状态
function updateUserPlatformState(userId, state) {
url : root + "widget/updateUserState.do",
type : 'post',
data : {'state' : state},
cache : false
* 获取工作台状态，组装state
function getPortalState(id) {
var columnTemplate = $('#' + id).children().children().children().children().
var aa = [];
for (var columnIndex = 0; columnIndex & columnT columnIndex++) {
var cc = [];
var panels = $('#' + id).portal('getPanels', columnIndex);
for (var i = 0; i & panels. i++) {
cc.push(panels[i].attr('id'));
aa.push(cc.join(','));
return aa.join(':');
* 刷新widget
function panelRefresh(id, isMax) {
var isMax = isMax == null ? false : isM
var $wid = $('#' + id);
var options = $wid.panel('options');
if(options.url.indexOf("widget") & 0){
options.url = options.
var result = /^http:\/\/+/.test(options.url); // 是否外网
if (result) {
options.content = '&iframe src="' + options.url + '" frameborder="0" style="border:0;width:100%;height:99.4%;"&&/iframe&';
$('#' + id).children().remove();
$('#' + id).append(options.content);
options.content = '';
if (isMax) {
$('#' + id).panel('refresh', yxui.refreshUrlLink(options.url, 'isMax=true'));
$('#' + id).panel('refresh', options.url);
* panel的工具设置
function panelToolsSet(options) {
var argObj = yxui.getUrlArg(options.url);
var toolSet = '111'; // 刷新/折叠/最大化/删除
if (argObj != null && argObj._toolset != null && argObj._toolset.length == 4) {
toolSet = argObj._
var tools = [];// 返回工具数组对象
for (var i = 0; i & toolSet. i++) {
if (i == 0 && toolSet.substr(i, 1) == 1) {
tools.push({
iconCls : 'icon-reload',
handler : function(button) {
panelRefresh(findId(this));
if (i == 1 && toolSet.substr(i, 1) == 1) {
tools.push({
iconCls : 'panel-tool-collapse',
handler : function() {
if ($(this).attr('class') == 'panel-tool-collapse') {
panelCollapse(findId(this));
panelExpand(findId(this));
if (i == 2 && toolSet.substr(i, 1) == 1) {
tools.push({
iconCls : 'panel-tool-close',
handler : function() {
var id = findId(this);
var message = '您确定删除此组件?';
$.messager.confirm('系统提示', message, function(r) {
panelClose(id);
* 最大化widget
function panelMax(wId,userId,maxUrl) {
var portalId = $('#portal' + userId);
var maxWidgetId = $('#maxWidget' + userId);
portalId.hide();
var wOptions = $('#' + wId).panel('options'); // widget options
var maxOptions = {
fit : true,
title : wOptions.title,
padding : '10px'
wOptions.url = maxU
var result = /^http:\/\/+/.test(wOptions.url); // is other adderss
if (result) {
maxOptions.content = '&iframe src="' + wOptions.url + '" frameborder="0" style="border:0;width:100%;height:99.4%;"&&/iframe&';
maxOptions.url = wOptions.
maxOptions.content = '';
maxOptions.url = wOptions.
maxOptions.tools = [{
iconCls : 'icon-reload',
handler : function(button) {
panelRefresh(findId(this), true);
iconCls : 'panel-tool-restore',
handler : function() {
maxWidgetId.hide().panel('close');
portalId.show();
refreshAll(userId);
// panelWidgetUrlSet
maxOptions.url = panelWidgetUrlSet(maxOptions)
maxOptions.maxUrl = yxui.refreshUrlLink(maxOptions.url, 'isMax=true');
/*if(type!=null)
maxOptions.maxUrl = yxui.refreshUrlLink(maxOptions.maxUrl, 'type=true');
maxWidgetId.panel(maxOptions);
result = /^http:\/\/+/.test(maxOptions.url);
if (result) {
maxWidgetId.show().panel('open').panel('refresh');
maxWidgetId.show().panel('open').panel('refresh', maxOptions.maxUrl);
// panelAddTips
panelAddTips(maxWidgetId, true);
* 查找widget id
function findId(button) {
return $(button).parent().parent().next().attr("id");
* 折叠widget
function panelCollapse(id) {
$('#' + id).panel('collapse', true);
* 展开widget
function panelExpand(id) {
$('#' + id).panel('expand', true);
* 关闭widget
function panelClose(wid) {
url : root + "widget/deleteWidget.do",
type : 'post',
cache : false,
success : function(response) {
if (response.flag == '0') {
var user = response.
$('#' + wid).panel('close');
var portalId = 'portal'+ user.
var cookieState = $.cookie(portalId);
//alert("userId : "+user.id+" cookieState : "+cookieState);
var portal = $('#' + portalId);
portal.portal('remove', $('#' + wid));
// 更新用户工作台widget状态
var newState = getPortalState(portalId);
updateUserPlatformState(user.id, newState);
var state = yxui.replaceAll(newState, ':', '');
if (state == '') {
$.cookie(portalId, null);
var content = '&div class="add-component"&&p&抱歉,在&span class="workbench"&&a href="#" onFocus="this.blur()"&个人工作台&/a&&/span&中未找到相关组件.&/p& &div style="height:20px"&&/div&&/div&'
portal.panel({
fit : true,
border : false,
content : content
$.cookie(portalId, newState, {
expires : 7
function getPanelOptions(id, panels) {
for (var i = 0; i & panels. i++) {
var wid = panels[i].wId;
if (id == wid) {
return panels[i];
每个widget的展示模块：
* 服务查询WIdget
* @param request
@RequestMapping(value="widget/serviceQuery.do",method=RequestMethod.GET)
public String serviceQuery(HttpServletRequest request) {
("add serviceOrder widget begin...");
Page page = new Page();
EsbServiceV esbServiceV = new EsbServiceV();
PageQueryParameter pageQueryParameter = new PageQueryParameter();
pageQueryParameter.setRows(Constants.WIDGET_PAGE_ROWS);
pageQueryParameter.setPage(Constants.WIDGET_CURRENT_PAGE);
List&EsbServiceV& esbServiceVList = esbServiceVDS.findEsbServiceVPagedList(pageQueryParameter, esbServiceV);
long rows = esbServiceVDS.getAllEsbServiceVsTotalCount(pageQueryParameter, esbServiceV);
page.setTotal(rows);
page.setRows(esbServiceVList);
SysUser currentUser = getCurrentUser();
request.setAttribute("USER_ID", currentUser.getId());
request.setAttribute("SRV_DATA", esbServiceVList);
request.setAttribute("SRV_MAX_URL", "esbService/query.do");
("add serviceQuery widget end...");
return "srvQueryWidget";
&!-- widget --&
&definition extends="content" name="srvQueryWidget"&
&put-attribute name="body" value="/WEB-INF/views/widget/srvQueryWidget.jsp"/&
&/definition&
srvQueryWidget.jsp：
&%@ page language="java" contentType="text/ charset=UTF-8" pageEncoding="UTF-8"%&
&%@ taglib prefix="c" uri="/jsp/jstl/core"%&
&%@ taglib prefix="fn" uri="/jsp/jstl/functions"%&
&%@ taglib prefix="fmt" uri="/jsp/jstl/fmt"%&
&link type="text/css" rel="stylesheet" href="&%=request.getContextPath()%&/css/widget.css"&&/link&
&meta http-equiv="Content-Type" content="text/ charset=utf-8"&
&title&服务查询Widget&/title&
&script type="text/javascript"&
getMoreQuery = function() {
var widgetId = $('#srvQuery').parent().attr('id');
var userId = '${USER_ID}';
var maxUrl = '${SRV_MAX_URL}';
//alert("widgetId: "+ widgetId + " maxUrl: " + maxUrl);
panelMax(widgetId,userId,maxUrl);
&div id="srvQuery" style="padding: 4px 8px 0px 8"&
&ul class="news_list"&
&c:choose&
&c:when test="${requestScope.SRV_DATA != null && fn:length(requestScope.SRV_DATA) & 0 }"&
&c:forEach items="${requestScope.SRV_DATA}" var="notice"&
&span& &fmt:formatDate value="${notice.lastUpdateDate}" dateStyle="short" pattern="yy/MM/dd"&&/fmt:formatDate& &/span&
&a title="${notice.serviceNameEn}" href="esbService/getServiceById.do?id=${notice.id}" target="_blank"&${notice.serviceNameEn}&/a&
&/c:forEach&
&c:otherwise&
&li&&span&暂无相关内容！&/span&&/li&
&/c:otherwise&
&/c:choose&
&c:if test="${requestScope.SRV_DATA != null && fn:length(requestScope.SRV_DATA) & 0 }"&
&span class="more"&&a href="#" onclick="getMoreQuery()" onFocus="this.blur()"&更多...&/a& &/span&
添加组件模块：
appAdd.js:
//入口方法，进入添加展示页面
function addAppDialog(typeId){
var titleStr = "添加应用";
if (typeId == 1) {
titleStr = "添加组件";
$addDialog = $('#addAppDialog');
$addDialog.dialog({
title: titleStr,
iconCls : 'pag-add',
href: root + "widget/initAddApp.do?type="+typeId,
width : 600,
height : 330,
modal:true,
cache: false,
resizable : false,
minimizable : false,
maximizable : false,
collapsible : false
$addDialog.dialog('open');
//真正添加方法
function addApp(menuId, type) {
url : root + "widget/addApp.do",
type : 'post',
cache : false,
'type' : type,
'menuId' : menuId
success : function(result) {
var data = result.
if (result.flag == '0' && data != null) {
//$("#span-" + resId).html('&img src="/eip/layout/app/images/user_added_button.png" width="60" height="24" style="border:0"/&');
if (type == 1) {
protalAddWidgets(data);
$.messager.alert('系统提示', '添加失败！', 'error');
$addDialog.dialog('close');
* 添加组件后更新工作台上widget
function protalAddWidgets(data) {
var widgetId = data.
var userId = data.userId;
var state = $.cookie('portal'+userId);
//alert("userId : "+userId+" state : "+state);
var centerTabs = $("#centerTabs");
var tab = centerTabs.tabs('getTab',0);
var options = tab.panel('options');
var content = options.
var iframe = $(content);
var src = iframe.attr("src");
tab.panel('refresh',src);
* 初始化Widget添加页面
* @param request
* @param session
* @param type
@RequestMapping(value="widget/initAddApp.do",method=RequestMethod.GET)
public String initAddApp(HttpServletRequest request,HttpSession session,String type) {
("initAddApp begin .. ");
("parameter type : " + type);
List&SysMenu& rootList = (List&SysMenu&) session.getAttribute(SessionKeys.SESSION_USER_ROOT_MENU);
long resCount = 0l;
List&SysMenu& widgetList = new ArrayList&SysMenu&();
for(SysMenu m : rootList){
String menuName = m.getMenuName().trim();
if(menuName.equals(Constants.SERVICE_DIRECTORY)
|| menuName.equals(Constants.SERVICE_MONITOR)
|| menuName.equals(Constants.MY_SERVICE)){
widgetList.add(m);
for(SysMenu m : widgetList){
if(m.getChildren() != null && m.getChildren().size() & 0){
resCount += m.getChildren().size();
esbWidgetDS.initWidgetStatus(widgetList);
session.setAttribute("WIDGET_LIST", widgetList);
session.setAttribute("resCount", resCount);
session.setAttribute("type", type);
("initAddApp end .. ");
return "appAdd";
* 添加WIdget到工作台
* @param request
* @param session
* @param type
* @param menuId
@RequestMapping(value="widget/addApp.do",method=RequestMethod.POST)
@ResponseBody
public Map&String,Object& addApp(HttpServletRequest request,HttpSession session,String type,Long menuId) {
("addApp begin .. ");
("parameter type : " + type);
("parameter menuId : " + menuId);
Map&String,Object& result = new HashMap&String,Object&();
EsbWidget widget =
if("1".equals(type)){
widget = esbWidgetDS.save(menuId);
}catch(Exception e){
logger.error(e.getMessage());
result.put("flag", "1");
result.put("flag", "0");
result.put("data", widget);
("addApp end .. ");
&definition extends="content" name="appAdd"&
&put-attribute name="body" value="/WEB-INF/views/widget/appAdd.jsp"/&
&/definition&
添加页面appAdd.jsp：
&%@ page language="java" contentType="text/ charset=UTF-8" import="java.util.*" pageEncoding="UTF-8"%&
&%@ taglib prefix="c" uri="/jsp/jstl/core" %&
&%@ taglib prefix="fn" uri="/jsp/jstl/functions" %&
&%@ taglib prefix="fmt" uri="/jsp/jstl/fmt" %&
&link type="text/css" rel="stylesheet" href="&%=request.getContextPath()%&/css/window.css"&&/link&
String ctx = request.getContextPath();
request.setAttribute("ctx", ctx);
String fullPath = request.getLocalAddr() + ":" + request.getLocalPort() + "/";
request.setAttribute("fullpath", fullPath);
a:link, a:visited {
color: #666666;
text-decoration:
color: #3399CC;
.add-button A:link{
background:url(${ctx}/images/add_button.png) no-repeat 0px 0
&table width="100%" border="0" height="99%" cellspacing="0" cellpadding="0"&
&td colspan="2" class="window_panel_center"&
&table width="100%" border="0" cellspacing="0" cellpadding="0"&
&td align="center" class="title"&&table width="100%" border="0" cellspacing="0" cellpadding="0"&
&td class="title_left"&&c:choose&
&c:when test="${type==0}"&应用列表&/c:when&
&c:otherwise&组件列表&/c:otherwise&
&/c:choose&
&td align="right"&共有&span class="number"&${resCount}&/span& &c:choose&
&c:when test="${type==0}"&个应用&/c:when&
&c:otherwise&个组件&/c:otherwise&
&/c:choose&& & &&&!-- &input
name="textfield" type="text" class="input_search"
id="textfield" /& --&&/td&
&/table&&/td&
&td height="277px"&
&div style="width:96 height:277 float: background-color:#f2f2f2; border-right: 1px solid #c2c2c2;"&
&div style="height:6"&&&/div&
&c:if test="${fn:length(WIDGET_LIST)&0}"&
&c:forEach var="res" items="${WIDGET_LIST}" varStatus="stat"&
&c:choose&
&c:when test="${stat.index==0}"&
&div id="accordion${stat.index}-header" class="accordion_headings header_highlight"&${res.menuName}&/div&
&c:otherwise&
&div id="accordion${stat.index}-header" class="accordion_headings"&${res.menuName}&/div&
&/c:otherwise&
&/c:choose&
&/c:forEach&
&div style="float: width:460"&
&c:if test="${fn:length(WIDGET_LIST)&0}"&
&c:forEach var="res" items="${WIDGET_LIST}" varStatus="stat"&
&div id="accordion${stat.index}-content" class="content" style="display:&c:if test="${stat.index&0}"&none&/c:if&"&
&div style="overflow-y: height:277px"&
&table width="100%" border="0" cellspacing="0" cellpadding="0"&
&c:if test="${fn:length(res.children)&0}"&
&c:forEach items="${res.children}" var="t"&
&td height="63" align="center" class="accordion_child"&&table width="96%" border="0" cellspacing="0" cellpadding="0"&
&td width="60" align="left"&&%-- &img src="${t.imageUrl}" width="48" height="48" /& --%&
&img src="${ctx}/images/005.png" width="48" height="48" /&
&td&&table width="100%" border="0" cellspacing="0" cellpadding="0" style="table-layout: fixed"&
&td align="left" class="list_title"&${t.menuName}&/td&
&td style="word-wrap:break-word:" align="left" class="list"&&a href="" onclick="" title="${t.remark}" target="_blank"& &c:choose&
&c:when test="${fn:length(t.remark)&45}"&${fn:substring(t.remark, 0, 45)}...&/c:when&
&c:otherwise&${t.remark}&/c:otherwise&
&/c:choose& &/a&
&/table&&/td&
&td width="80"&&span id="span-${t.id}" class="add-button"&
&c:choose&
&c:when test="${t.isAdd==false}"&
&a href="javascript:void(0);" onclick="addApp(${t.id},${type})"&&/a&
&c:otherwise&
&img src="${ctx}/images/user_added_button.png" width="60" height="24" style="border:0" /&
&/c:otherwise&
&/c:choose&
&/table&&/td&
&/c:forEach&
&/c:forEach&
&/div&&/td&
&/table&&/td&
&script type="text/javascript"&
$(function() {
$('.accordion_headings').click(function() {
var this_id = $(this).attr('id').split('-')[0];
$(this).addClass('header_highlight').siblings().removeClass('header_highlight');
$('.content').each(function() {
if ($(this).attr('id').split('-')[0] == this_id) {
$(this).show();
$(this).hide();
添加方法DS：
public Boolean checkWidgetAdded(Long menuId){
SysUser currentUser = getCurrentUser();
String hql = "from EsbWidgetV w where w.menuId = " + menuId + " and w.userId = " + currentUser.getId() +" and w.enabledFlag = 'Y'";
List&EsbWidgetV& ls = esbWidgetVDao.findByHql(hql);
if(ls != null && ls.size() & 0){
* 初始化Widget添加状态 ， 默认都为“可添加”
* @param menuId
public void initWidgetStatus(List&SysMenu& widgetList){
("initWidgetStatus begin ..");
for(SysMenu m : widgetList){
for(SysMenu c : m.getChildren()){
Boolean isAdded = checkWidgetAdded(c.getId());
if(isAdded){
c.setIsAdd(true);
c.setIsAdd(false);
("initWidgetStatus end ..");
* 添加WIdget并更新添加状态,一个组件一条widget记录
@Transactional
public EsbWidget save(Long menuId) {
SysUser currentUser = getCurrentUser();
HttpSession session = GlobalSession.getHttpSession();
Map&Long,SysMenu& allMenu = (Map&Long, SysMenu&) session.getAttribute(SessionKeys.SESSION_USER_ALL_MENU);
SysMenu m = allMenu.get(menuId);
if(m == null)
String widgetUrl =
String menuName = m.getMenuName().trim();
if(menuName.equals(Constants.SERVICE_QUERY)){
widgetUrl = "widget/serviceQuery.do";
}else if(menuName.equals(Constants.SERVICE_ORDER)){
widgetUrl = "widget/serviceOrder.do";
}else if(menuName.equals(Constants.SERVICE_ORDER_APPROVE)){
widgetUrl = "widget/serviceOrderApprove.do";
}else if(menuName.equals(Constants.MONITOR_LOG)){
widgetUrl = "widget/monitorLog.do";
}else if(menuName.equals(Constants.MY_ORDER)){
widgetUrl = "widget/myOrder.do";
EsbWidget widget = new EsbWidget();
widget.setMenuId(menuId);
widget.setUrl(widgetUrl);
widget.setUserId(currentUser.getId());
widget.setEnabledFlag(Constants.ENABLED_FLAG_Y);
ObjectUtil.setCreatedBy(widget);
widget = esbWidgetDao.save(widget);
//更新添加状态
updateWidgetStatus(menuId,true);
* 添加、删除Widget后更新添加状态
* @param menuId
* @param isAdd
public void updateWidgetStatus(Long menuId,Boolean isAdd){
("updateWidgetStatus begin ..");
HttpSession session = GlobalSession.getHttpSession();
List&SysMenu& widgetList = (List&SysMenu&) session.getAttribute("WIDGET_LIST");
if(widgetList == null)
for(SysMenu menu : widgetList){
SysMenu m =
List&SysMenu& children = menu.getChildren();
for(int i = children.size()-1;i&=0;i--){
SysMenu tmp = children.get(i);
if(tmp.getId() == menuId){
m.setIsAdd(isAdd);
children.set(children.indexOf(tmp), m);
if(m != null)
session.removeAttribute("WIDGET_LIST");
session.setAttribute("WIDGET_LIST",widgetList);
("updateWidgetStatus end ..");
点“更多”可以最大化Widget： 点“添加组件”可以添加： ..
描述: JAVA、JS、JSP
下载次数: 445
浏览 16607
博主求源码 小伙，源码上面都发出来了啊！
浏览: 2510540 次
来自: 一片神奇的土地
StartHere2012 写道shadowred 写道&qu ...
shadowred 写道&在main方法中 通过ne ...
louistz 写道shadowred 写道shadowred ...
shadowred 写道&在main方法中 通过ne ...
u 写道在，请及时回复何事啊}