Python: редактируемая таблица с Flask и Jinja - PullRequest
Новая
       46

Python: редактируемая таблица с Flask и Jinja

0 голосов
/ 30 марта 2020

Я работаю на Flask веб-сервере. Каков наилучший способ прочитать таблицу из моей базы данных SQL, отобразить ее для редактирования в веб-браузере пользователей через HTML и после того, как пользователь отправит запрос, получить изменения и записать их обратно в базу данных sql?

CRUD в базе данных - самая легкая вещь. Я также могу отображать таблицу в браузере с помощью Jinja, но без возможности редактирования. Но я абсолютно не знаю, нужно ли отображать данные таким образом, чтобы пользователь мог редактировать ячейки или удалять и добавлять строки. Я также не знаю, как отправить таблицу обратно на Flask.

Я лично считаю, что это распространенная проблема, но я не нашел никаких рабочих решений. Так я могу этого достичь?

Ответы [ 2 ]

1 голос
/ 30 марта 2020

Первое попадание, которое я получил для редактируемой сетки: https://www.npmjs.com/package/editable-grid

Примеры на https://www.npmjs.com/package/editable-grid#view -demos-with-creation-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, чтобы получить библиотеку, вы можете использовать автономные версии.

  1. http://skinnybrit51.com/editable-grid/dist/editable_grid.min.js
  2. http://skinnybrit51.com/editable-grid/dist/editable_grid.min.css

Требуются оба файла js и css.

0 голосов
/ 30 марта 2020

Предположим, у вас есть модель: 

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():
    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>

и route.py будет: 

@app.route("/update", methods=["POST"])
def update():
    updatedname = request.form.get("updatedname")
    beforename = request.form.get("beforename")
    student = Student.query.filter_by(name=updatedname).first()
    student.name = updatedname
    db.session.commit()
    return redirect("/")
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...