### 如何在 Flask 中创建可编辑的数据表格 #### 使用 Layui 和 Flask 构建 RESTful API 的学员信息管理案例 为了实现在 Flask 应用程序中创建可编辑的数据表格，可以采用 Layui 表格组件作为前端展示工具，并通过 RESTful API 进行前后端交互。此过程涉及到多个知识点和技术栈的配合使用。 #### 数据库模型定义与初始化 首先，在应用启动前需确保数据库结构已就绪。可以通过 SQLAlchemy ORM 来操作 SQLite 或其他类型的数据库： ```python from flask_sqlalchemy import SQLAlchemy app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///students.db' db = SQLAlchemy(app) class Student(db.Model): id = db.Column(db.Integer, primary_key=True) name = db.Column(db.String(80), nullable=False) age = db.Column(db.Integer, nullable=False) # 初始化数据库 with app.app_context(): db.drop_all() db.create_all() # 清除旧表并新建表结构[^2] ``` #### 创建 RESTful 接口用于增删改查学生记录 接着要为 `Student` 模型提供 CRUD (Create Read Update Delete) 功能的服务接口。这些服务将被前端调用来更新显示的内容。 ```python @app.route('/api/students', methods=['GET']) def get_students(): students = Student.query.all() return jsonify([student.to_dict() for student in students]) @app.route('/api/student/<int:id>', methods=['PUT']) def update_student(id): data = request.get_json() student = Student.query.get_or_404(id) student.name = data.get('name') student.age = data.get('age') db.session.commit() return '', 204 ``` 上述代码片段展示了获取所有学生的 GET 请求处理逻辑以及 PUT 方法来接收来自客户端提交的学生资料变更请求[^1]。 #### 配置 Layui Table 组件支持在线编辑功能 最后一步是在 HTML 页面上配置好 Layui 的 table 插件，使其能够发送 AJAX 请求到刚才设置好的 API 路径完成数据同步工作。下面是一个简单的例子说明如何开启单元格级别的即时编辑特性： ```html <table class="layui-hide" id="demo" lay-filter="test"></table> <script> layui.use(['table'], function(){ var table = layui.table; // 渲染表格实例 table.render({ elem: '#demo', url:'/api/students' ,// 获取数据列表地址 cols:[[...]], // 列字段配置省略... done:function(res){ console.log(res); }, cellMinWidth: 80, page:true, limits:[5,7,9], limit:5, toolbar:'#toolbarDemo',// 工具栏选项 defaultToolbar:['filter','exports'], parseData:function(result){return result;} , response:{statusCode:200}, even:false, height:'full-200', skin:'line', text:{ none:'暂无相关数据' } }); // 开启监听事件以捕捉用户的输入行为触发保存动作 table.on('edit(test)',function(obj){ $.ajax({ type:"put", contentType : "application/json;charset=UTF-8", url:`/api/student/${obj.data.id}`, data:JSON.stringify({[obj.field]: obj.value}), success:function(data,status,xhr){ layer.msg(`修改成功`); },error:function(xhr,type,errorThrown){ layer.alert(`${xhr.status}:${xhr.statusText}`); }}); }); }) </script> ``` 这段 JavaScript 代码实现了对学生信息表单内任意位置双击进入编辑模式的功能，并且一旦用户结束编辑就会自动向服务器发起 HTTP PUT 请求尝试保存更改后的值。