Python:带有Flask和Jinja的可编辑表 [英] Python: Editable Table with Flask and Jinja

问题描述

我正在使用Flask网络服务器.从我的SQL数据库读取表，通过HTML在用户Web浏览器中将其显示为可编辑，以及在用户提交更改后将其写回sql数据库的最佳方法是什么?

I'm working on a Flask web server. What is the best way to read a table from my SQL database, display it editable in the users webbrowser via HTML and after the user submits get the changes and write it back to the sql database?

数据库上的CRUD是最简单的事情.我也可以使用Jinja在浏览器中显示表格，但该表格不可编辑.但是我绝对不知道必须以用户可以编辑单元格，删除或添加行的方式显示数据.我也不知道如何将桌子发回Flask.

CRUD on the database is the easiest thing. I can also display the table in the browser with Jinja, but non-editable. But I absolutly have no idea have to display the data in such a way that the user can edit cells, or delete and add rows. I also don't know how I send the table back to Flask.

我个人认为这是一个普遍的问题，但是我没有找到任何可行的解决方案. 那我能做到这一点吗?

I personally think that this is a common problem, but I didn't found any working solutions. So can I achieve this?

推荐答案

我对可编辑网格的第一印象是: https://www.npmjs.com/package/editable-grid

The first hit that I got for an editable grid is: https://www.npmjs.com/package/editable-grid

示例位于 https://www .npmjs.com/package/editable-grid#view-demos-with-implementation-code .

特别是示例Editable cells是我认为您需要的示例. 根据该示例的可编辑表的代码如下.为了使数据持久保存到数据库中，您需要添加一个按钮，单击该按钮即可发送可编辑表的数据.

In particular the example Editable cells is the one, that I think you need. The code for an editable table according to the example would be as follows. In order to have the data persist to database you would need to add a button that on click, sends the data of the editable table.

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变量来获取单元格的当前值.如果那不可能，那么您可以听类似

You can likely get the current values of the cells by using the grid variables. If that is not possible, then you can listen to the events like

grid.on('editable-value-updated', function(params) {});
grid.on('editable-new-row-value-changed', function(newObj, colId) {});
grid.on('editable-new-row', function(newObj) {});

获取数据更改并将其存储在临时对象中.

to get the changes to data and store those in a temporary object.

P.S.请注意，您无需执行npm install即可获取库，可以使用独立版本.

P.S. Note that you don't need to do npm install to get the library, you can use the standalone versions.

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

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

js和css文件都是必需的.

Both the js and css files are required.

这篇关于Python:带有Flask和Jinja的可编辑表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！