如何实现html数据表（从数据库中查询出来的）界面的可编辑,并将修改结果重新存储至数据库

Question

1.使用python操控数据库，将查询出来的数据在html界面中，成功的以表格的形式展示（用的Bootstrap模版）。

2.现在想在网页中每个表的左侧添加一个可编辑的按钮，实现对数据的修改，并保存至数据库中，现在无从下手，请大神指点一下，感激不仅。

Answer 1

1.每行的每一列都有一个隐藏的input,当这一列被点击的时候,input显示出来.
2.input的内容, <input type='text' value='{item.value}' data-item_value='{item.value}' data-item_id='{item.id}' data-item_key='{item.key}' class='auto_commit_after_edit' > 这里解释一下,假如是一个人的话(id=646,name=张三),当这里列为名字的时候,那么input的里面的value='张三' data-item_id=646 data-item_key='name'
3.如果你用的是jquery的话,那么编辑后自动保存

$('.auto_commit_after_edit').on('blur',function(){
    var me = this;
    var url = '/abc/efg';
    var params = {
        'id': $(me).data('item_id'),
        'key':$(me).data('item_key'),
        'value':$(me).val(),
        'old_value':$(me).data('item_value')
    }
    if(params['value'] == params['old_value']){
        console.log('no change ');
        return ;
    }
    
    $('这一列的选择').text(params['value']); // 更新显示数据,也可以success以后更新      
    
    $.ajax(url,params,function(success_data){},function(error_data){});
});

Answer 2

渲染的时候，每条记录有id唯一标识吧？然后通过这个id就可以修改提交更新了

Answer 3

上图是的pyblog博客项目实现的一个文章CRUD功能。实现了文章的增加，删除和修改。

上图是源代码，其中的删除项是用javascript实现的，其中也用到了数据库的每篇文章的Id来做form表单的id。

以此类推，可以更加的灵活点，用js实现所需要的功能。

我的项目是用flask实现的，主要用到了flask-wtf表单插件，flask-sqlalchemy数据库插件。希望这些能对你有所帮助。