如何使用bootstrap实现员工模态对话框的编辑
1、在页面中增加bootstrap模态对话框：<!-- 员工编辑--> <div class="modal fade" id="empUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">员工修改</h4> </div> <div class="modal-body"> <form class="form-horizontal"> <div class="form-group"> <label for="empName_add_input" class="col-sm-2 control-label">empName</label> <div class="col-sm-10"> <input type="text" name="empName" class="form-control" id="empName_update_input" placeholder="empName"> <span id="" class="help-block"></span> </div> </div> <div class="form-group"> <label for="email_add_input" class="col-sm-2 control-label">empEmail</label> <div class="col-sm-10"> <input type="text" name="email" class="form-control" id="email_update_input" placeholder="email@126.com"> <span id="" class="help-block"></span> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">gender</label> <div class="col-sm-10"> <label class="radio-inline"> <input type="radio" name="gender" id="gender1_update_input" checked="checked" value="M">男 </label> <label class="radio-inline"> <input type="radio" name="gender" id="gender2_update_input" value="F">女 </label> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">deptName</label> <div class="col-sm-4"> <select class="form-control" name="dId" id="dept_select"> </select> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary" id="emp_update_btn">更新</button> </div> </div> </div> </div>
2、添加编辑按钮的点击事件：//我们是按钮创建之前就绑定了click $(document).on("click",'.edit_btn',function() { alert("---------"); });
3、打开页面，查看绑定事件是否已经生效:
4、点击编辑之后弹出bootstrap模态对话框：//我们是按钮创建之前就绑定了click $(document).on("click",'.edit_btn',function() { $('#empUpdateModal').modal({ backdrop:"static" }); });
5、查看点击事件之后模态对话款是否弹出：
6、在boostrap模态对话框中加载部门信息：function getDepts(ele) { $(ele).empty(); $.ajax({ url:"${APP_PATH}/depts", type:"get", success:function(result) { $.each(result.extend.depts,function() { var optionEle = $("<option></option>").append(this.deptName).attr("value",this.deptId); optionEle.appendTo($(ele)); }); } }); }
