【Python WEB】学生请假管理系统 04 — BootstrapTable

在这个问题中，我们需要使用BootstrapTable来显示请假信息。这是一个常见的需求，尤其在学校或企业的IT系统中。

解决方案：

1. 首先，你需要在HTML文件中引入BootstrapTable所需的CSS和JS文件。

<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css">
<script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script>

2. 在HTML文件中创建一个表格，并为BootstrapTable提供一个<thead>和一个<tbody>。

<table id="table"
       data-toggle="table"
       data-search="true"
       data-show-columns="true"
       data-show-refresh="true"
       data-show-toggle="true"
       data-show-fullscreen="true"
       data-pagination="true"
       data-page-list="[10, 25, 50, 100, all]"
       data-click-to-select="true"
       data-toolbar="#toolbar">
    <thead>
        <tr>
            <th data-field="state" data-checkbox="true"></th>
            <th data-field="id">ID</th>
            <th data-field="studentName" data-editable="true">Student Name</th>
            <th data-field="leaveDate" data-editable="true">Leave Date</th>
            <th data-field="returnDate" data-editable="true">Return Date</th>
            <th data-field="reason" data-editable="true">Reason</th>
            <th data-field="status" data-editable="true">Status</th>
        </tr>
    </thead>
</table>

3. 在你的Python Flask后端，你需要提供一个API接口，这个接口会返回请假信息的JSON数据。

from flask import Flask, jsonify
 
app = Flask(__name__)
 
leave_data = [
    {
        'id': 1,
        'studentName': 'John Doe',
        'leaveDate': '2023-04-01',
        'returnDate': '2023-04-05',
        'reason': 'Sick Leave',
        'status': 'Approved'
    },
    # ... 其他学生的请假信息
]
 
@app.route('/leave_data')
def leave_data_api():
    return jsonify(leave_data)
 
if __name__ == '__main__':
    app.run(debug=True)

4. 在前端的JavaScript代码中，你需要使用AJAX调用API接口，并使用BootstrapTable的load方法来加载数据。

$(function() {
    $('#table').bootstrapTable({
        url: '/leave_data',
        method: 'get',
        clickToSelect: true,
        uniqueId: 'id',
        showFullscreen: true,
        showToggle: true,
        showColumns: true,
        pagina