Edit編輯 · COSCIA 開發手冊

### 編輯彈窗操作 **View模版HTML：** 1、點擊編輯按鈕注意，一定要傳參id，url，以及彈窗 ~~~ <a class="delivery-view" id="{$vo.id}" url="{:U(SET.'/User/one')}" onclick="editUserInfo(this)">編輯</a> ~~~ **Ajax 請求后臺數據** 2、彈窗編輯窗口，首先會基于傳參的 onclick 事件訪問 Javascript 函數 editRebateInfo，通過 Ajax 操作請求后臺的數據 (1) 獲取參數 ID，以及訪問的 URL (2) Ajax 訪問后臺 (3) 將后臺訪問的 JSON 數據賦值在頁面的表單上，注意一定要賦值操作的 ID 在Form 表單中的一個隱藏 Input 參數 ~~~ // 編輯增值服務單類型 function editRebateInfo(e) { var id = $(e).attr("id"); var url = $(e).attr('url'); $.post(url, {id: id}, function(obj){ $('#rebate_id').val(obj.id); $('#rebate_more').val(obj.rebate_greater); $('#rebate_less').val(obj.rebate_sga); $('#rebate_percent').val(obj.return_rebate); }); $('#rebate_edit_modal').modal('show'); } ~~~ 3、PHP后臺數據查詢 ~~~ // 獲取用戶信息 public function one() { $id = I('post.id'); $result = M('user')->find($id); $this->ajaxReturn($result); } ~~~ **View彈窗頁面HTML：** 4、彈窗編輯的 Form 表單信息， (1) 注意 Action 參數 ~~~ <form class="form-horizontal" id="edit_user" action="{:U(SET.'/User/update')}" role="form"> ~~~ (2) 注意 Input 中的參數有 ID 名稱 ~~~ <input class="form-control" id="user_name" value="超級用戶" name="user_name"> ~~~ (3) 注意在保存按鈕前面增加一個 hidden 的 input 字段 ~~~ <input type="hidden" id="user_id" name="user_id" /> ~~~ 完整的代碼： ~~~  <div class="modal fade" id="user_edit_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <form class="form-horizontal" id="edit_user" action="{:U(SET.'/User/update')}" 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" style="overflow:hidden;"> <div class="col-sm-6"> <div class="form-group"> <label class="col-sm-4 control-label">姓名：</label> <div class="col-sm-7"> <input class="form-control" id="user_name" value="超級用戶" name="user_name"> </div> </div> </div> </div> <div class="modal-footer"> <input type="hidden" id="user_id" name="user_id" /> <button type="submit" class="btn btn-primary">保存</button> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> </div> </form> </div> </div> </div> ~~~ **Ajax保存編輯信息：** 5、用 Ajax 方式更新 Form 表單數據，類似于新增數據保存 (1) 用驗證驗證表單的數據，發起 Ajax 請求 ~~~ //系統 / 用戶管理 / 編輯驗證 $('#edit_user').bootstrapValidator({ message: '無效', feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { user_name: { validators: { notEmpty: { message: '用戶名不能為空' // 驗證用戶名是否為空 } } }, } }) .on('success.form.bv', function(e) { ajax_result(e); // Ajax 數據調用方法 }); ~~~ (2) 后臺 PHP 更新數據庫操作，獲取參數，操作數據庫，返回 JSON 格式的數據 ~~~ // 更新用戶信息 public function update() { $data = array(); $data['id'] = I('post.user_id'); // 用戶ID $data['username'] = I('post.user_account'); // 登錄名 $res = M('user')->save($data); if(is_numeric($res)) { recordLog(1,'修改系統用戶'.$name); $result = array("success"=>true, 'code'=>200, 'msg'=>'更新成功！'); } else { $result = array("success"=>false, 'code'=>400, 'msg'=>'更新失敗！'); } $this->ajaxReturn($result); } ~~~ **注：如果更新成功后，需要跳轉到制定的頁面，可以在 $result 數組后面加上第四個參數，url，程序就會自動進行判斷調整 ** (3) 數據操作的的提示，是不需要單獨開發的，在封裝的代碼里面寫好了。