Add新增 · COSCIA 开发手册

### 新增弹窗操作 **View模版HTML：** 1、新增按钮打开弹窗操作 ~~~ <ul class="breadcrumbr"> <li> <a class="btn btn-crm" id="myModalLabel" data-target="#rebate_add_modal" data-toggle="modal">新增</a> </li> </ul> ~~~ 2、弹出 Form 表单注意 Form 参数统一，URL等 ~~~ <form class="form-horizontal" id="add_rebate" action="{:U(CRM.'/Giftcard/Rebate/save')}" role="form"> ~~~ 完整的 Form 表单 ~~~  <div class="modal fade" id="rebate_add_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <form class="form-horizontal" id="add_rebate" action="{:U(CRM.'/Giftcard/Rebate/save')}" role="form"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">新增</h4> </div> <div class="modal-body"> <div class="col-sm-12"> <div class="form-group"> <label class="col-sm-3 control-label">姓名：</label> <div class="col-sm-7"> <input class="form-control" placeholder="姓名" name="uname"> </div> </div> </div> </div> <div class="modal-footer"> <button type="submit" class="btn btn-primary" >保存</button> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> </div> </form> </div> </div> </div> ~~~ **Javascript：** 3、表单验证和Ajax操作表单验证使用的是 bootstrapValidator 插件并且基于插件封装了 ajax_result 函数进行 Ajax 操作，不需要每一个新增都单独写Ajax操作 ~~~ $('#add_rebate').bootstrapValidator({ message: '无效', feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { name: { validators: { notEmpty: { message: '名字不能为空' } } }, } }) // 调用提交 Ajax 操作 .on('success.form.bv', function(e) { ajax_result(e); }); ~~~ **后台 Controller 控制器 PHP：** 4、后台接收参数操作 (1) 接收 Form Ajax 提交过来的参数 I('param.') (2) 将接收的参数写入相关的操作数据库，并返回操作后的状态 $result (3) 判断返回的状态，返回 JSON 格式的数据，必须统一标准，要不JS没法判断 ~~~ // 保存 public function save() { $param = I('param.'); $data = array( 'rebate_greater' => $param['rebate_more'], 'rebate_less' => $param['rebate_more'], 'rebate_percent' => $param['rebate_more'] ); $result = M('member_gift_rebate')->add($data); if($result) { $data = array('success' => true, 'code' => '200', 'msg' => '保存成功'); } else { $data = array('success' => false, 'code' => '400', 'msg' => '保存失败'); } $this->ajaxReturn($data); } ~~~ **注：如果更新成功后，需要跳转到制定的页面，可以在 $result 数组后面加上第四个参数，url，程序就会自动进行判断调整 ** **Javascript数据提示** 5、PHP 返回的数据不需要单独做任何的处理，在前面写到的 ajax_result 函数已经进行了单独的封装，会统一的输出，在开发中是不需要管的，下面是封装的 ajax_result 函数 ~~~ // bootstrapValidator 封装 function ajax_result(e){ // 防止表单提交 e.preventDefault(); // 获取表单实例 var $form = $(e.target); // 获取BootstrapValidator实例 var bv = $form.data('bootstrapValidator'); toastr.options = {"positionClass": "toast-top-center","timeOut": "1000"}; // 使用Ajax提交表单数据 $.post($form.attr('action'), $form.serialize(), function(result) { if(result.code == 200){ $('.modal').modal('hide'); Command: toastr["success"](result.msg) if (result.url) { // 判断是否存在跳转的 URL 参数 2016-12-28 jig update setTimeout(function(){ // alert(result.url); window.location.href = result.url; },1000); // 延迟一秒跳转 } else { window.setTimeout("refreshPage()",1000); // 如果没有跳转的 URL 刷新页面 } }else{ Command: toastr["error"](result.msg) } }, 'json'); } ~~~