模态窗体
共用模态窗体的方法
在做项目的时候,模态窗体是最常用的。有了它,就可以实现新增和修改这一类的功能。那么在反反复复的重复写着差不多相同的代码中,你是否感觉这简直就是在浪费时间呢?明明就是同样的东西,就因为换了个名称,多加了个按钮就得重新再写,这也太难受了吧!是不是有办法可以节省代码,让更少的代码实现更多的功能?没错,这个办法就是让同样的弹出框共用一个模态窗体,让更少的代码实现更多的功能。
一般的,我们写新增和修改的模态窗体是分开写的,这样写不利于提高工作效率。既然是实现同样的功能,就直接共用一个窗体就行了,代码如下:
<!--新增/修改模态窗体-->
<div class="modal fade" id="modalEmployee">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" id="xzxg">
模态框标题
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="formEmployee" class="form-horizontal" method="post" action="">
<!--重置表单-->
<input type="reset" hidden />
<input type="hidden" id="employeeID" name="employeeID" />
<div class="form-group form-row">
<label class="col-form-label col-3" for="employeeNum">员工编号:</label>
<div class="col-9">
<input type="text" class="form-control" name="employeeNum" id="employeeNum" />
</div>
</div>
<div class="form-group form-row">
<label class="col-form-label col-3" for="employeeName">员工姓名:</label>
<div class="col-9">
<input type="text" class="form-control" name="employeeName" id="employeeName" />
</div>
</div>
<div class="form-group form-row">
<label class="col-form-label col-3" for="telphone">联系电话:</label>
<div class="col-9">
<input type="text" class="form-control" name="telphone" id="telphone"/>
</div>
</div>
<div class="form-group form-row">
<label class="col-form-label col-3" for="address">家庭地址:</label>
<div class="col-9">
<input type="text" class="form-control" name="address" id="address" />
</div>
</div>
<div class="form-group form-row justify-content-center">
<div class="col-4">
<button type="button" class="btn btn-outline-success mr-3" id="SaveEmployee">保存</button>
<button type="button" class="btn btn-outline-secondary " data-dismiss="modal">关闭</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
因为这两个模态框的功能基本上是一样的,所以共用一个窗体的样式是完全没有问题的。唯一不同的就是新增需要的是重置表单,修改需要的是回填表单的功能。为了区分模态框,还要给不同的模态框设置标题,代码如下:
//打开新增模态框
function openInsert(employeeId) {
//重置表单
$("#formEmployee")[0].reset();
//设置模态框标题
$("#xzxg").text("新增员工信息");
//设置表单的action
$("#formEmployee").prop("action", "/Main/InsertEmployee");
//弹出模态框
$("#modalEmployee").modal({ backdrop: 'static', keyboard: false });
};
//打开修改的模态框
function updateEmployee(employeeId) {
//重置表单
$("#formEmployee")[0].reset();
//设置模态框标题
$("#xzxg").text("修改员工信息");
//设置表单的action
$("#formEmployee").prop("action", "/Main/UpdateEmployee")
//回填表单
$.post("/Main/HuitianUpdate",
{ EmployeeId: employeeId },
function (jsonData) {
loadDatatoForm("formEmployee", jsonData);
}, 'json');
//弹出模态框
$("#modalEmployee").modal({ backdrop: 'static', keyboard: false })
};
最后看一下效果: