纯前端页⾯的周报
前⾔背景
领导的需求是随机的，周报的格式是也是多变的，⾃⼰抽时间拼拼凑凑⼀个⾃⼰填写的html模板，然后⽣成excel表格
因为不是前端⼈员，所以页⾯的内容也是⽹上搜索的现成的框架来完成，可能会有很多不⾜的地⽅，如有发现bug的地⽅，可以留⾔提醒。功能介绍
因为本⼈公司是做互联⽹游戏，所以周报的格式也是和业务相关
填写数据可以点击save按钮本地存储
填写数据可以依据选择类型导出⽂件到本地
效果图⽚
代码
调⽤css和js⽂件
cdn.bootcss/jquery/1.11.1/jquery.min.js
cdn.bootcss/bootstrap/3.3.0/js/bootstrap.min.js
cdnjs.cloudflare/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.js
cdnjs.cloudflare/ajax/libs/bootstrap-table/1.11.0/locale/bootstrap-table-zh-CN.min.js
issues.wenzhixin/bootstrap-table/assets/bootstrap-table/src/extensions/editable/bootstrap-table-editable.js
rawgit/vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js
rawgit/hhurz/tableExport.jquery.plugin/master/tableExport.js
issues.wenzhixin/bootstrap-table/assets/bootstrap-table/src/extensions/export/bootstrap-table-export.js
cdn.bootcss/bootstrap/3.3.0/css/bootstrap.min.css
cdnjs.cloudflare/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.css
前端代码
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title >运维周报填写表</title>
<script src="./js/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<link rel="stylesheet" href="cdn.bootcss/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="./css/bootstrap-table.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="./js/bootstrap-table.min.js"></script>
<script src="./js/bootstrap-table.min.js"></script>
<!-- Latest compiled and minified Locales -->
<script src="./js/bootstrap-table-zh-CN.min.js"></script>
<script src="./js/bootstrap-table-editable.js"></script>
<script src="./js/bootstrap-editable.js"></script>
<!-- export data -->
<script src="./js/bootstrap-table-export.js"></script>
<script src="./js/tableExport.js"></script>
</head>
<body>
<div class="container-fluid">
<h2 id="mytitle">title</h2>
<div class="row-fluid">
<table id="table"
data-toolbar="#toolbar"
data-show-export="true"
data-pagination="true"
data-click-to-select="true"
data-search="true" >
<div id="toolbar">
<button id="button_add" class="btn btn-default">Add</button>
<button id="button_remove" class="btn btn-default">Remove</button>
<button id="button_save" class="btn btn-default">Save</button>
<button id="button_removeAll" class="btn btn-default">RemoveAll</button>
</div>
<thead>
<tr>
<th data-field="state" data-pagination="true" data-show-export="true" data-checkbox="true"></th>
<th data-field="id" data-editable="true" data-visible="false">ID</th>
<th data-field="worktype" data-editable="true"></th>
<th data-field="product" data-editable="true"></th>
<th data-field="ver" data-editable="true"></th>
<th data-field="content" data-editable="true"></th>
<th data-field="rate" data-editable="true"></th>
<th data-field="time" data-editable="true"></th>
<th data-field="timetype" data-editable="true"></th>
</tr>
</thead>
</table>
<script>
$(document).ready($(function () {
var myDate = new Date();
var myYear = FullYear();
var myMonth = Month() + 1;
var myDay = Date();
var getMonthWeek = function (a, b, c) {
var date = new Date(a, parseInt(b) - 1, c), w = Day(), d = Date();
il((d + 6 - w) / 7
);
};
var myWeek = getMonthWeek(myYear,myMonth,myDay);
var $table = $('#table'),
$button_add = $('#button_add'),
$button_remove = $('#button_remove'),
$button_removeAll = $('#button_removeAll'),
$button_save = $('#button_save');
if (Item("tbljson") == null){
var data = [
{
'worktype': '1',
'id': '2',
'product': '3',
'ver': '1',
'content': '我的周报',
'rate': '100%',
'time': '1',
'timetype': '1'
}
];
localStorage.setItem("tbljson", JSON.stringify(data));
var myjson = JSON.Item("tbljson"));                    }else{
var myjson = JSON.Item("tbljson"));                    }
$('#toolbar').find('select').change(function () {
$table.bootstrapTable('destroy').bootstrapTable({
exportDataType: $(this).val()
});
});
$table.bootstrapTable({
data: myjson,
idField: 'id',
columns: [{
field: 'state',
title: ''
},
{
field: 'id',
title: 'id'
},
{
field: 'worktype',
title: '⼯作类型',
editable: {
type: 'select',
name: '⼯作类型',
sortable: true,
source: [
{value: 1, text: '⽇常⼯作'},
{value: 2, text: '内部⼯作'},
{value: 3, text: '维护⼯作'}
]
}
},
{
field: 'product',
title: '项⽬名称',
editable: {
type: 'select',
name: '',
sortable: true,
source: [
{value: 1 , text: 'project01'},
{value: 2 , text: 'project02'},
{value: 3 , text: 'project03'},
{value: 4 , text: 'project04'},
{value: 5 , text: 'project05'},
]
]
}
},
{
field: 'ver',
title: '项⽬版本',
editable: {
type: 'select',
name: '版本',
sortable: true,
source: [
{value: 1 , text: 'version01'},
{value: 2 , text: 'version02'},
{value: 3 , text: 'version03'},
{value: 4 , text: 'version04'},
{value: 5 , text: 'version05'},
]
}
},bootstrap项目
{
field: 'content',
title: '细节描述'
},
{
field: 'rate',
title: '⼯作进度(单位:%)'
},
{
field: 'time',
title: '耗费时间(单位:⼩时)'
},
{
field: 'timetype',
title: '时间类型',
editable: {
type: 'select',
name: '产品',
sortable: true,
source: [
{value: 1, text: '上班时间'},
{value: 2, text: '下班时间'},
]
}
}
]
});
$button_add.click(function () {
var randomId = 100 + ~~(Math.random() * 100);
$table.bootstrapTable('insertRow', {
index: 1,
row: {
'worktype': '1',
'id': randomId,
'product': '1',
'ver': '1',
'content': '⼲~⼲~⼲',
'rate': '100%',
'time': '1',
'timetype': '1'
}
});
});
$button_remove.click(function () {
var ids = $.map($table.bootstrapTable('getSelections'), function (row) {
return row.id;
});
$table.bootstrapTable('remove', {
field: 'id',
values: ids
});
});
$button_save.click(function () {
localStorage.setItem("tbljson", JSON.stringify($table.bootstrapTable('getData')));                    });
$button_removeAll.click(function () {
$table.bootstrapTable('removeAll');
});
}));
</script>
</div>
</div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。