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

昨天晚上加班，好累好累，今天实现了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},function(data){
if(data){
if(!data){
$("#p_danger").text("提示信息：修改成功");
}
}
});
}
};

昨天使用的get方法传参，遇到了数据超长的问题，使用req.param()框架提示使用其他的方法，原因是express4.0在文档中说就停用req.param()方法。最后使用了req.body获取参数的方法。
删除时的动态显示效果使用remove方法实现。$('#tb_zzManager').bootstrapTable('remove', {
field: 'id',
values: [row.id]
});
修改时的动态显示效果使用官网上的一个示例js实现，在页面引用：

<link rel="stylesheet" href="//rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css">

        <script src="/javascripts/bootstrap-table-editable.js"></script>

        <script src="/javascripts/bootstrap-editable.js"></script>

后台index.js处理：

router.route('/zzOperate')
.post(function(req,res){
console.log('进入了资质管理处理方法,opr='+req.body.oprname+req.body.oprdetail);
var stropr = req.body.opr;
var id = req.body.oprid;
var name=req.body.oprname;
var zzdetail=req.body.oprdetail;
if(stropr==='del')
{
user1dao.delZZInfoByID(id,function(result){
if(result){
res.send('删除失败');
}else{
res.send('删除成功');
}
});
}else if(stropr==='sav')
{
user1dao.savZZInfoByID(id,name,zzdetail,function(result){
if(result){
res.send('保存失败');
}else{
res.send('保存成功');
}
});
}else if(stropr==='ins')
{
user1dao.addZZInfoByID(name,zzdetail,function(result){
if(result){
res.send('新增失败');
}
});
}
});


这里user1dao调用方法的参数比较多，我应该定义一个zzManagerInfo对象来进行传参。嗯~明天实现吧，还得看看js对象的实现方法...下面看新增的实现方法:
在zzManager.html增加几个控件和验证方法:

<div class="panel-body">
<label class="col-sm-1 control-label">资质名称</label>
<div class="col-sm-2">
<input name="z_name" type="text" class="form-control bk-margin-bottom-10" placeholder="请输入资质名称" id="z_name"/>
</div>
<label class="col-sm-1 control-label">详细信息</label>
<div class="col-sm-6">
<input name="z_detail" type="text" class="form-control bk-margin-bottom-10" placeholder="请输入详细信息" id="z_detail"/>
</div>
<div class="col-sm-1 text-right">
<input type="button" id="btnAdd" class="btn btn-primary btn-block btn-lg" value="增加" >
</div>
</div>
<div class="panel-body">
<div class="cel-sm-5">
<p id="p_danger" class="text-danger bg-warning text-center"></p>
</div>
</div>

<script>

$("#btnAdd").click(function(){
if($("#z_name").val()==''){
$("#p_danger").text("提示信息：内容不能为空");
}else{
$.post('/zzOperate',{opr:'ins',oprname:$("#z_name").val(),oprdetail:$("#z_detail").val()},function(data){
if(!data){
$('#tb_zzManager').bootstrapTable('refresh');
$("#p_danger").text("提示信息：新增成功");
}
});
}
});
</script>

最终效果如图：



虽然实现效果很满意，但是加载的js文件过多，页面加载的比较慢，不知道在移动端会有多慢...