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'); } ~~~