從零開始實現放置遊戲（九）——實現後臺管理系統（7）地圖選擇控制元件
阿新 • • 發佈：2019-07-09
前面做了地圖怪物的新增，刪除，查詢等功能。但新增怪物的時候，需要選擇怪物所在地圖。前幾張的原始碼中，我忘了把這部分改回去，所以如果想要成功新增，需要自己改一下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();
…………
…………
Helper.js
這裡，主要封裝了兩個事件。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();
}
}
chooseMap.js
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>
…………
…………
add.jsp
執行效果
小結
本章簡要實現了一個前端的小功能。感覺最近幾張比較枯燥，都是實際業務程式碼，沒有什麼需要特別介紹。
到這裡，後臺管理系統基本實現完畢。下一張預計開始開發idlewow-game模組。
本章原始碼下載地址：https://idlestudio.ctfile.com/fs/14960372-386615235
本文原文地址：https://www.cnblogs.com/lyosaki88/p/idlewow_9.html
&n