jQuery ui可排序-使用Python/Flask/SQLite保存到数据库
jQuery ui可排序-使用Python/Flask/SQLite保存到数据库
提问于 2016-10-28 05:46:06
我需要一个拖放效果，只是发现jQuery可排序的最可行和最容易的解决方案，但我想保存后重新排序的位置。使用php/sqlite我可以做到这一点，但由于我使用的是框架flask，因此解决方案必须使用python。我在这里开始了代码搜索
html：
$(function() {
var $sortables = $("#sortMe").sortable({
stop: function() {
var sortedItems = $sortables.sortable("toArray");
}
});
});py：
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///db.sqlite'
class Sortable(db.Model):
__tablename__ = 'sortables'
id = db.Column(db.Integer, primary_key=True, autoincrement=True)
data = db.Column(db.String)
def __init__(self, data):
self.data = data
@app.route("/saveorder", methods=['GET', 'POST'])
def save_order():
if request.method == "POST":编辑。
现在，我得到了这个
html：
$(function() {
$('#sortMe').sortable({
update: function(event, ui) {
var postData = $(this).sortable('serialize');
console.log(postData);
$.ajax({
url: '/saveorder',
type: 'POST',
contentType: 'application/json',
dataType: 'json',
data: JSON.stringify({list: postData}),
success: function (ret) {
alert('JSON posted: ' + JSON.stringify(ret));
}
});
}
});
});py：
@app.route("/saveorder", methods=['GET', 'POST'])
def saveorder():
json = request.json
print(json)
return jsonify(json)回答 1
Stack Overflow用户
发布于 2016-11-03 21:18:29
我找到了解决方案
https://github.com/h01000110/sortable-flask
app.py
from flask import Flask, render_template, request, jsonify
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///db.sqlite'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = True
db = SQLAlchemy(app)
class Sortable(db.Model):
__tablename__ = 'sortables'
id = db.Column(db.Integer, primary_key=True, autoincrement=True)
data = db.Column(db.String)
def __init__(self, data):
self.data = data
db.create_all()
@app.route('/')
def index():
sort = Sortable.query.filter_by(id=1).first()
ordem = str(sort.data)
return render_template('index.html', sort=sort, ordem=ordem)
@app.route('/post', methods=['GET', 'POST'])
def post():
json = request.json
x = json.replace('item[]=', ',')
y = x.replace('&,', '')
final = y.replace(',', '')
sort = Sortable.query.filter_by(id=1).first()
sort.data = final
db.session.commit()
return jsonify(final)
if __name__ == '__main__':
app.run(debug=True)index.html
<html>
<head>
<title>Flask example</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function(){
$('#sortMe').sortable({
update: function(event, ui) {
var postData = $(this).sortable('serialize');
$.ajax({
type: 'POST',
contentType: 'application/json',
data: JSON.stringify(postData),
dataType: 'json',
url: '/post'
});
}
});
});
</script>
</head>
<body>
<ul id="sortMe">
{% for i in ordem %}
<li id="item_{{ i }}">item {{ i }}</li>
{% endfor %}
</ul>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40294705
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号