需求：
工资表用户应该可以弹框选择（弹窗选择用户表的id）
最后效果差不多这样：
步骤：
1.首先，先看我们需求啊， 工资表用户应该可以弹框选择
通过需求确认：
与这个需求关联的表有：
【用户工资表】，【用户表】
需求是，当用户工资表添加数据--选择用户id时，可以弹窗选择用户表的数据。
也就是当我们添加时，将用户id字段/选项目前的text形式转为弹窗选择
2.然后我们确定一下，上文说弹窗选择用户id，那咱们需要找到弹窗的数据表
例如上面是用户id，那就找你项目中确认的用户表即可，也就是说弹窗数据对应用户表，在用户表中，选择数据，并将结果返回给用户id
本项目用户表我直接用的若依的，若依直接找若依用户表数据即可。至于找那张表以及他们所在位置，先别急，按照下面步骤一步步操作就可以。
具体步骤
一.打开工资表add页面（选择add页面，是因为需求说了，是用户添加工资数据时，修改字段）
下面是原始代码：
<!DOCTYPE html> <html lang="zh" xmlns:th="http://www.thymeleaf.org" > <head> <th:block th:include="include :: header('新增用户工资')" /> <th:block th:include="include :: datetimepicker-css" /> </head> <body class="white-bg"> <div class="wrapper wrapper-content animated fadeInRight ibox-content"> <form class="form-horizontal m" id="form-salary-add"> <div class="form-group"> <label class="col-sm-3 control-label is-required">用户ID：</label> <div class="col-sm-8"> <input name="userId" class="form-control" type="text" required> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">工资：</label> <div class="col-sm-8"> <input name="salary" class="form-control" type="text"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">生效时间：</label> <div class="col-sm-8"> <div class="input-group date"> <input name="effectDate" class="form-control" placeholder="yyyy-MM-dd" type="text"> <span class="input-group-addon"><i class="fa fa-calendar"></i></span> </div> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">备注信息：</label> <div class="col-sm-8"> <input name="remark" class="form-control" type="text"> </div> </div> </form> </div> <th:block th:include="include :: footer" /> <th:block th:include="include :: datetimepicker-js" /> <script th:inline="javascript"> var prefix = ctx + "jh_product/salary" $("#form-salary-add").validate({ focusCleanup: true }); function submitHandler() { if ($.validate.form()) { $.operate.save(prefix + "/add", $('#form-salary-add').serialize()); } } $("input[name='effectDate']").datetimepicker({ format: "yyyy-mm-dd", minView: "month", autoclose: true }); </script> </body> </html>
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
<th:block th:include="include :: header('新增用户工资')" />
<th:block th:include="include :: datetimepicker-css" />
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
<form class="form-horizontal m" id="form-salary-add">
下面这是用户id代码，要将text形式转为弹窗形式
<div class="form-group">
<label class="col-sm-3 control-label is-required">用户ID：</label>
<div class="col-sm-8">
<input name="userId" class="form-control" type="text" required>
</div>
修改第一处：
<div class="form-group">
<label class="col-sm-3 control-label is-required">用户ID：</label>
<div class="col-sm-8">//解释一下：下面input 之所以写俩，一个userName 一个userId 原因是因为，这个表数据中没有员工名字，只有员工id，依旧分不清谁是谁，所以我们加一个userName，这个数据也在我们所要弹窗调用的用户表里，这个userName ，userId，这俩名字，我们来自于，用户表domain下的字段，我在这段代码下放个图片
<input name="userName" type="hidden"><!--员工姓名--> <input name="userId" class="form-control" type="text" readonly="true" οnclick="selectWxUser()" required><!--员工id--> <span class="input-group-addon"><i class="fa fa-search"></i></span><!-- <input name="userId" class="form-control" type="text" required>-->
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">工资：</label>
<div class="col-sm-8">
<input name="salary" class="form-control" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">生效时间：</label>
<div class="col-sm-8">
<div class="input-group date">
<input name="effectDate" class="form-control" placeholder="yyyy-MM-dd" type="text">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">备注信息：</label>
<div class="col-sm-8">
<input name="remark" class="form-control" type="text">
</div>
</div>
</form>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<script th:inline="javascript">
var prefix = ctx + "jh_product/salary"
$("#form-salary-add").validate({
focusCleanup: true
});function submitHandler() {
if ($.validate.form()) {
$.operate.save(prefix + "/add", $('#form-salary-add').serialize());
}
}$("input[name='effectDate']").datetimepicker({
format: "yyyy-mm-dd",
minView: "month",
autoclose: true
修改第二处：对应上面调用的方法
我当时的操作过程：
function selectWxUser() {
//解释一下，下面这个url地址，我们去若依用户表Controller找（改成弹窗形式要选择的数据在用户表Conteoller里），见下图
// var prefix = ctx + "system/user";
// var url = prefix + "/list";
var url =ctx + "system/user/list"
$.modal.open("选择员工id", url, '800', '600', function (index, layero) {
var iframeWin = layero.find('iframe')[0];
var data = iframeWin.contentWindow.selectHandler(index, layero);
console.debug(data);
if (data.length > 0) {
var user = data[0];
console.debug("select userId:" + user.userId);
console.debug("select userName:" + user.userName);
$("input[name='userId']").val(user.userId);
$("input[name='userName']").val(user.userName);
}
$.modal.close(index);
});
}
上图地址对应controller:
[先解释一下，上面两张图的请求地址是对应的]
接着看，你可以看到，上图红线框起来的地方最后一句：
return getDataTable(list);
他返回的是一个list形式，在页面是展示是这样：
而我们需要的页面形式，
所以，我们要新加一段请求地址的代码，如下
@RequiresPermissions("system:user:list")
@GetMapping("/select")
public String select()
{
return prefix + "/select";
}
与之对应的add页面也要随之改，因为这个url请求地址请求的就是controller
//用户id多选框
function selectWxUser() {
//解释一下，下面这个url地址，我们去用户表找（改成弹窗形式要选择的数据在用户表里），见下图
// var prefix = ctx + "system/user";
// var url = prefix + "/select";
var url =ctx + "system/user/select"
$.modal.open("选择员工id", url, '800', '600', function (index, layero) {
var iframeWin = layero.find('iframe')[0];
var data = iframeWin.contentWindow.selectHandler(index, layero);
console.debug(data);
if (data.length > 0) {
var user = data[0];
console.debug("select userId:" + user.userId);
console.debug("select userName:" + user.userName);
$("input[name='userId']").val(user.userId);
$("input[name='userName']").val(user.userName);
}
$.modal.close(index);
});
}
</script>
</body>
</html>
完整的add页面代码：
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
<th:block th:include="include :: header('新增用户工资')" />
<th:block th:include="include :: datetimepicker-css" />
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
<form class="form-horizontal m" id="form-salary-add">
<div class="form-group">
<label class="col-sm-3 control-label is-required">用户ID：</label>
<div class="col-sm-8">
<input name="userName" type="hidden"><!--员工姓名-->
<input name="userId" class="form-control" type="text" readonly="true"
onclick="selectWxUser()" required><!--员工id-->
<!-- <input name="userId" class="form-control" type="text" required>-->
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">工资：</label>
<div class="col-sm-8">
<input name="salary" class="form-control" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">生效时间：</label>
<div class="col-sm-8">
<div class="input-group date">
<input name="effectDate" class="form-control" placeholder="yyyy-MM-dd" type="text">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">备注信息：</label>
<div class="col-sm-8">
<input name="remark" class="form-control" type="text">
</div>
</div>
</form>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<script th:inline="javascript">
var prefix = ctx + "jh_product/salary"
$("#form-salary-add").validate({
focusCleanup: true
});
function submitHandler() {
if ($.validate.form()) {
$.operate.save(prefix + "/add", $('#form-salary-add').serialize());
}
}
$("input[name='effectDate']").datetimepicker({
format: "yyyy-mm-dd",
minView: "month",
autoclose: true
});
//用户id多选框
function selectWxUser() {
//解释一下，下面这个url地址，我们去用户表找（改成弹窗形式要选择的数据在用户表里），见下图
// var prefix = ctx + "system/user";
// var url = prefix + "/select";
var url =ctx + "system/user/select"
$.modal.open("选择员工id", url, '800', '600', function (index, layero) {
var iframeWin = layero.find('iframe')[0];
var data = iframeWin.contentWindow.selectHandler(index, layero);
console.debug(data);
if (data.length > 0) {
var user = data[0];
console.debug("select userId:" + user.userId);
console.debug("select userName:" + user.userName);
$("input[name='userId']").val(user.userId);
$("input[name='userName']").val(user.userName);
}
$.modal.close(index);
});
}
</script>
</body>
</html>最后一步：上文写了，controlelr请求地址新添加了一个
为了避免乱套/混淆，我们需要的数据是用户表数据
我们可以新建一个html，名字叫select，跟user（弹窗要选择的页面文件）放一块。
将user.html代码复制到select
然后添加两段代码：
function selectHandler(index, layero) {
return table.rememberSelecteds["bootstrap-table"];
}
下面这段代码一定记得加，加上add表中的data才能获取到值，而不是unidefined
rememberSelected: true,
到此，这个功能完全完成。
![[附源码]java毕业设计企业物资信息管理系统](https://img-blog.csdnimg.cn/7a65172206d64983bf3136dbbf52749b.png)
