前面做了地圖怪物的添加，刪除，查詢等功能。但添加怪物的時候，需要選擇怪物所在地圖。前幾張的源代碼中，我忘了把這部分改回去，所以如果想要成功添加，需要自己改一下html界面，手動填寫怪物所在地圖的ID。然而，我們配置的時候，地圖ID並不是固定的，而是數據庫自增的。所以這里最好做成一個彈窗，點擊后彈出一個地圖列表，讓我們手動選擇怪物所在地圖。
本章我們就實現這樣一個彈窗控件，實現對地圖的選擇。后面如果有選擇怪物，選擇裝備等需求，都可照貓畫虎。整個過程的流程大致如下：
實現步驟
首先，我們給彈出的地圖列表界面，添加相應的Controller和jsp頁面。
在com.idlewow.rms.controller包下新建UserControlController類，如下：
package com.idlewow.rms.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; @Controller @RequestMapping("/userControl") public class UserControlController { @RequestMapping("/chooseMap") public Object chooseMap() { return "/userControl/chooseMap"; } }
在/webapp/WEB-INF/views/userControl路徑下，新建chooseMap.jsp：
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ include file="/authorize.jsp" %> <!DOCTYPE html> <html class="x-admin-sm"> <head> <meta charset="UTF-8"> <title>選擇地圖</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/> <link rel="stylesheet" href="<%=path%>/css/font.css"> <link rel="stylesheet" href="<%=path%>/css/xadmin.css"> <script type="text/javascript" src="<%=path%>/lib/layui/layui.js" charset="utf-8"></script> <script type="text/javascript" src="<%=path%>/js/xadmin.js"></script> </head> <body> <div class="layui-fluid"> <div class="layui-row layui-col-space15"> <div class="layui-col-md12"> <div class="layui-card"> <div class="layui-card-body "> <form class="layui-form layui-col-space5" method="post"> <div class="layui-inline layui-show-xs-block"> <input type="text" name="name" placeholder="請輸入地圖名稱" autocomplete="off" class="layui-input"> </div> <div class="layui-inline layui-show-xs-block"> <button class="layui-btn" lay-submit lay-filter="search" type="button" onclick="search();"> <i class="layui-icon"></i>查詢 </button> </div> </form> </div> <div class="layui-card-body "> <table class="layui-table layui-form" id="datatable"></table> </div> </div> </div> </div> </div> </body> <script type="text/javascript" src="<%=path%>/js/helper.js?v=0530"></script> <script type="text/javascript" src="<%=path%>/js/wow/userControl/chooseMap.js?v=0530"></script> </html>
跟彈窗賦值相關的代碼，為了代碼簡潔，我們還是封裝成一個類，寫在helper.js里：
………… ………… var UserControl = function () { }; UserControl.prototype = { chooseMap: function (idTag, nameTag) { var url = _webroot + '/userControl/chooseMap?single=1'; if (idTag && idTag !== '') { url += '&idTag=' + idTag; } if (nameTag && nameTag !== '') { url += '&nameTag=' + nameTag; } window.open(url, '_blank', 'height=500,width=720,top=200,left=300,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no,z-look=yes'); }, chooseMapCallBack: function (id, name, idTag, nameTag) { if (idTag && idTag !== '') { $('#' + idTag).val(id); } else { $('#mapId').val(id); } if (nameTag && nameTag !== '') { $('#' + nameTag).val(name); } else { $('#mapName').val(name); } } }; window.userControl = new UserControl(); ………… …………
這里，主要封裝了兩個事件。chooseMap對應了點擊選擇地圖按鈕的彈窗事件，chooseMapCallBack對應選擇后的回調事件，這里回調時，默認賦值給id為mapId和mapName的dom。如果同一頁面，有多出需要選擇地圖的地方，可以指定回調賦值的dom id。
最后，在/webapp/js/wow/userControl目錄下，新建chooseMap.js，添加對應的業務js代碼：
layui.use(['upload', 'table', 'form'], function () { var cols = [[ {field: 'id', width: 50, title: 'id'} , {field: 'name', title: '地圖名稱'} , { field: 'occupy', title: '領土歸屬', templet: function (d) { return enumUtil.occupyImage(d.occupy) + enumUtil.occupy(d.occupy); } } , { title: '操作', width: 150, templet: function (d) { return '<button class="layui-btn layui-btn-xs" onclick="choose(\'' + d.id + '\',\'' + d.name + '\')" type="button"><i class="layui-icon"></i>選擇</button>'; } } ]]; crud.list(cols, '/manage/map/list'); }); function search() { var data = { name: $('input[name="name"]').val(), levelStart: $('input[name="levelStart"]').val(), levelEnd: $('input[name="levelEnd"]').val(), faction: $('select[name="faction"]').val(), mobClass: $('select[name="mobClass"]').val(), mobType: $('select[name="mobType"]').val() }; crud.search(data); } function choose(id, name) { if (confirm("確認選擇嗎？")) { if (window.opener) { var idTag = _querystring['idTag']; var nameTag = _querystring['nameTag']; window.opener.userControl.chooseMapCallBack(id, name, idTag, nameTag); } window.close(); } }
html頁面中，對應的添加選擇按鈕即可，這里由於前面提供的源代碼我忘記處理，所以應該是已經添加好的：
………… ………… <div class="layui-form-item"> <label for="mapName" class="layui-form-label"> <span class="x-red">*</span>所在地圖 </label> <div class="layui-input-inline"> <input type="hidden" id="mapId" name="mapId"/> <input type="text" id="mapName" name="mapName" required lay-verify="required" autocomplete="off" class="layui-input" readonly="readonly" onclick="userControl.chooseMap();"> <button type="button" class="layui-btn layui-inline" onclick="userControl.chooseMap();"><i class="layui-icon"></i>選擇地圖 </button> </div> </div> ………… …………
運行效果
小結
本章簡要實現了一個前端的小功能。感覺最近幾張比較枯燥，都是實際業務代碼，沒有什么需要特別介紹。
到這里，后台管理系統基本實現完畢。下一張預計開始開發idlewow-game模塊。
本章源碼下載地址：https://idlestudio.ctfile.com/fs/14960372-386615235
本文原文地址：https://www.cnblogs.com/lyosaki88/p/idlewow_9.html
項目交流群：329989095