使用Layui框架实现数据统计页面，展示日报表和月报表
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' href='https://cdn.staticfile.org/layui/2.5.6/css/layui.css'>
<script src='https://cdn.staticfile.org/layui/2.5.6/layui.js'></script>
</head>
<body>
<div class='layui-container'>
<div class='layui-row'>
<div class='layui-col-md12'>
<div class='layui-form-item'>
<label class='layui-form-label'>选择日期</label>
<div class='layui-input-inline'>
<input type='text' id='date' class='layui-input' placeholder='请选择日期' autocomplete='off'>
</div>
</div>
</div>
</div>
<div class='layui-row'>
<div class='layui-col-md6'>
<table id='dailyTable' lay-filter='dailyTable'></table>
</div>
<div class='layui-col-md6'>
<table id='monthlyTable' lay-filter='monthlyTable'></table>
</div>
</div>
</div>
<script>
layui.use(['table', 'laydate'], function(){
var table = layui.table;
var laydate = layui.laydate;
// 初始化日期选择器
laydate.render({
elem: '#date',
type: 'date',
value: new Date(),
done: function(value, date){
loadTables(value);
}
});
// 加载表格数据
function loadTables(date) {
// 加载日报表
table.render({
elem: '#dailyTable',
url: 'yddata.json',
where: { date: date },
cols: [[
{field: 'institution', title: '机构'},
{field: 'submitCount', title: '提交次数'}
]]
});
// 加载月报表
table.render({
elem: '#monthlyTable',
url: 'yddata.json',
where: { date: date },
cols: [[
{field: 'institution', title: '机构'},
{field: 'appearCount', title: '出现次数'}
]]
});
}
// 默认加载今天的数据
loadTables(laydate.now());
});
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/qnPk 著作权归作者所有。请勿转载和采集!