150 lines
3.2 KiB
HTML
150 lines
3.2 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<title>学习记录查询</title>
|
|||
|
|
<link rel="stylesheet" href="js/layui-v2.5.6/layui/css/layui.css" media="all">
|
|||
|
|
<style type="text/css">
|
|||
|
|
.layui-btn-primary {
|
|||
|
|
border: 1px solid #C9C9C9;
|
|||
|
|
background-color: #01b9dd !important;
|
|||
|
|
color: white !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.layui-input,
|
|||
|
|
.layui-textarea {
|
|||
|
|
display: block;
|
|||
|
|
width: 10% !important;
|
|||
|
|
padding-left: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.inputdata {
|
|||
|
|
height: 30px;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
function ckksjl() {
|
|||
|
|
layer.open({
|
|||
|
|
type: 2,
|
|||
|
|
area: ['50%', '70%'],
|
|||
|
|
title: "查看",
|
|||
|
|
maxmin: true,
|
|||
|
|
content: 'xxjlcxform.html',
|
|||
|
|
tn: ['关闭'],
|
|||
|
|
yes: function(index) {
|
|||
|
|
layer.close(index);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
function qjcx() {
|
|||
|
|
layer.open({
|
|||
|
|
type: 2,
|
|||
|
|
area: ['50%', '70%'],
|
|||
|
|
title: "区间查询",
|
|||
|
|
maxmin: true,
|
|||
|
|
content: 'xxjlcxqjcx.html',
|
|||
|
|
tn: ['关闭'],
|
|||
|
|
yes: function(index) {
|
|||
|
|
layer.close(index);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</head>
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-sm-12">
|
|||
|
|
<form class="form-inline">
|
|||
|
|
<div style="margin-left: 20px;"class="form-group">
|
|||
|
|
<span>查询时间：</span>
|
|||
|
|
<input type="text" class="laydate-icon form-control layer-date input-sm inputdata" id="test1">
|
|||
|
|
<label>--</label>
|
|||
|
|
<input type="text" class="laydate-icon form-control layer-date input-sm inputdata" id="test2">
|
|||
|
|
<a class="layui-btn " onclick="qjcx()">区间查询</a>
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<table id="demo" class="layui-hide" lay-filter="xk"></table>
|
|||
|
|
|
|||
|
|
<script type="text/html" id="barDemo">
|
|||
|
|
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
|
|||
|
|
</script>
|
|||
|
|
<script src="js/layui-v2.5.6/layui/layui.all.js"></script>
|
|||
|
|
<script>
|
|||
|
|
layui.use('table', function() {
|
|||
|
|
var table = layui.table;
|
|||
|
|
table.render({
|
|||
|
|
elem: '#demo',
|
|||
|
|
url: 'files/xxjlcx.json' //数据接口
|
|||
|
|
,
|
|||
|
|
cellMinWidth: 80 //全局定义常规单元格的最小宽度
|
|||
|
|
,
|
|||
|
|
page: true //开启分页
|
|||
|
|
,
|
|||
|
|
cols: [
|
|||
|
|
[ //表头
|
|||
|
|
{
|
|||
|
|
field: 'xxfx',
|
|||
|
|
title: '学习分类'
|
|||
|
|
}, {
|
|||
|
|
field: 'xxmc',
|
|||
|
|
title: '学习名称'
|
|||
|
|
}, {
|
|||
|
|
field: 'fs',
|
|||
|
|
title: '分数'
|
|||
|
|
}, {
|
|||
|
|
field: 'xxsj',
|
|||
|
|
title: '学习时间'
|
|||
|
|
}, {
|
|||
|
|
field: 'yxxrs',
|
|||
|
|
title: '已学习人数'
|
|||
|
|
}, {
|
|||
|
|
field: 'hgrs',
|
|||
|
|
title: '合格人数'
|
|||
|
|
}, {
|
|||
|
|
field: 'wxxrs',
|
|||
|
|
title: '未学习人数'
|
|||
|
|
}, {
|
|||
|
|
fixed: 'right',
|
|||
|
|
title: '查看',
|
|||
|
|
width: 165,
|
|||
|
|
align: 'center',
|
|||
|
|
toolbar: '#barDemo'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
]
|
|||
|
|
});
|
|||
|
|
//监听行工具事件
|
|||
|
|
table.on('tool(xk)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
|
|||
|
|
var data = obj.data //获得当前行数据
|
|||
|
|
,
|
|||
|
|
layEvent = obj.event; //获得 lay-event 对应的值
|
|||
|
|
if (layEvent === 'detail') {
|
|||
|
|
ckksjl();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
layui.use('laydate', function() {
|
|||
|
|
var laydate = layui.laydate;
|
|||
|
|
|
|||
|
|
//执行一个laydate实例
|
|||
|
|
laydate.render({
|
|||
|
|
elem: '#test1' //指定元素
|
|||
|
|
});
|
|||
|
|
laydate.render({
|
|||
|
|
elem: '#test2' //指定元素
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|