在学员管理系统中，利用若依（RuoyFast）框架，新增缴费信息时，需要从学员信息表格中选择并回显。文章展示了前端HTML的关键代码，说明了如何在缴费信息新增界面实现这一功能。欢迎点赞和提出改进建议。
项目：学员管理系统
框架：若依（RuoyFast)
问题：新增缴费信息时把学员信息从学员信息里选择，看效果图：
开始上代码，这里就放前端代码了
学员信息html
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<th:block th:include="include :: header('学员基本信息列表')" />
</head>
<body class="gray-bg">
<div class="container-div">
<div class="row">
<div class="col-sm-12 search-collapse">
<form id="formId">
<div class="select-list">
<ul>
<li>
<label>学员姓名：</label>
<input type="text" name="stuName"/>
</li>
<li>
<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i> 搜索</a>
<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i> 重置</a>
</li>
</ul>
</div>
</form>
</div>
<div class="col-sm-12 select-table table-striped">
<table id="bootstrap-table"></table>
</div>
</div>
</div>
<th:block th:include="include :: footer" />
<script th:inline="javascript">
var editFlag = [[${@permission.hasPermi('lxmember:stubaseinfo:edit')}]];
var removeFlag = [[${@permission.hasPermi('lxmember:stubaseinfo:remove')}]];
var stuSexDatas = [[${@dict.getType('sys_user_sex')}]];
var statusDatas = [[${@dict.getType('sys_common_yesno')}]];
var prefix = ctx + "lxmember/stubaseinfo";
$(function() {
var options = {
url: prefix + "/list",
createUrl: prefix + "/add",
updateUrl: prefix + "/edit/{id}",
removeUrl: prefix + "/remove",
exportUrl: prefix + "/export",
showSearch:false,
showRefresh:false,
showToggle:false,
showColumns:false,
modalName: "学员基本信息",
columns: [{
radio: true
},
{
field: 'id',
title: 'ID',
visible: false
},
{
field: 'stuNo',
title: '学员编号',
// visible: false
},
{
field: 'stuName',
title: '学员姓名'
},
{
field: 'stuContact',
title: '父母联系人',
// visible: false
},]
};
$.table.init(options);
});
/* 学员状态显示 */
function statusTools(row) {
if (row.status == 1) {
return '<i class=\"fa fa-toggle-off text-info fa-2x\" onclick="enable(\'' + row.id + '\')"></i> ';
} else {
return '<i class=\"fa fa-toggle-on text-info fa-2x\" onclick="disable(\'' + row.id + '\')"></i> ';
}
}
/* 学员状态-停用 */
function disable(id) {
$.modal.confirm("确认要停用学员状态吗？", function() {
$.operate.post(prefix + "/changeStatus", { "id": id, "status": 1 });
})
}
/* 学员状态-启用 */
function enable(id) {
$.modal.confirm("确认要启用学员状态吗？", function() {
$.operate.post(prefix + "/changeStatus", { "id": id, "status": 0 });
})
}
//选中学生信息
function getSelections() {
return $("#" + table.options.id).bootstrapTable('getSelections');
}
</script>
</body>
</html>关键代码，其他的都是代码生成器生成的
//选中学生信息
function getSelections() {
return $("#" + table.options.id).bootstrapTable('getSelections');
}缴费信息新增界面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-stupayment-add">
<input name="stuNo" id="stuNo" class="form-control" type="hidden" readonly required>
<div class="form-group">
<label class="col-sm-3 control-label is-required">学员姓名：</label>
<div class="col-sm-3">
<input name="stuName" id="stuName" class="form-control" type="text" onclick="selectStu()" readonly required>
</div>
<label class="col-sm-3 control-label is-required">父母联系人：</label>
<div class="col-sm-3">
<input name="stuContact" id="stuContact" class="form-control" type="text" readonly required>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label is-required">校区名称：</label>
<div class="col-sm-9">
<input type="hidden" name="campusNo" id="campusNo">
<input name="campusName" id="campusName" class="form-control" type="text" readonly required>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label is-required">缴费编号：</label>
<div class="col-sm-3">
<input name="paymentNo" class="form-control" type="text" required>
</div>
<label class="col-sm-3 control-label is-required">缴费方式：</label>
<div class="col-sm-3">
<select name="paymentWay" class="form-control m-b" th:with="type=${@dict.getType('payment_way')}" required>
<option value="">请选择缴费方式</option>
<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label is-required">缴费类型：</label>
<div class="col-sm-3">
<select onchange="selectTime()" id="paymentType" name="paymentType" class="form-control m-b" th:with="type=${@dict.getType('payment_type')}" required>
<option value="">请选择缴费类型</option>
<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
</select>
</div>
<label class="col-sm-3 control-label is-required">缴费金额：</label>
<div class="col-sm-3">
<input name="paymentAmount" class="form-control" type="text" required>
</div>
</div>
<div class="form-group" id="jftime">
<label class="col-sm-3 control-label is-required">学费截止时间：</label>
<div class="col-sm-8">
<div class="input-group date">
<input name="paymentTime" id="paymentTime" class="form-control" placeholder="请选择" type="text" readonly>
<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 is-required">缴费时间：</label>
<div class="col-sm-8">
<div class="input-group date">
<input name="createTime" id="createTime" th:value="${#dates.format(#dates.createNow(), 'yyyy-MM-dd HH:mm:ss')}" class="form-control" type="text" readonly>
<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 + "lxmember/stupayment"
$("#form-stupayment-add").validate({
focusCleanup: true
});
function submitHandler() {
var paymentOnTime = $("#paymentType").val();
var paymentTime = $("#paymentTime").val();
var paymentOnTimes = $("#paymentOnTime").val();
if ($.validate.form()) {
if (paymentOnTime !=3){
if (paymentTime == "" || paymentTime == null){
layer.alert("学费截止时间不能为空")
}else {
$.operate.save(prefix + "/add", $('#form-stupayment-add').serialize());
}
}
}
}
$("input[name='paymentTime']").datetimepicker({
format: "yyyy-mm-dd",
minView: "month",//指定可以选择的最小视图，选项有：“hour”、“day”、“month”、“year”。默认为"hour"。
minuteStep:1,
// endDate:new Date(),
autoclose: true,
todayBtn:true,
clearBtn:true,
todayHighlight:true,
});
$("input[name='paymentOnTime']").datetimepicker({
format: "yyyy-mm-dd",
minView: "month",//指定可以选择的最小视图，选项有：“hour”、“day”、“month”、“year”。默认为"hour"。
minuteStep:1,
// endDate:new Date(),
autoclose: true,
todayBtn:true,
clearBtn:true,
todayHighlight:true,
});
//选择学员
function selectStu(){
var options = {
title: '选择用户',
url: prefix + "/selectstu",
callBack: doSubmit
};
$.modal.openOptions(options);
}
function doSubmit(index, layero){
var rows = layero.find("iframe")[0].contentWindow.getSelections();
if (rows.length == 0) {
$.modal.alertWarning("请至少选择一条记录");
return;
}
var body = $.modal.getChildFrame(index);
console.log(body)
$("#campusNo").val(rows[0].campusNo);//校区编号赋值
$("#campusName").val(rows[0].campusName);//校区名称赋值
$("#stuNo").val(rows[0].stuNo);//学员编号赋值
$("#stuName").val(rows[0].stuName);//学员编姓名赋值
$("#stuContact").val(rows[0].stuContact);//学员父母联系人赋值
$.modal.close(index);
}
//选中续费显示续费时间
function selectTime(e){
var paymentOnTime = $("#paymentType").val();
// console.log(paymentOnTime)
if (paymentOnTime==1){
// $("#xftime").css("display","none")
$("#jftime").css("display","")
}
if (paymentOnTime==2){
// $("#xftime").css("display","")
$("#jftime").css("display","")
}
if (paymentOnTime==3){
// $("#xftime").css("display","none")
$("#jftime").css("display","none")
}
}
</script>
</body>
</html>喜欢的点赞，若对你有用请拿走。觉得需要改进可以提意见，请勿喷，谢谢！！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
