从零开始实现放置游戏(九)——实现后台管理系统(7)地图选择控件

  前面做了地图怪物的添加,删除,查询等功能。但添加怪物的时候,需要选择怪物所在地图。前几张的源代码中,我忘了把这部分改回去,所以如果想要成功添加,需要自己改一下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";
    }
}

UserControlController.java

  在/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>

chooseMap.jsp

  跟弹窗赋值相关的代码,为了代码简洁,我们还是封装成一个类,写在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

原文地址:https://www.cnblogs.com/lyosaki88/p/idlewow_9.html

时间: 2024-10-10 07:58:15

从零开始实现放置游戏(九)——实现后台管理系统(7)地图选择控件的相关文章

Asp.net中从后台中如何获取html控件

比如定义html的文本框如下: <input  type="text" onclick="fun()" id="htmlTxtDate"  /> 想要在后台C#程序里面通过编程获取该文本框的值,一个简单的方法是: 在HTML控件上加上 runat="server" ,然后在后台C# CODE :this.控件ID.Value.例如: <input  type="text" onclick=

从零开始实现放置游戏(六)——实现挂机战斗(4)导入Excel数值配置

前面我们已经实现了在后台管理系统中,对配置数据的增删查改.但每次添加只能添加一条数据,实际生产中,大量数据通过手工一条一条添加不太现实.本章我们就实现通过Excel导入配置数据的功能.这里我们还是以地图数据为例,其他配置项可参照此例. 涉及的功能点主要有对office文档的编程.文件上传功能.流程图大致如下: 一.添加依赖项 解析office文档推荐使用免费的开源组件POI,已经可以满足80%的功能需求.上传文件需要依赖commons-fileupload包.我们在pom中添加下列代码: <!-

通用权限管理系统与第三方前端控件集成实现的多种选择功能

在项目中使用使用了通用权限管理系统的底层代码,同时配合前端控件,实现多种输入选择的功能: 1:直接输入框选择的 实现在输入字符时自动去后台检索,将匹配项显示在下拉框中,后台对应的实现代码截图: 2:输入框,弹出窗口选人的. 这个功能可实现在点击输入框右侧的按钮时弹出一个窗口,在窗口中点击行时将会将改行对应的项回填到输入框中,窗口中的实现比较简单,有些难度的时点击行时的事件,下面是JS代码部分. 弹出窗口中的双击事件 //双击向top.frmright的窗口传值 function onDblCli

用于后台管理的列表数据控件:DataGrid和Select

常听人说不喜欢javascript.然而我一个一直用C#做后端的人,最喜欢的编程语言就是javascript了,我接收它的优点,也接收它的缺点! 前段时间接触过easyui,用过里面的DataGrid和Combobox等控件,感觉DataGrid的确减少了一些重复的工作,但是easyui改变原有的Element,比如textbox,不能用$("#id").val()获取值了,只能用$(“#id”).textbox('getValue')来获取,不喜欢这样.国庆放假,票到3号了,今天有时

MVC中如何将后台封装好的Web控件发到前台视图显示

最近在用MVC开发的时候,师姐说所有用到的控件都要写在后台,然后从后台发到前台,这样就改变了以前把页面做死了的缺点.但是在实现的时候,遇到了点儿问题,如图: 上面代码写了一个LinkButton,当调用这个静态方法后,会生成一个LinkButton的HTML代码,这个是比较简单的元件,如果,现在我要拼接一个功能齐全的DataGridView控件,要这个控件有分页栏,各种添加删除功能,CSS样式,为了复用我们的EasyUI元件库,估计这个HTML代码也得有半页多吧.如果我要在每次遇到参数的时候都要

后台数据赋给前台控件

是首先在后台文件里定义一个变量 public static string str= ""; protected void Page_Load(object sender, EventArgs e) { str="ASP" } 记住一定要定义在Page_Load事件外面,与Page_Load事件同级 然后在前台以TextBox控件为例 <input type="text" value="<%=str%> /> 至此

.NET后台如何获取前台HMTL控件的值

很多时候我们需要HTML控件,感觉比服务器控件更加简介,清爽,那么如何获取HMTL控件的值呢,请看下面例子: 前台页面代码: <input id="Text1" type="text" name="test" /> 获取值的后台代码:Request.Form["test"];记住这里是使用的name获取它的值. 假如是这个控件: <select id="sel_sex" name=&quo

从零开始实现放置游戏(十二)——实现战斗挂机(3)数据字典和缓存改造

上一章,我们添加了游戏的主界面和注册登录功能.由于距离上上篇间隔较长,可能有些内容想些的后来就忘了.同时,逻辑也不复杂,所以描述比较粗略. 现在随着模块的增加,整个架构也暴露出一些问题.本章我们将对整个系统进行大规模重构. 比如,之前为了快速开发,rms模块,我们采用了直接访问数据库的方式,对于rms模块本身来说,没有什么问题. 但是,在game模块中,对于频繁访问的.不经常改变的数据或接口,希望采用缓存的方式,将数据缓存起来,减少后端压力,同时加快响应速度,从而提升体验. 之前rms模块中尝试

从零开始实现放置游戏(八)——实现挂机战斗(6)代码重构

前几张,我们主要实现了升级经验.人物等级属性.地图.地图怪物,这四种配置的增删查改以及Excel导入功能.我们主要以地图怪物为例,因此在文章末尾提供的源代码中只实现了地图怪物这部分的逻辑功能. 如果你照猫画虎,把4种配置功能的逻辑全部实现的话,就会发现,增删查改的代码基本相同,除了SQL语句和模型对象不同,其他地方变化不大. 本章我们利用泛型模板,对整个系统就行重构.在重构结束后,你就会发现写代码简直就是TMD艺术! 后端重构 idlewow-core 我们从最底层开始,首先重构位于core模块