<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../static/css/layui.css">
<link rel="stylesheet" href="../static/css/layer.css">
<link rel="stylesheet" href="../static/css/laydate.css">
</head>
<body>
<!--搜索条件开始-->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;" >
<legend>查询条件</legend>
</fieldset>
<form class="layui-form" action="" method="post" id="formTest">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">学号</label>
<div class="layui-input-inline">
<input type="text" name="学号" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">姓名</label>
<div class="layui-input-inline">
<input type="text" name="姓名" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-inline">
<input type="text" name="邮箱" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">单选框</label>
<div class="layui-input-block">
<input type="radio" name="性别" value="男" title="男" checked="">
<input type="radio" name="性别" value="女" title="女">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">开始时间</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" name="start_time" readonly="readonly" id="start_time" placeholder="yyyy-MM-dd">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">结束时间</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" name="endtime" readonly="readonly" id="endtime" placeholder="yyyy-MM-dd">
</div>
</div>
</div>
<div class="layui-form-item" style="text-align: center;">
<div class="layui-input-block">
<button type="submit" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-search" id="doSubmit" lay-submit="" lay-filter="demo1">查询</button>
<button type="reset" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh" id="doReset">重置</button>
</div>
</div>
</form>
<!--搜索条件结束-->
<!--数据表格开始-->
<div type="text/html" style="display: none" id="userToolBar">
<a type="submit" class="layui-btn layui-btn-xs" lay-filter="add" lay-event="add">添加</a>
<a type="submit" class="layui-btn layui-btn-xs" id="batch_del" lay-filter="batch_del" lay-event="batch_del">批量删除</a>
</div>
<div id="userBar" style="display: none;">
<a class="layui-btn layui-btn-xs" lay-event="edit" id="modify">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</div>
<table class="'layui-hide" id="userTable" lay-filter="userTable"></table>
<!--数据表格结束-->
<!--添加和修改弹出层开始-->
<div style="display:none;padding: 20px" id="addnewdata">
<form class="layui-form" action="" method="post" lay-filter="dataFrm" id="dataFrm">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">学号</label>
<div class="layui-input-inline">
<input type="text" name="学号" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">姓名</label>
<div class="layui-input-inline">
<input type="text" name="姓名" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-inline">
<input type="text" name="邮箱" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">城市</label>
<div class="layui-input-inline">
<input type="text" name="城市" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">性别</label>
<div class="layui-input-block">
<input type="radio" name="性别" value="男" title="男" checked="">
<input type="radio" name="性别" value="女" title="女">
</div>
</div>
<div class="layui-form-item" style="text-align: center;">
<div class="layui-input-block">
<button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release" id="dosubmit1" lay-submit="" lay-filter="dosubmit1">提交</button>
<button type="reset" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh" id="doclose" lay-submit="" lay-filter="doclose" lay-event="doclose">重置</button>
</div>
</div>
</form>
</div>
<!--添加和修改弹出层结束-->
<script src="../static/css/layui.js"></script>
<script type="text/javascript">
layui.use(["jquery",'form','element','layer','table','laydate'],function() {
let $ = layui.jquery;
let form = layui.form;
let element = layui.element;
let layer = layui.layer;
let table = layui.table;
let laydate = layui.laydate;
laydate.render({
elem: '#start_time',
type: 'datetime',
calendar: 'True'
});
laydate.render({
elem: '#endtime',
type: 'datetime',
calendar: 'True'
});
//渲染数据表格
var tableIns = table.render({
elem: '#userTable', //渲染的目标对象
data: [],
initSort: {
field: '学号',
type: 'asc'
},
title: '用户数据登录表',//数据导出的标题
page: true,//是否启动分页
toolbar: "#userToolBar",//表格的工具条
defaultToolbar: ['filter', 'exports', 'print'],
hight: "full-300",
down: function (res, curr, count) {
alert(res);//后台url返回的json串
alert(curr);//当前页
alert(count);//数据总条数
},
//totalRow:true,//开启合并行
limit: 30,//设置每页显示的条数,默认为10
//limits:[20,40,60,80],
loading: true,
//text: {
// none: "未查询到数据" //默认无数据
//},
cols: [
[{title: '数据表格增删改查', align:'center', colspan: 15}],
[ //列表数据
{type: 'checkbox', fixed: 'left'},
{field: '学号', title: '学号', sort: true}, //field设定字段名,title设定标题名称,sort排页面已有数据
{field: '姓名', title: '姓名', edit: true, align: 'center'},//edit可编辑
{field: '邮箱', title: '邮箱', align: 'center', edit: 'text', width: 300},
{field: '性别', title: '性别', align: 'center', edit: 'text', sort: true},
{field: '城市', title: '城市', align: 'center'},
{fixed: 'right', title: '操作', align: 'center', toolbar: "#userBar"}
]]
});
})
</script>
</body>