DWR下拉框联动

furonglang

浏览: 5064 次
性别:
来自: 杭州

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ajax

DWR 游戏 JavaScript Bean JSP

找了很多资料解决了无数异常然后这是我的成果 dwr新手哈

在appfuse2.0m5 struts basic基础之上
最基础的两个POJO:

Game：游戏

java 代码

@Entity
@Table(name = "JGAME")
public class Game extends BaseObject {
@Id
@GeneratedValue(strategy = GenerationType.AUTO)
private Long id;
@OneToMany(
mappedBy = "game",
cascade = {CascadeType.REMOVE,CascadeType.MERGE},
fetch = FetchType.LAZY
)
private List<gameserver></gameserver> gameServers = new ArrayList<gameserver></gameserver>();
private String gameName;
@Column(nullable = false)
private Integer gameLevel;
private String l1Name;
private String l2Name;
private String l3Name;
//getter and setter
...
}

GameServer：游戏服务器

java 代码

@Entity
@Table(name = "JGAMESERVER")
public class GameServer extends BaseObject {
@Id
@GeneratedValue(strategy = GenerationType.AUTO)
private Long id;
@ManyToOne
@JoinColumn(name = "GAME_ID",nullable = false)
private Game game;
private String level1;
private String level2;
private String level3;
//getter and setter
...
}

GameService接口：

java 代码

@WebService
public interface GameService {
/**
* 根据游戏获取游戏列表
*/
public List<game></game> getGameSelector(Game game);
/**
* 根据游戏获取游戏服务器列表
*/
public List<gameserver></gameserver> getServersByGame(Game game);
}

DWR配置文件：

xml 代码

"-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"
"http://getahead.ltd.uk/dwr/dwr20.dtd">
<dwr>
<allow>
<create creator="spring" javascript="GameService">
<param name="class" value="org.jron.cqiu.service.GameService"/>
<param name="beanName" value="gs"/>
<include method="getGameSelector"/>
<include method="getServersByGame"/>
create>
<convert converter="bean" match="org.jron.cqiu.model.Game"/>
<convert converter="bean" match="org.jron.cqiu.model.GameServer"/>
<convert converter="bean" match="org.jron.cqiu.util.LabelValue"/>
<convert converter="bean" match="org.jron.cqiu.model.Player"/>
allow>
dwr>

gameseletor.jsp：

xml 代码

<%@ include file="/common/taglibs.jsp" %>
<head>
<title><fmt:message key="gameselect.title"/></title>
<meta name="heading" content="<fmt:message key='gameselect.heading'/>"/>
<meta name="menu" content="gameMenu"/>
<script type="text/javascript" src="<c:url value='/dwr/interface/GameService.js'/>"></script>
<script type="text/javascript" src="<c:url value='/dwr/engine.js'/>"></script>
<script type="text/javascript" src="<c:url value='/dwr/util.js'/>"></script>
<script type="text/javascript" src="<c:url value='/scripts/prototype.js'/>"></script>
</head>
<fieldset>
<legend><fmt:message key="gameselect.heading"/></legend>
<li style="list-style:none">
<div>
<fmt:message key="gameselect.game"/>:
</div>
<div id="game_div">
<select id="game_sel" onchange="leveli()"/>
</div>
</li>
<li style="list-style:none">
<div id="l1div"></div>
<span id="l1span"></span>
</li>
<li style="list-style:none">
<div id="l2div"></div>
<span id="l2span"></span>
</li>
<li style="list-style:none">
<div id="l3div"></div>
<span id="l3span"></span>
</li>
<p id="view"></p>
</fieldset>

OK 关键的部分来了 gameseletor.jsp中的js部分：

js 代码

<script type="text/javascript">
var gameList;
var game;
var gameServ;
var gameServList;
var iLis;
var iiLis;
var iiiLis;
window.onload = function() {
//获取游戏列表
GameService.getGameSelector(null, displayGames);
}
function displayGames(games) {
gameList = games;
//显示游戏选择框
DWRUtil.addOptions("game_sel", gameList, 'id', 'gameName');
//初始化游戏
initGame();
//获取服务器列表
GameService.getServersByGame(game, displayServs);
}
function displayServs(servs) {
gameServList = servs;
//初始化游戏服务器
initServer();
//初始化第一层
initLi();
//初始化第二层
initLii("filterNo");
//初始化第三层
initLiii("filterNo");
view();
}
function displayLevel(servs, level) {
gameServList = servs;
//去除不必要的显示
inspectLevel();
//由第一层发起
if (level == "li") {
//根据第一层过滤
liiFilter(DWRUtil.getText("li_sel"));
if (game.gameLevel == 1) {
changeServer(1);
} else {
//初始化游戏服务器
initServer();
//初始化第二层
initLii("filterYes");
//初始化第三层
initLiii("filterNo");
}
}
//由第二层发起
if (level == "lii") {
//根据第一层过滤
liiFilter(DWRUtil.getText("li_sel"));
//根据第二层过滤
liiiFilter(DWRUtil.getText("lii_sel"));
if (game.gameLevel == 2) {
changeServer(2);
} else {
//初始化游戏服务器
initServer();
//初始化第三层
initLiii("filterYes");
}
}
//由第三层发起
if (level == "liii") {
/*
//根据第一层过滤
liiFilter(DWRUtil.getText("li_sel"));
//根据第二层过滤
liiiFilter(DWRUtil.getText("lii_sel"));
//根据第三层过滤
livFilter(DWRUtil.getText("liii_sel"));
*/
if (game.gameLevel == 3) {
changeServer(3);
}
}
view();
}
function leveli() {
//变更游戏
changeGame();
inspectLevel();
GameService.getServersByGame(game, displayServs);
}
function levelii() {
GameService.getServersByGame(game, {
callback: function(dataFromServ) {
displayLevel(dataFromServ, "li");
}
});
}
function leveliii() {
GameService.getServersByGame(game, {
callback: function(dataFromServ) {
displayLevel(dataFromServ, "lii");
}
});
}
function leveliv() {
/*
GameService.getServersByGame(game, {
callback: function(dataFromServ) {
displayLevel(dataFromServ, "liii");
}
});
*/
displayLevel(gameServList, "liii");
}
function inspectLevel() {
if (game.gameLevel == 1) {
$('l2div', 'l2span', 'l3div', 'l3span').invoke('update');
}
if (game.gameLevel == 2) {
$('l3div', 'l3span').invoke('update');
}
}
//去除重复的option
function removeDuplicate(options, selDefault) {
return options.reject(function(opt) {
return opt == selDefault;
})
}
function initLi() {
if (game.gameLevel >= 1) {
//获取第一层　String
iLisDo();
//显示第一层 label
$('l1div').innerHTML = game.l1Name;
//显示第一层
$('l1span').innerHTML = "<select id='li_sel' onchange='levelii();'></select>";
DWRUtil.removeAllOptions("li_sel");
DWRUtil.addOptions("li_sel", [gameServ.level1]);
DWRUtil.addOptions("li_sel", removeDuplicate(iLis, gameServ.level1));
}
}
function initLii(from) {
if (game.gameLevel >= 2) {
//获取第二层 String
iiLisDo(from);
//显示第二层 label
$('l2div').update(game.l2Name);
//显示第二层
$('l2span').innerHTML = "<select id='lii_sel' onchange='leveliii();'></select>";
DWRUtil.removeAllOptions("lii_sel");
DWRUtil.addOptions("lii_sel", [gameServ.level2]);
DWRUtil.addOptions("lii_sel", removeDuplicate(iiLis, gameServ.level2));
}
}
function initLiii(from) {
if (game.gameLevel >= 3) {
//获取第三层 String
iiiLisDo(from);
//显示第三层 label
$('l3div').update(game.l3Name);
//显示第三层
$('l3span').innerHTML = "<select id='liii_sel' onchange='leveliv();'></select>";
DWRUtil.removeAllOptions("liii_sel");
DWRUtil.addOptions("liii_sel", [gameServ.level3]);
DWRUtil.addOptions("liii_sel", removeDuplicate(iiiLis, gameServ.level3));
}
}
function changeGame() {
var gameid = $('game_sel').value;
var gameText = DWRUtil.getText("game_sel");
game = gameList.detect(function(g) {
return (g.id == gameid && g.gameName == gameText);
});
}
function initServer() {
gameServ = gameServList.first();
}
function initGame() {
game = gameList.first();
}
function livFilter(liiiText) {
gameServList = gameServList.findAll(function(serv) {
return (serv.level3 == liiiText);
});
}
function liiiFilter(liiText) {
gameServList = gameServList.findAll(function(serv) {
return (serv.level2 == liiText);
});
}
function liiFilter(liText) {
gameServList = gameServList.findAll(function(serv) {
return (serv.level1 == liText);
});
}
function iiiLisDo(from) {
if (from == "filterNo") {
//根据第二层过滤
liiiFilter(gameServ.level2);
}
iiiLis = gameServList.collect(function(serv) {
return serv.level3;
}).uniq();
}
function iiLisDo(from) {
if (from == "filterNo") {
//根据第一层过滤
liiFilter(gameServ.level1);
}
iiLis = gameServList.collect(function(serv) {
return serv.level2;
}).uniq();
}
function iLisDo() {
iLis = gameServList.collect(function(serv) {
return serv.level1;
}).uniq();
}
function changeServer(level) {
var i,ii,iii;
i = DWRUtil.getText("li_sel");
if (level == 1) {
gameServ = gameServList.detect(function(serv) {
return serv.level1 == i;
});
}
if (level == 2) {
ii = DWRUtil.getText("lii_sel");
gameServ = gameServList.detect(function(serv) {
return (serv.level1 == i && serv.level2 == ii);
});
}
if (level == 3) {
ii = DWRUtil.getText("lii_sel");
iii = DWRUtil.getText("liii_sel");
gameServ = gameServList.detect(function(serv) {
return (serv.level1 == i && serv.level2 == ii && serv.level3 == iii);
});
}
}
function view() {
var str;
str = "Game: " + $A($H(game)).compact() + "<br>";
str += "Game server: " + $A($H(gameServ)).compact() + "<br>";
$('view').update(str);
}
</script>