Dar*_*ath 5 html python database jinja2 flask
我正在开发 Flask Web 服务器。从我的 SQL 数据库读取表、通过 HTML 在用户 Web 浏览器中显示可编辑的表、并在用户提交后获取更改并将其写回 sql 数据库的最佳方法是什么？
数据库上的CRUD是最简单的事情。我还可以使用 Jinja 在浏览器中显示该表，但不可编辑。但我绝对不知道必须以用户可以编辑单元格或删除和添加行的方式显示数据。我也不知道如何将表发送回 Flask。
我个人认为这是一个常见问题，但我没有找到任何可行的解决方案。那么我能实现这个目标吗？
假设你有一个模型：
class Student(db.Model):
name = db.Column(db.String(80), unique=True, nullable=False, primary_key=True)
def __repr__(self):
return "<Name: {}>".format(self.name)
您已经将其存储在数据库中：
@app.route("/", methods=["GET", "POST"])
def home():
students = Student.query.all()
if request.form:
student = Student(name=request.form.get("name"))
db.session.add(student)
db.session.commit()
return render_template("home.html")
HTML 是这样的：
<html>
<body>
<h1>Add Student</h1>
<form method="POST" action="/">
<input type="text" name="name">
<input type="submit" value="Add">
</form>
{% for student in students %}
<p>{{student.name}}</p>
<form method="POST" action="./update">
<input type="hidden" value="{{student.name}}" name="beforename">
<input type="text" value="{{student.name}}" name="updatedname">
<input type="submit" value="Update">
</form>
{% endfor %}
</body>
</html>
和routes.py将是：
@app.route("/update", methods=["POST"])
def update():
updatedname = request.form.get("updatedname")
beforename = request.form.get("beforename")
student = Student.query.filter_by(name=beforename).first()
student.name = updatedname
db.session.commit()
return redirect("/")
小智 1
我对可编辑网格的第一个点击是： https ://www.npmjs.com/package/editable-grid
这些示例位于https://www.npmjs.com/package/editable-grid#view-demos-with-implementation-code。
特别Editable cells是这个例子，我认为你需要的。根据示例的可编辑表的代码如下。为了将数据保存到数据库中，您需要添加一个按钮，单击该按钮即可发送可编辑表的数据。
function (el) {
var grid = new Grid({
el: el,
stateManager: {
isEditable: function (rowId, colId) {
if (colId === 'readOnly') { return false; }
return true;
}
},
columns: [
{ id: 'readOnly', title: 'Title', width: '20%' },
{ id: 'string', title: 'String', width: '20%' },
{ id: 'cost', title: 'Cost', width: '20%', type: 'cost' },
{ id: 'percent', title: 'Percent', width: '20%', type: 'percent' },
{ id: 'date', title: 'Date', width: '20%', type: 'date' }
],
data: [
{ id: 'id-1', readOnly: 'Non editable field', string: 'Hello World', cost: 1000.23, percent: 0.45, date: '2014-03-27' },
{ id: 'id-2', readOnly: 'Non editable field', string: 'Good Morning', percent: 0.45 },
{ id: 'id-3', readOnly: 'Non editable field', cost: 1000.23, percent: 0.45, date: '2014-04-27' }
]
});
grid.render();
grid.on('editable-value-updated', function (/*obj*/) {
});
}
您可以使用grid变量获取单元格的当前值。如果这是不可能的，那么您可以收听类似的事件
grid.on('editable-value-updated', function(params) {});
grid.on('editable-new-row-value-changed', function(newObj, colId) {});
grid.on('editable-new-row', function(newObj) {});
获取数据更改并将其存储在临时对象中。
PS 请注意，您不需要npm install获取该库，您可以使用独立版本。
js 和 css 文件都是必需的。
| 归档时间： |
|
| 查看次数： |
14269 次 |
| 最近记录： |