H5W3
当前位置:H5W3 > 其他技术问题 > 正文

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

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

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

回答:

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

回答:

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

回答:

图片描述

上图是的pyblog博客项目实现的一个文章CRUD功能。实现了文章的增加,删除和修改。
图片描述
上图是源代码,其中的删除项是用javascript实现的,其中也用到了数据库的每篇文章的Id来做form表单的id。

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

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

本文地址:H5W3 » 如何实现html数据表(从数据库中查询出来的)界面的可编辑,并将修改结果重新存储至数据库

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址