純前端頁面的週報

時間 2019-11-09

標籤前端頁面週報简体版

原文原文鏈接

前言背景

領導的需求是隨機的，週報的格式是也是多變的，本身抽時間拼拼湊湊一個本身填寫的html模板，而後生成excel表格css

由於不是前端人員，因此頁面的內容也是網上搜索的現成的框架來完成，可能會有不少不足的地方，若有發現bug的地方，能夠留言提醒。html

功能介紹

由於本人公司是作互聯網遊戲，因此週報的格式也是和業務相關前端

填寫數據能夠點擊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>

1. H5商城，純前端靜態頁面
2. 前端頁面javascript生命週期
3. 前端頁面
4. 一週的前端面試
5. E037-前端頁面報錯ERR_CONTENT_LENGTH_MISMATCH
6. 前端週報第 15 期
7. 前端週報第 14 期
8. web前端—工做週報
9. 20181223 前端開發週報
10. 前端週報第 16 期
更多相關文章...
• XSL-FO 頁面 - XSL-FO 教程
• jQuery Mobile 頁面 - jQuery Mobile 教程
• 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
• 使用Rxjava計算圓周率

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。