上次讲到认证管理的让图片显示,这次我们要讲的是如何在点击一个按钮时,弹出一个表格,如图所示
这次需要使用到上次的在表格中显示图片的知识点,所以控制器中的代码大差不差,主要的是需要使用到layui中的插件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>公告类型信息</title>
<link rel="shortcut icon" href="~/Content/images/重庆邮电.ico" />
<link href="~/Content/Plugins/layui/css/layui.css" rel="stylesheet" />
<link href="~/Content/Plugins/bootstrap-4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<style>
.layui-btn-xs {
height: 28px;
padding: 2px 16px;
font-size: 12px;
}
.col-form-label {
font-size: 14px;
}
</style>
</head>
<body>
<!-- 查询条件&表格 -->
<div class="container-fluid">
<!--查询条件-->
<div class="row">
<div class="col-sm-8">
<form action="/" method="post" id="formSearch">
<div class="form-row">
<div class="form-row">
<div class="row mt-2">
<label class="col-form-label col-auto" for="searchText">搜索:</label>
<input type="text" class="form-control col" style="width:500px" id="searchText" name="searchText" placeholder="模糊搜索用户名称,邮箱" oninput="searchStudent()">
</div>
</div>
</div>
</form>
</div>
</div>
<!--table 表格-->
<div class="row mt-1">
<div class="col">
<table class="layui-hide" id="tabStudents" lay-filter="tabStudents"></table>
</div>
</div>
<!--model 查看模态窗体-->
<div class="modal fade" id="modTitles" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-xl" style="max-width: 900px;">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="textBorrowing">用户材料详细信息</h5>
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container-fluid p-2">
<div class="card ">
<div class="card-body p-0">
<table id="Tabing" lay-filter="Tabing"></table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--model 查看模态窗体-->
<div class="modal fade" id="modles" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-xl" style="max-width: 900px;">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="textBorrowing">用户资金详细信息</h5>
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container-fluid p-2">
<div class="card ">
<div class="card-body p-0">
<table id="bing" lay-filter="bing"></table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 基本信息模态框-->
<div class="modal fade" id="studentModal" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-md">
<div class="modal-content">
<!-- 顶部 标题 关闭按钮 -->
<div class="modal-header">
<!--标题-->
<h5 class="modal-title" id="BasicInformation">用户基本信息</h5>
<!--关闭按钮-->
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- 内容部分 表单-->
<div class="modal-body">
<form id="from">
<!--隐藏域 用户id-->
<input type="hidden" id="UserDetail" name="UserDetail" value="" />
<div class="row">
<!-- 表单控件 -->
<div class="col-12 col-lg-12 mt-3 row">
<div class="form-row col-12">
<label for="UserName" class="col-3 col-form-label">用户名</label>
<div class="col-9">
<input type="text" class="form-control" id="UserName1" name="UserName" autocomplete="off" disabled />
</div>
</div>
<div class="form-row col-12 mt-2">
<label for="" class="col-3 col-form-label">真实姓名</label>
<div class="col-9">
<input type="text" class="form-control" id="DetailName1" name="DetailName" autocomplete="off" disabled/>
</div>
</div>
<div class="form-row col-12 mt-2">
<label for="LoginNum" class="col-3 col-form-label">性别</label>
<div class="col-9">
<input type="text" class="form-control" id="DetaiSex1" name="DetaiSex" autocomplete="off" disabled/>
</div>
</div>
<div class="form-row col-12 mt-2">
<label for="Register" class="col-3 col-form-label">出生日期</label>
<div class="col-9">
<input type="text" class="form-control" id="DetaiBirthDate1" name="DetaiBirthDate" autocomplete="off" disabled/>
</div>
</div>
<div class="form-row col-12 mt-2">
<label for="Lastlogin" class="col-3 col-form-label">籍贯</label>
<div class="col-9">
<input type="text" class="form-control" id="DetaiNativePlace1" name="DetaiNativePlace" autocomplete="off" disabled/>
</div>
</div>
<div class="form-row col-12 mt-2">
<label for="Finallylogin" class="col-3 col-form-label">身份证号码</label>
<div class="col-9">
<input type="text" class="form-control" id="DetaiIdNumber1" name="DetaiIdNumber" autocomplete="off" disabled/>
</div>
</div>
<div class="form-row col-12 mt-2">
<label for="Finallylogin" class="col-3 col-form-label">手机号码</label>
<div class="col-9">
<input type="text" class="form-control" id="DetaiPhone1" name="DetaiPhone" autocomplete="off" disabled/>
</div>
</div>
</div>
</div>
</form>
</div>
<!-- 底部 按钮 取消 确定 -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" onclick="saveStudentInfor()">保存</button>
</div>
</div>
</div>
</div>
<!-- 详细信息模态框-->
<div class="modal fade" id="details" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<!-- 顶部 标题 关闭按钮 -->
<div class="modal-header">
<!--标题-->
<h5 class="modal-title" id="UserDetails">用户详细信息</h5>
<!--关闭按钮-->
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- 内容部分 表单-->
<div class="modal-body">
<form id="formDetails">
<div class="row">
<!-- 表单控件 -->
<div class="col-12 col-lg-12 mt-3 row">
<div class="form-row col-12 col-xl-6 mt-2">
<label for="" class="col-3 col-form-label">用户名</label>
<div class="col-9">
<input type="text" class="form-control" id="UserName2" name="UserName2" autocomplete="off" disabled/>
</div>
</div>
<div class="form-row col-12 col-xl-6 mt-2">
<label for="LoginNum" class="col-3 col-form-label">用户类型</label>
<div class="col-9">
<input type="text" class="form-control" id="UserType" name="UserTypeName" autocomplete="off" disabled/>
</div>
</div>
<div class="form-row col-12 col-xl-6 mt-2">
<label for="Register" class="col-3 col-form-label">真实姓名</label><!--用户明细表-->
<div class="col-9">
<input type="text" class="form-control" id="DetailName2" name="DetailName" autocomplete="off" disabled/>
</div>
</div>
<div class="form-row col-12 col-xl-6 mt-2">
<label for="Lastlogin" class="col-3 col-form-label">性别</label><!--用户明细表-->
<div class="col-9">
<input type="text" class="form-control" id="DetaiSex2" name="DetaiSex" autocomplete="off" disabled/>
</div>
</div>
<div class="form-row col-12 col-xl-6 mt-2">
<label for="Finallylogin" class="col-3 col-form-label">出生日期</label><!--用户明细表-->
<div class="col-9">
<input type="text" class="form-control" id="DetaiBirthDate2" name="DetaiBirthDate" autocomplete="off" disabled/>
</div>
</div>
<div class="form-row col-12 col-xl-6 mt-2">
<label for="Finallylogin" class="col-3 col-form-label">身份证号</label><!--用户明细表-->
<div class="col-9">
<input type="text" class="form-control" id="DetaiIdNumber2" name="DetaiIdNumber" autocomplete="off" disabled/>
</div>
</div>
<div class="form-row col-12 col-xl-6 mt-2">
<label for="Finallylogin" class="col-3 col-form-label">手机号</label><!--用户明细表-->
<div class="col-9">
<input type="text" class="form-control" id="DetaiPhone2" name="DetaiPhone" autocomplete="off" disabled/>
</div>
</div>
<div class="form-row col-12 col-xl-6 mt-2">
<label for="Finallylogin" class="col-3 col-form-label">籍贯</label><!--用户明细表-->
<div class="col-9">
<input type="text" class="form-control" id="DetaiNativePlace2" name="DetaiNativePlace" autocomplete="off" disabled/>
</div>
</div>
<div class="form-row col-12 col-xl-6 mt-2">
<label for="Finallylogin" class="col-3 col-form-label">邮箱</label>
<div class="col-9">
<input type="text" class="form-control" id="Mailbox" name="Mailbox" autocomplete="off" disabled/>
</div>
</div>
<div class="form-row col-12 col-xl-6 mt-2">
<label for="Finallylogin" class="col-3 col-form-label">文化程度</label><!--用户明细表-->
<div class="col-9">
<input type="text" class="form-control" id="Culture" name="Culture" autocomplete="off" disabled/>
</div>
</div>
<div class="form-row col-12 col-xl-6 mt-2">
<label for="Finallylogin" class="col-3 col-form-label">婚姻状况</label><!--用户明细表-->
<div class="col-9">
<input type="text" class="form-control" id="MaritalStatus" name="MaritalStatus" autocomplete="off" disabled/>
</div>
</div>
<div class="form-row col-12 col-xl-6 mt-2">
<label for="Finallylogin" class="col-3 col-form-label">子女</label><!--用户明细表-->
<div class="col-9">
<input type="text" class="form-control" id="Children" name="Children" autocomplete="off" disabled/>
</div>
</div>
<div class="form-row col-12 col-xl-6 mt-2">
<label for="Finallylogin" class="col-3 col-form-label">社保</label><!--用户明细表-->
<div class="col-9">
<input type="text" class="form-control" id="SocialSecurity" name="SocialSecurity" autocomplete="off" disabled/>
</div>
</div>
<div class="form-row col-12 col-xl-6 mt-2">
<label for="Finallylogin" class="col-3 col-form-label">住房条件</label><!--用户明细表-->
<div class="col-9">
<input type="text" class="form-control" id="DetaiHousing" name="DetaiHousing" autocomplete="off" disabled/>
</div>
</div>
<div class="form-row col-12 col-xl-6 mt-2">
<label for="Finallylogin" class="col-3 col-form-label">是否购车</label><!--用户明细表-->
<div class="col-9">
<input type="text" class="form-control" id="IfBuyVehicle" name="IfBuyVehicle" autocomplete="off" disabled/>
</div>
</div>
<div class="form-row col-12 col-xl-6 mt-2">
<label for="Finallylogin" class="col-3 col-form-label">资产总额</label><!--用户账号表-->
<div class="col-9">
<input type="text" class="form-control" id="UserSum" name="UserSum" autocomplete="off" disabled/>
</div>
</div>
<div class="form-row col-12 col-xl-6 mt-2">
<label for="Finallylogin" class="col-3 col-form-label">可用金额</label><!--用户账号表-->
<div class="col-9">
<input type="text" class="form-control" id="AccountSum" name="AccountSum" autocomplete="off" disabled/>
</div>
</div>
<div class="form-row col-12 col-xl-6 mt-2">
<label for="Finallylogin" class="col-3 col-form-label">冻结金额</label><!--用户账号表-->
<div class="col-9">
<input type="text" class="form-control" id="AccounSumNo" name="AccounSumNo" autocomplete="off" disabled/>
</div>
</div>
<div class="form-row col-12 col-xl-6 mt-2">
<label for="Finallylogin" class="col-3 col-form-label">待收金额</label><!--用户账号表-->
<div class="col-9">
<input type="text" class="form-control" id="AccounSumDueIn" name="AccounSumDueIn" autocomplete="off" disabled/>
</div>
</div>
<div class="form-row col-12 col-xl-6 mt-2">
<label for="Finallylogin" class="col-3 col-form-label">待还金额</label><!--用户账号表-->
<div class="col-9">
<input type="text" class="form-control" id="StayRepaySum" name="StayRepaySum" autocomplete="off" disabled/>
</div>
</div>
</div>
</div>
</form>
</div>
<!-- 底部 按钮 取消 确定 -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" onclick="saveStudentInfor()">保存</button>
</div>
</div>
</div>
</div>
</div>
<script src="~/Content/Plugins/jquery-3.2.1.min.js"></script>
<script src="~/Content/Plugins/bootstrap-4.6.0/dist/js/bootstrap.min.js"></script>
<script src="~/Content/Plugins/layui/layui.js"></script>
<script>
//全局变量声明
var tabStudents;//公告 table
var layer, layuiTable;//保存layui模块以便全局使用
var tabStudent,tabStuden;
$(document).ready(function () {
//加载&初始化layui模块
layui.use(['layer', 'table'], function () {
layer = layui.layer;
layuiTable = layui.table;
//渲染表格
tabStudents = layuiTable.render({
elem: '#tabStudents',
data: [],
cols: [[
{ title: 'ID', field: 'UserID', align: 'center' },
{ title: '用户名', field: 'UserName', align: 'center' },
{ title: '邮箱', field: 'Mailbox', align: 'center' },
{ title: '积分', field: 'OlientIntegral', align: 'center' },
{ title: '用户类型', field: 'UserType', align: 'center' },
{ title: '最后登录时间', field: 'Finallylogin', align: 'center' },
{ title: '基本信息', templet: Information, align: 'center' },
{ title: '详细信息', templet: Details, align: 'center' },
{ title: '审核材料', templet: Material, align: 'center' },
{ title: '资金详细', templet: Money, align: 'center' }
]],
page: true,
});
//重载数据表
searchStudent();
渲染表格
tabStudent = layuiTable.render({
elem: '#Tabing',
//url: "/User/User/TypeQuery",
cols: [[
{ title: 'ID', field: 'MaterialTypeID', align: 'center', width: 100 },
{ title: '用户名', field: 'UserName', align: 'center', width: 100 },
{ title: '类型', field: 'typeName', align: 'center', width: 100 },
{ title: '缩略图',templet: setPicture, field: 'Thumbnail', align: 'center', width: 100 },
{ title: '积分', field: 'MaterialIntegral', align: 'center', width: 100 },
{ title: '状态', field: 'MaterialStatu', align: 'center', width: 100 },
{ title: '添加时间', field: 'Materialsubmit', align: 'center', width: 100 },
{ title: '备注', field: 'MaterialRemark', align: 'center', width: 100 },
{ title: '审核备注', field: 'ReviewRemarks', align: 'center', width: 100 },
]],
page: true,
});
///资金详细信息
tabStudent = layuiTable.render({
elem: '#bing',
//url: "/User/User/TypeQuery",
cols: [[
{ title: 'ID', field: 'IncomeExpensesRecordID', align: 'center', width: 100 },
{ title: '用户名', field: 'UserName', align: 'center', width: 100 },
{ title: '类型', field: 'ExpensesType', align: 'center', width: 100 },
{ title: '操作金额/元', field: 'OperationAmount', align: 'center', width: 120 },
{ title: '余额/元', field: 'TotalAssets', align: 'center', width: 100 },
{ title: '收入/元', field: 'RecordIncome', align: 'center', width: 100 },
{ title: '支出/元', field: 'RecordExpend', align: 'center', width: 100 },
{ title: '备注', field: 'RecordRemark', align: 'center', width: 100 },
{ title: '操作时间', field: 'Record', align: 'center', width: 120 },
]],
page: true,
});
});
});
//1.2自定义操作列
function Information(data) {
//用户类型id
var noticeId = data.UserID;
btns = '<button type="button" class="layui-btn layui-btn-xs" onclick=basic(' + noticeId + ')>查看</button>';
return btns;
}
function Details(data) {
//用户类型id
var noticeId = data.UserID;
btns = '<button type="button" class="layui-btn layui-btn-xs" onclick=detailed(' + noticeId + ')>查看</button>';
return btns;
}
function Material(data) {
//用户类型id
var noticeId = data.UserID;
btns = '<button type="button" class="layui-btn layui-btn-xs" onclick=audit(' + noticeId + ')>查看</button>';
return btns;
}
//弹出材料模态框
function audit(UserID) {
$("#modTitles").modal();
layuiTable.reload('Tabing', {
url: "/User/User/TypeQuery?UserID=" + UserID,
page: {
curr: 1 //重新从第 1 页开始
}
}); //只重载数据
}
function Money(data) {
//用户类型id
var noticeId = data.UserID;
btns = '<button type="button" class="layui-btn layui-btn-xs" onclick=money(' + noticeId + ')>查看</button>';
return btns;
};
//弹出资金模态框
function money(user) {
$("#modles").modal();
layuiTable.reload('bing', {
url: "/User/User/UserFundAudit?user=" + user,
page: {
curr: 1 //重新从第 1 页开始
}
}); //只重载数据
}
//条件查询
function searchStudent() {
var searchText = $("#searchText").val();
tabStudents.reload({
url: "/User/User/UserInformationQuery",
where: {
searchText: searchText
},
page: {
curr: 1 //重新从第 1 页开始
},
});
}
//1.6打开修改模态框
//基本信息查看
function basic(olent) {
$("#studentModal").modal("show");
//1.1 公告数据回填
$.post("/User/User/BasicInformationQuery?olent=" + olent, function (data) {
if (data != null) {
$("#UserName1").val(data.UserName);//用户名
$("#DetailName1").val(data.DetailName);//真实姓名
$("#DetaiSex1").val(data.DetaiSex);//性别
$("#DetaiNativePlace1").val(data.DetaiNativePlace);//籍贯
$("#DetaiIdNumber1").val(data.DetaiIdNumber);//身份证号
$("#DetaiPhone1").val(data.DetaiPhone);//手机号码
$("#DetaiBirthDate1").val(data.Birthday);//出生日期
}
});
};
//详细信息查看
function detailed(user) {
$("#details").modal("show");
//1.1 公告数据回填
$.post("/User/User/UserDetail?user=" + user, function (data) {
if (data != null) {
$("#UserName2").val(data.UserName);//用户名
$("#UserType").val(data.UserTypeName);//用户类型
$("#DetailName2").val(data.DetailName);//真实姓名
$("#DetaiSex2").val(data.DetaiSex);//性别
$("#DetaiBirthDate2").val(data.Birthday);//出生日期
$("#DetaiIdNumber2").val(data.DetaiIdNumber);//身份证号
$("#DetaiPhone2").val(data.DetaiPhone);//手机号
$("#DetaiNativePlace2").val(data.DetaiNativePlace);//籍贯
$("#Mailbox").val(data.Mailbox);//邮箱
$("#Culture").val(data.Culture);//文化程度
$("#MaritalStatus").val(data.MaritalStatus);//婚姻状况
$("#Children").val(data.Children);//子女
$("#SocialSecurity").val(data.SocialSecurity);//社保
$("#DetaiHousing").val(data.DetaiHousing);//住房条件
$("#IfBuyVehicle").val(data.IfBuyVehicle);//是否购车
$("#UserSum").val(data.UserSum);//资产总额
$("#AccountSum").val(data.AccountSum);//可用金额
$("#AccounSumNo").val(data.AccounSumNo);//冻结金额
$("#AccounSumDueIn").val(data.AccounSumDueIn);//待收金额
$("#StayRepaySum").val(data.StayRepaySum);//待还金额
}
});
};
//1.7在表格中显示图片
function setPicture(data) {
var MaterialID = data.MaterialID;
var img = "<img src='/User/User/picture?MaterialID=" + MaterialID + "' alt='Alternate Text' style='width:100px;height:40px;'/>";
return img;
};
</script>
</body>
</html>