实战Flask+BootstrapTable后端传javascript脚本给前端实现多行编辑(ajax方式)




from flask import Flask, render_template, request, jsonify
 
app = Flask(__name__)
 
@app.route('/')
def index():
    return render_template('index.html')
 
@app.route('/get_data', methods=['GET'])
def get_data():
    # 假设这是从数据库获取的数据
    data = [
        {'id': 1, 'name': 'Alice', 'age': 25},
        {'id': 2, 'name': 'Bob', 'age': 30},
        # ...
    ]
    return jsonify(rows=data)
 
@app.route('/update_data', methods=['POST'])
def update_data():
    # 获取前端发送的数据并进行更新操作
    # 注意：这里需要对数据进行校验和错误处理
    data = request.json
    # 更新数据库中的数据
    # ...
    return jsonify(success=True), 200
 
if __name__ == '__main__':
    app.run(debug=True)

前端的 index.html 需要包含 Bootstrap Table 的相关脚本和样式，并且需要一个用于编辑的模态框。以下是一个简化的 index.html 示例：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap Table Example</title>
    <!-- 引入 Bootstrap 和 Bootstrap Table 的 CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css">
</head>
<body>
    <div class="container">
        <table id="table"
               data-toggle="table"
               data-url="/get_data"
               data-editable-url="/update_data"
               data-editable-submit="user">
            <!-- 定义表格列 -->
            <thead>
                <tr>
                    <th data-field="id" data-editable="false">ID</th>
                    <th data-field="name" data-editable="true">Name</th>
                    <th data-field="age" data-editable="true">Age</th>
                </tr>
            </thead>
        </table>
    </div>
 
    <!-- 引入 jQuery, Popper 和 Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://

实战Flask+BootstrapTable后端传javascript脚本给前端实现多行编辑(ajax方式)

评论已关闭

推荐阅读