DWR下拉框联动

    找了很多资料 解决了无数异常 然后这是我的成果 dwr新手哈
   在appfuse2.0m5 struts basic基础之上
   最基础的两个POJO:
 
Game:游戏
java 代码
 
  1. @Entity  
  2. @Table(name = "JGAME")  
  3. public class Game extends BaseObject {  
  4.   
  5.     @Id  
  6.     @GeneratedValue(strategy = GenerationType.AUTO)  
  7.     private Long id;  
  8.   
  9.     @OneToMany(  
  10.             mappedBy = "game",  
  11.             cascade = {CascadeType.REMOVE,CascadeType.MERGE},  
  12.             fetch = FetchType.LAZY  
  13.     )  
  14.     private List<gameserver></gameserver> gameServers = new ArrayList<gameserver></gameserver>();  
  15.   
  16.     private String gameName;  
  17.   
  18.     @Column(nullable = false)  
  19.     private Integer gameLevel;  
  20.   
  21.     private String l1Name;  
  22.     private String l2Name;  
  23.     private String l3Name;  
  24.   
  25.     //getter and setter  
  26.     ...  
  27. }  


GameServer:游戏服务器

java 代码
  1. @Entity  
  2. @Table(name = "JGAMESERVER")   
  3. public class GameServer extends BaseObject {   
  4.   
  5.     @Id  
  6.     @GeneratedValue(strategy = GenerationType.AUTO)   
  7.     private Long id;   
  8.   
  9.     @ManyToOne  
  10.     @JoinColumn(name = "GAME_ID",nullable = false)   
  11.     private Game game;   
  12.   
  13.     private String level1;   
  14.     private String level2;   
  15.     private String level3;   
  16.     //getter and setter
  17.     ... 
  18. }  

GameService接口:

java 代码
  1. @WebService  
  2. public interface GameService {   
  3.   
  4.     /**
  5.      * 根据游戏获取游戏列表
  6.      */
  7.     public List<game></game> getGameSelector(Game game);   
  8.   
  9.     /**
  10.      * 根据游戏获取游戏服务器列表
  11.      */
  12.     public List<gameserver></gameserver> getServersByGame(Game game);   
  13.   
  14. }  
  15.      
  16.  

DWR配置文件:

xml 代码
  1.     "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"   
  2.     "http://getahead.ltd.uk/dwr/dwr20.dtd">  
  3. <dwr>  
  4.     <allow>  
  5.         <create creator="spring" javascript="GameService">  
  6.             <param name="class" value="org.jron.cqiu.service.GameService"/>  
  7.             <param name="beanName" value="gs"/>  
  8.             <include method="getGameSelector"/>  
  9.             <include method="getServersByGame"/>  
  10.         create>  
  11.         <convert converter="bean" match="org.jron.cqiu.model.Game"/>  
  12.         <convert converter="bean" match="org.jron.cqiu.model.GameServer"/>  
  13.         <convert converter="bean" match="org.jron.cqiu.util.LabelValue"/>  
  14.         <convert converter="bean" match="org.jron.cqiu.model.Player"/>  
  15.     allow>  
  16. dwr>  

gameseletor.jsp:

xml 代码
  1. <%@ include file="/common/taglibs.jsp" %>  
  2.   
  3. <head>  
  4.     <title><fmt:message key="gameselect.title"/></title>  
  5.     <meta name="heading" content="<fmt:message key='gameselect.heading'/>"/>  
  6.     <meta name="menu" content="gameMenu"/>  
  7.   
  8.     <script type="text/javascript" src="<c:url value='/dwr/interface/GameService.js'/>"></script>  
  9.     <script type="text/javascript" src="<c:url value='/dwr/engine.js'/>"></script>  
  10.     <script type="text/javascript" src="<c:url value='/dwr/util.js'/>"></script>  
  11.     <script type="text/javascript" src="<c:url value='/scripts/prototype.js'/>"></script>  
  12. </head>  
  13.   
  14.   
  15. <fieldset>  
  16.     <legend><fmt:message key="gameselect.heading"/></legend>  
  17.     <li style="list-style:none">  
  18.         <div>  
  19.             <fmt:message key="gameselect.game"/>:   
  20.         </div>  
  21.         <div id="game_div">  
  22.             <select id="game_sel" onchange="leveli()"/>  
  23.         </div>  
  24.     </li>  
  25.     <!--第一层-->  
  26.     <li style="list-style:none">  
  27.         <div id="l1div"></div>  
  28.         <span id="l1span"></span>  
  29.     </li>  
  30.     <!--第二层-->  
  31.     <li style="list-style:none">  
  32.         <div id="l2div"></div>  
  33.         <span id="l2span"></span>  
  34.     </li>  
  35.     <!--第三层-->  
  36.     <li style="list-style:none">  
  37.         <div id="l3div"></div>  
  38.         <span id="l3span"></span>  
  39.     </li>  
  40.   
  41.     <p id="view"></p>  
  42.   
  43. </fieldset>  

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

js 代码
  1.   
  2. <script type="text/javascript">   
  3. var gameList;   
  4. var game;   
  5. var gameServ;   
  6. var gameServList;   
  7. var iLis;   
  8. var iiLis;   
  9. var iiiLis;   
  10.   
  11. window.onload = function() {   
  12.     //获取游戏列表   
  13.     GameService.getGameSelector(null, displayGames);   
  14. }   
  15.   
  16. function displayGames(games) {   
  17.     gameList = games;   
  18.     //显示游戏选择框   
  19.     DWRUtil.addOptions("game_sel", gameList, 'id', 'gameName');   
  20.     //初始化游戏   
  21.     initGame();   
  22.     //获取服务器列表   
  23.     GameService.getServersByGame(game, displayServs);   
  24. }   
  25.   
  26. function displayServs(servs) {   
  27.     gameServList = servs;   
  28.     //初始化游戏服务器   
  29.     initServer();   
  30.     //初始化第一层   
  31.     initLi();   
  32.     //初始化第二层   
  33.     initLii("filterNo");   
  34.     //初始化第三层   
  35.     initLiii("filterNo");   
  36.   
  37.     view();   
  38. }   
  39.   
  40. function displayLevel(servs, level) {   
  41.     gameServList = servs;   
  42.     //去除不必要的显示   
  43.     inspectLevel();   
  44.     //由第一层发起   
  45.     if (level == "li") {   
  46.         //根据第一层过滤   
  47.         liiFilter(DWRUtil.getText("li_sel"));   
  48.         if (game.gameLevel == 1) {   
  49.             changeServer(1);   
  50.         } else {   
  51.             //初始化游戏服务器   
  52.             initServer();   
  53.             //初始化第二层   
  54.             initLii("filterYes");   
  55.             //初始化第三层   
  56.             initLiii("filterNo");   
  57.         }   
  58.     }   
  59.     //由第二层发起   
  60.     if (level == "lii") {   
  61.         //根据第一层过滤   
  62.         liiFilter(DWRUtil.getText("li_sel"));   
  63.         //根据第二层过滤   
  64.         liiiFilter(DWRUtil.getText("lii_sel"));   
  65.   
  66.         if (game.gameLevel == 2) {   
  67.             changeServer(2);   
  68.         } else {   
  69.             //初始化游戏服务器   
  70.             initServer();   
  71.             //初始化第三层   
  72.             initLiii("filterYes");   
  73.         }   
  74.     }   
  75.     //由第三层发起   
  76.     if (level == "liii") {   
  77.         /*  
  78.         //根据第一层过滤  
  79.         liiFilter(DWRUtil.getText("li_sel"));  
  80.         //根据第二层过滤  
  81.         liiiFilter(DWRUtil.getText("lii_sel"));  
  82.         //根据第三层过滤  
  83.         livFilter(DWRUtil.getText("liii_sel"));  
  84.         */  
  85.         if (game.gameLevel == 3) {   
  86.             changeServer(3);   
  87.         }   
  88.     }   
  89.   
  90.     view();   
  91. }   
  92.   
  93. function leveli() {   
  94.     //变更游戏   
  95.     changeGame();   
  96.     inspectLevel();   
  97.     GameService.getServersByGame(game, displayServs);   
  98. }   
  99.   
  100. function levelii() {   
  101.     GameService.getServersByGame(game, {   
  102.         callback: function(dataFromServ) {   
  103.             displayLevel(dataFromServ, "li");   
  104.         }   
  105.     });   
  106. }   
  107.   
  108. function leveliii() {   
  109.     GameService.getServersByGame(game, {   
  110.         callback: function(dataFromServ) {   
  111.             displayLevel(dataFromServ, "lii");   
  112.         }   
  113.     });   
  114. }   
  115.   
  116. function leveliv() {   
  117.     /*  
  118.     GameService.getServersByGame(game, {  
  119.         callback: function(dataFromServ) {  
  120.             displayLevel(dataFromServ, "liii");  
  121.         }  
  122.     });  
  123.     */  
  124.     displayLevel(gameServList, "liii");   
  125. }   
  126.   
  127. function inspectLevel() {   
  128.     if (game.gameLevel == 1) {   
  129.         $('l2div', 'l2span', 'l3div', 'l3span').invoke('update');   
  130.     }   
  131.     if (game.gameLevel == 2) {   
  132.         $('l3div', 'l3span').invoke('update');   
  133.     }   
  134. }   
  135.   
  136. //去除重复的option   
  137. function removeDuplicate(options, selDefault) {   
  138.     return options.reject(function(opt) {   
  139.         return opt == selDefault;   
  140.     })   
  141. }   
  142.   
  143. function initLi() {   
  144.     if (game.gameLevel >= 1) {   
  145.         //获取第一层 String   
  146.         iLisDo();   
  147.         //显示第一层 label   
  148.         $('l1div').innerHTML = game.l1Name;   
  149.         //显示第一层   
  150.         $('l1span').innerHTML = "<select id='li_sel' οnchange='levelii();'></select>";   
  151.   
  152.         DWRUtil.removeAllOptions("li_sel");   
  153.         DWRUtil.addOptions("li_sel", [gameServ.level1]);   
  154.         DWRUtil.addOptions("li_sel", removeDuplicate(iLis, gameServ.level1));   
  155.     }   
  156. }   
  157.   
  158. function initLii(from) {   
  159.     if (game.gameLevel >= 2) {   
  160.         //获取第二层 String   
  161.         iiLisDo(from);   
  162.         //显示第二层 label   
  163.         $('l2div').update(game.l2Name);   
  164.         //显示第二层   
  165.         $('l2span').innerHTML = "<select id='lii_sel' οnchange='leveliii();'></select>";   
  166.   
  167.         DWRUtil.removeAllOptions("lii_sel");   
  168.         DWRUtil.addOptions("lii_sel", [gameServ.level2]);   
  169.         DWRUtil.addOptions("lii_sel", removeDuplicate(iiLis, gameServ.level2));   
  170.     }   
  171. }   
  172.   
  173. function initLiii(from) {   
  174.     if (game.gameLevel >= 3) {   
  175.         //获取第三层 String   
  176.         iiiLisDo(from);   
  177.         //显示第三层 label   
  178.         $('l3div').update(game.l3Name);   
  179.         //显示第三层   
  180.         $('l3span').innerHTML = "<select id='liii_sel' οnchange='leveliv();'></select>";   
  181.   
  182.         DWRUtil.removeAllOptions("liii_sel");   
  183.         DWRUtil.addOptions("liii_sel", [gameServ.level3]);   
  184.         DWRUtil.addOptions("liii_sel", removeDuplicate(iiiLis, gameServ.level3));   
  185.     }   
  186. }   
  187.   
  188. function changeGame() {   
  189.     var gameid = $('game_sel').value;   
  190.     var gameText = DWRUtil.getText("game_sel");   
  191.     game = gameList.detect(function(g) {   
  192.         return (g.id == gameid && g.gameName == gameText);   
  193.     });   
  194. }   
  195.   
  196. function initServer() {   
  197.     gameServ = gameServList.first();   
  198. }   
  199.   
  200. function initGame() {   
  201.     game = gameList.first();   
  202. }   
  203.   
  204. function livFilter(liiiText) {   
  205.     gameServList = gameServList.findAll(function(serv) {   
  206.         return (serv.level3 == liiiText);   
  207.     });   
  208. }   
  209.   
  210. function liiiFilter(liiText) {   
  211.     gameServList = gameServList.findAll(function(serv) {   
  212.         return (serv.level2 == liiText);   
  213.     });   
  214. }   
  215.   
  216. function liiFilter(liText) {   
  217.     gameServList = gameServList.findAll(function(serv) {   
  218.         return (serv.level1 == liText);   
  219.     });   
  220. }   
  221.   
  222. function iiiLisDo(from) {   
  223.     if (from == "filterNo") {   
  224.         //根据第二层过滤   
  225.         liiiFilter(gameServ.level2);   
  226.     }   
  227.   
  228.     iiiLis = gameServList.collect(function(serv) {   
  229.         return serv.level3;   
  230.     }).uniq();   
  231. }   
  232.   
  233. function iiLisDo(from) {   
  234.     if (from == "filterNo") {   
  235.         //根据第一层过滤   
  236.         liiFilter(gameServ.level1);   
  237.     }   
  238.   
  239.     iiLis = gameServList.collect(function(serv) {   
  240.         return serv.level2;   
  241.     }).uniq();   
  242. }   
  243.   
  244. function iLisDo() {   
  245.     iLis = gameServList.collect(function(serv) {   
  246.         return serv.level1;   
  247.     }).uniq();   
  248. }   
  249.   
  250. function changeServer(level) {   
  251.     var i,ii,iii;   
  252.     i = DWRUtil.getText("li_sel");   
  253.     if (level == 1) {   
  254.         gameServ = gameServList.detect(function(serv) {   
  255.             return serv.level1 == i;   
  256.         });   
  257.     }   
  258.     if (level == 2) {   
  259.         ii = DWRUtil.getText("lii_sel");   
  260.         gameServ = gameServList.detect(function(serv) {   
  261.             return (serv.level1 == i && serv.level2 == ii);   
  262.         });   
  263.     }   
  264.     if (level == 3) {   
  265.         ii = DWRUtil.getText("lii_sel");   
  266.         iii = DWRUtil.getText("liii_sel");   
  267.         gameServ = gameServList.detect(function(serv) {   
  268.             return (serv.level1 == i && serv.level2 == ii && serv.level3 == iii);   
  269.         });   
  270.     }   
  271. }   
  272.   
  273. function view() {   
  274.     var str;   
  275.     str = "Game: " + $A($H(game)).compact() + "<br>";   
  276.     str += "Game server: " + $A($H(gameServ)).compact() + "<br>";   
  277.     $('view').update(str);   
  278. }   
  279.   
  280. </script>  

 搞定代码了 

就这样 完毕..

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值