前言背景
领导的需求是随机的，周报的格式是也是多变的，自己抽时间拼拼凑凑一个自己填写的html模板，然后生成excel表格
因为不是前端人员，所以页面的内容也是网上搜索的现成的框架来完成，可能会有很多不足的地方，如有发现bug的地方，可以留言提醒。
功能介绍
因为本人公司是做互联网游戏，所以周报的格式也是和业务相关
- 填写数据可以点击save按钮本地存储
- 填写数据可以依据选择类型导出文件到本地
效果图片
代码
调用css和js文件
http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js
http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js
http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.js
http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/locale/bootstrap-table-zh-CN.min.js
http://issues.wenzhixin.net.cn/bootstrap-table/assets/bootstrap-table/src/extensions/editable/bootstrap-table-editable.js
http://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js
http://rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js
http://issues.wenzhixin.net.cn/bootstrap-table/assets/bootstrap-table/src/extensions/export/bootstrap-table-export.js
http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css
http://cdnjs.cloudflare.com/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="http://cdn.bootcss.com/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>
<!-- 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 = myDate.getFullYear();
var myMonth = myDate.getMonth() + 1;
var myDay = myDate.getDate();
var getMonthWeek = function (a, b, c) {
var date = new Date(a, parseInt(b) - 1, c), w = date.getDay(), d = date.getDate();
return Math.ceil((d + 6 - w) / 7
);
};
var myWeek = getMonthWeek(myYear,myMonth,myDay);
document.getElementById("mytitle").innerHTML = myYear + "年" + myMonth + "月" + "第" + myWeek + "周 - 周报";
var $table = $('#table'),
$button_add = $('#button_add'),
$button_remove = $('#button_remove'),
$button_removeAll = $('#button_removeAll'),
$button_save = $('#button_save');
if (localStorage.getItem("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.parse(localStorage.getItem("tbljson"));
}else{
var myjson = JSON.parse(localStorage.getItem("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'},
]
}
},
{
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>
扫一扫
930
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
