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) 数据操作的的提示，是不需要单独开发的，在封装的代码里面写好了。