使用nodejs，express，mysql，Bootstrap开发采购招标网站(四）Bootstrap-table实现Ajax新增修改数据

最新推荐文章于 2021-10-15 14:53:42 发布

原创

最新推荐文章于 2021-10-15 14:53:42 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#express #ajax #bootstrap-table form #ejs 采购招标 #nodejs

本文介绍如何在基于NodeJS、Express、MySQL和Bootstrap的采购招标网站中，利用Ajax和Bootstrap-table实现数据的动态新增、修改功能。在没有jQuery基础的情况下，作者逐步克服困难，通过引用相关js库和编写后台处理代码实现了这一目标。然而，由于引入的js文件较多，导致页面加载速度变慢，可能影响移动端性能。

昨天晚上加班，好累好累，今天实现了bootstrap-table修改和新增，因为根本没有jquery的基础，所以进度缓慢。

在上一篇的基础上，修改zzManager.js实现修改

window.operateEvents = {
    'click .remove': function (e, value, row, index) {
        $('#tb_zzManager').bootstrapTable('remove', {
            field: 'id',
            values: [row.id]
        });
        $.post('/zzOperate',{opr:'del',oprid:row.id,oprname:row.zzName,oprdetail:row.zzDetail},function(data){
            if(data){
                $.post('/zzOperate',{opr:'ins',oprname:$("#z_name").val(),oprdetail:$("#z_detail").val()},function(data){
                    if(!data){
                        $("#p_danger").text("提示信息：删除成功");
                    }
                });
            }
        });
    },
    'click .save': function (e, value, row, index) {
        $.post('/zzOperate',{opr:'sav',oprid:row.id,oprname:row.zzName,oprdetail:row.zzDetail},functi