jQuery ui可排序 - 使用Python/Flask/SQLite保存到数据库

-1

我需要一个拖放效果，只需找到jQuery可排序的最可行和最简单的解决方案，但我想在重新排序后保存位置。使用php/sqlite我可以做到这一点，但由于我使用框架瓶解决方案将不得不在Python中。我来到这个代码在这里搜索jQuery ui可排序 - 使用Python/Flask/SQLite保存到数据库

HTML：

$(function() { 
    var $sortables = $("#sortMe").sortable({ 
     stop: function() { 
      var sortedItems = $sortables.sortable("toArray"); 
     } 
    }); 
});

潘岳：

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)); 
        } 
       }); 
      } 
     }); 
    });

潘岳：

@app.route("/saveorder", methods=['GET', 'POST']) 
def saveorder(): 
    json = request.json 
    print(json) 

    return jsonify(json)

来源

2016-10-27 1123581321

我发现soluction

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>

来源

2016-11-03 13:18:29 1123581321

jQuery ui可排序 - 使用Python/Flask/SQLite保存到数据库

回答

相关问题