功能模块：驾驶员信息管理

需要角色：管理员（其他角色不能操作）

数据加载：驾驶员信息列表

数据验证：非空验证、电话验证、身份证验证

列表分页：AJAX分页查询

业务描述：

公司派遣车辆必须要有驾驶员来开车，需要进行驾驶员信息的管理

管理员登录以后才可以进行驾驶员信息的管理，点击左侧“档案管理”下的“驾驶员信息管理”，在右侧主体区域加载驾驶员信息的子页面，并ajax加载所有的驾驶员信息资料，点击列表上面的“加号状图标”可以打开驾驶员添加窗口，在驾驶员添加窗口完成驾驶员信息的登记操作，点击列表后的“修改”按钮可以修改驾驶员信息，点击列表后的“删除”按钮可以删除驾驶员信息，点击删除弹窗的“是”即可完成删除。

视频演示地址：https://www.bilibili.com/video/BV1wA411Y77J/

图文演示：

驾驶员信息列表

驾驶员信息登记

驾驶员信息修改

驾驶员信息删除

驾驶员信息管理子页面html代码：

<table class="table1" width='100%' cellspacing="0" border='0'><tr align="left"><td width="5%"><img id="xz" src="img/xz1.jpg" width="25px"/></td><td width="5%">编号</td><td width="6%">姓名</td><td width="15%">身份证号</td><td width="10%">联系电话</td><td width="18%">联系地址</td><td width="10%">驾证有效期</td><td width="10%">上岗证有效期</td><td width="6%">状态</td><td width="">管理操作</td></tr>
</table>
<table class="list" width='100%' cellspacing="0"></table>
<p class="pageManager"><span><input type="hidden" name="rows" value="10"/></span><b ><button onclick="first()">首页</button><button onclick="prev()">上一页</button><button onclick="next()">下一页</button><button onclick="last()">尾页</button>&nbsp;第<select name="toNumPage" onchange="changeNumPage()"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select>页&nbsp;共<span></span>页</b>
</p>
<div class="addPageDiv"><div class="addPage"><h2>登记驾驶员信息<span><sup onclick="closeAddPageDiv()">×</sup></span></h2><form><table><tr><td align="right">驾驶员姓名：</td><td><input type="text" name="jsyxm" placeholder="例：方大福"/><br/></td></tr><tr><td align="right">身份证号：</td><td><input type="text" name="sfzh"/><br/></td></tr><tr><td align="right">联系电话：</td><td><input type="text" name="lxdh"/><br/></td></tr><tr><td align="right">联系地址：</td><td><input type="text" name="lxdz"/><br/></td></tr><tr><td align="right">驾证有效期：</td><td><input type="text" name="jzyxq"/><br/></td></tr><tr><td align="right">上岗证有效期：</td><td><input type="text" name="sgzyxq"/><br/></td></tr></table></form><p><span class="bc" onclick="add()">保存</span><span onclick="closeAddPageDiv()">取消</span></p></div>
</div>
<div class="updatePageDiv"><div class="updatePage"><h2>更新驾驶员信息<span><sup onclick="closeUpdatePageDiv()">×</sup></span></h2><form><table><tr><td align="right">驾驶员姓名：</td><td><input type="hidden" name="jsybh"/><input type="text" name="jsyxm"/><br/></td></tr><tr><td align="right">身份证号：</td><td><input type="text" name="sfzh"/><br/></td></tr><tr><td align="right">联系电话：</td><td><input type="text" name="lxdh"/><br/></td></tr><tr><td align="right">联系地址：</td><td><input type="text" name="lxdz"/><br/></td></tr><tr><td align="right">驾证有效期：</td><td><input type="text" name="jzyxq"/><br/></td></tr><tr><td align="right">上岗证有效期：</td><td><input type="text" name="sgzyxq"/><br/></td></tr></table></form><p><span class="bc" onclick="update()">保存</span><span onclick="closeUpdatePageDiv()">取消</span></p></div>
</div>

驾驶员信息管理子页面js代码：

function loadPage(rows,page){$.ajax({url:'driverList',type:'post',data:'rows='+rows+'&row='+((page-1)*rows),async:false,success:function(data){var arr = eval(data);if(arr.length==0){$("#message").html("暂无驾驶员信息！");var left = $("#message").width()/2;$("#message").css("left",$(window).width()/2-left);$("#message").css("top",270);$("#message").fadeIn(1000);messageOut();return;}var row="";$.each(arr,function(i,o){row +="<tr>";row +="<td width='5%'><input type='checkbox' name='ckDel'/></td>";row +="<td width='5%'>"+o.jsybh+"</td>";row +="<td width='6%'>"+o.jsyxm+"</td>";row +="<td width='15%'>"+o.sfzh+"</td>";row +="<td width='10%'>"+o.lxdh+"</td>";row +="<td width='18%'>"+o.lxdz+"</td>";row +="<td width='10%'>"+o.jzyxq+"</td>";row +="<td width='10%'>"+o.sgzyxq+"</td>";if(o.zt=='0'){row +="<td width='6%'>未出车</td>";}else{row +="<td width='6%' style='color:#f66;'>已出车</td>";}row +="<td width=''>";row +="<button class='xg' onclick='showUpdatePageDiv(this)'>修改</button> ";row +="<button class='sc' onclick='showDeletePageDiv(this,"+o.jsybh+")'>删除</button>";row +="</td></tr>";});$(".list").html(row);$.ajax({url:'driverPages',type:'post',data:'rows='+$('.pageManager>span>input').val(),aysnc:false,success:function(data){$(".pageManager>b>span").html(data);var options = "";var n = parseInt(data);for(var i=1;i<=n;i++){if(page==i){options+="<option value='"+i+"' selected>"+i+"</option>";}else{options+="<option value='"+i+"'>"+i+"</option>";}}$(".pageManager select[name='toNumPage']").html(options);}});}});
}
$(function(){var rows = $('.pageManager>span>input').val();var page = $('.pageManager>b>select').val();loadPage(rows,page);$("#xz").mouseover(function(){$("#xz").prop("src","img/xz2.jpg");});$("#xz").mouseout(function(){$("#xz").prop("src","img/xz1.jpg");});$("#xz").click(function(){showAddPageDiv();});
});function showAddPageDiv(button){$(".addPageDiv").fadeIn(1000);$(".addPageDiv form input[name='jsyxm']").focus();
}
function closeAddPageDiv(){$(".addPageDiv form input").val('');$(".addPageDiv").fadeOut();
}
function checkAdd(){var jsyxm = $(".addPage input[name='jsyxm']").val();if(jsyxm==null||jsyxm.length==0){$("#message").html("请输入驾驶员姓名！");var left = $("#message").width()/2;var offsetTop = $(".addPage").offset().top;var offsetLeft = $(".addPage").offset().left;$("#message").css("left",offsetLeft+$(".addPage").width()/2-left-20);$("#message").css("top",offsetTop+70);$("#message").fadeIn(1000);messageOut();$(".addPage input[name='jsyxm']").focus();return false;}var sfzh = $(".addPage input[name='sfzh']").val();if(sfzh==null||sfzh.length!=18){$("#message").html("请输入18位身份证号！");var left = $("#message").width()/2;var offsetTop = $(".addPage").offset().top;var offsetLeft = $(".addPage").offset().left;$("#message").css("left",offsetLeft+$(".addPage").width()/2-left-20);$("#message").css("top",offsetTop+70);$("#message").fadeIn(1000);messageOut();$(".addPage input[name='sfzh']").focus();return false;}var lxdh = $(".addPage input[name='lxdh']").val();if(lxdh==null||lxdh.length!=11){$("#message").html("请输入11位联系电话！");var left = $("#message").width()/2;var offsetTop = $(".addPage").offset().top;var offsetLeft = $(".addPage").offset().left;$("#message").css("left",offsetLeft+$(".addPage").width()/2-left-20);$("#message").css("top",offsetTop+70);$("#message").fadeIn(1000);messageOut();$(".addPage input[name='lxdh']").focus();return false;}var lxdz = $(".addPage input[name='lxdz']").val();if(lxdz==null||lxdz.length==0){$("#message").html("请输入联系地址！");var left = $("#message").width()/2;var offsetTop = $(".addPage").offset().top;var offsetLeft = $(".addPage").offset().left;$("#message").css("left",offsetLeft+$(".addPage").width()/2-left-20);$("#message").css("top",offsetTop+70);$("#message").fadeIn(1000);messageOut();$(".addPage input[name='lxdz']").focus();return false;}var jzyxq = $(".addPage input[name='jzyxq']").val();if(jzyxq==null||jzyxq.length==0){$("#message").html("请输入驾证有效期！");var left = $("#message").width()/2;var offsetTop = $(".addPage").offset().top;var offsetLeft = $(".addPage").offset().left;$("#message").css("left",offsetLeft+$(".addPage").width()/2-left-20);$("#message").css("top",offsetTop+70);$("#message").fadeIn(1000);messageOut();$(".addPage input[name='jzyxq']").focus();return false;}var sgzyxq = $(".addPage input[name='sgzyxq']").val();if(sgzyxq==null||sgzyxq.length==0){$("#message").html("请输入上岗证有效期！");var left = $("#message").width()/2;var offsetTop = $(".addPage").offset().top;var offsetLeft = $(".addPage").offset().left;$("#message").css("left",offsetLeft+$(".addPage").width()/2-left-20);$("#message").css("top",offsetTop+70);$("#message").fadeIn(1000);messageOut();$(".addPage input[name='sgzyxq']").focus();return false;}return true;
}
function add(){if(checkAdd()){var formData = $(".addPageDiv form").serialize();$.ajax({url:'addDriver',type:'post',data:formData,async:false,success:function(data){if(data!=0){$("#message").html("添加成功！");var left = $("#message").width()/2;var offsetTop = $(".addPage").offset().top;var offsetLeft = $(".addPage").offset().left;$("#message").css("left",offsetLeft+$(".addPage").width()/2-left-20);$("#message").css("top",offsetTop+70);$("#message").fadeIn(1000);messageOut();driverList();}else{$("#message").html("添加失败！");var left = $("#message").width()/2;var offsetTop = $(".addPage").offset().top;var offsetLeft = $(".addPage").offset().left;$("#message").css("left",offsetLeft+$(".addPage").width()/2-left-20);$("#message").css("top",offsetTop+70);$("#message").fadeIn(1000);messageOut();}}});}
}
function showUpdatePageDiv(button){var jsybh = $(button).parent().parent().children(":eq(1)").text();var jsyxm = $(button).parent().parent().children(":eq(2)").text();var sfzh = $(button).parent().parent().children(":eq(3)").text();var lxdh = $(button).parent().parent().children(":eq(4)").text();var lxdz = $(button).parent().parent().children(":eq(5)").text();var jzyxq = $(button).parent().parent().children(":eq(6)").text();var sgzyxq = $(button).parent().parent().children(":eq(7)").text();$(".updatePageDiv form input[name='jsybh']").val(jsybh);$(".updatePageDiv form input[name='jsyxm']").val(jsyxm);$(".updatePageDiv form input[name='sfzh']").val(sfzh);$(".updatePageDiv form input[name='lxdh']").val(lxdh);$(".updatePageDiv form input[name='lxdz']").val(lxdz);$(".updatePageDiv form input[name='jzyxq']").val(jzyxq);$(".updatePageDiv form input[name='sgzyxq']").val(sgzyxq);$(".updatePageDiv").fadeIn(1000);$(".updatePageDiv form input[name='jsyxm']").focus();
}
function closeUpdatePageDiv(){$(".updatePageDiv form input").val('');$(".updatePageDiv").fadeOut(1000);
}
function checkUpdate(){var jsyxm = $(".updatePage input[name='jsyxm']").val();if(jsyxm==null||jsyxm.length==0){$("#message").html("请输入驾驶员姓名！");var left = $("#message").width()/2;var offsetTop = $(".updatePage").offset().top;var offsetLeft = $(".updatePage").offset().left;$("#message").css("left",offsetLeft+$(".updatePage").width()/2-left-20);$("#message").css("top",offsetTop+70);$("#message").fadeIn(1000);messageOut();$(".updatePage input[name='jsyxm']").focus();return false;}var sfzh = $(".updatePage input[name='sfzh']").val();if(sfzh==null||sfzh.length!=18){$("#message").html("请输入18位身份证号！");var left = $("#message").width()/2;var offsetTop = $(".updatePage").offset().top;var offsetLeft = $(".updatePage").offset().left;$("#message").css("left",offsetLeft+$(".updatePage").width()/2-left-20);$("#message").css("top",offsetTop+70);$("#message").fadeIn(1000);messageOut();$(".updatePage input[name='sfzh']").focus();return false;}var lxdh = $(".updatePage input[name='lxdh']").val();if(lxdh==null||lxdh.length!=11){$("#message").html("请输入11位联系电话！");var left = $("#message").width()/2;var offsetTop = $(".updatePage").offset().top;var offsetLeft = $(".updatePage").offset().left;$("#message").css("left",offsetLeft+$(".updatePage").width()/2-left-20);$("#message").css("top",offsetTop+70);$("#message").fadeIn(1000);messageOut();$(".updatePage input[name='lxdh']").focus();return false;}var lxdz = $(".updatePage input[name='lxdz']").val();if(lxdz==null||lxdz.length==0){$("#message").html("请输入联系地址！");var left = $("#message").width()/2;var offsetTop = $(".updatePage").offset().top;var offsetLeft = $(".updatePage").offset().left;$("#message").css("left",offsetLeft+$(".updatePage").width()/2-left-20);$("#message").css("top",offsetTop+70);$("#message").fadeIn(1000);messageOut();$(".updatePage input[name='lxdz']").focus();return false;}var jzyxq = $(".updatePage input[name='jzyxq']").val();if(jzyxq==null||jzyxq.length==0){$("#message").html("请输入驾证有效期！");var left = $("#message").width()/2;var offsetTop = $(".updatePage").offset().top;var offsetLeft = $(".addPage").offset().left;$("#message").css("left",offsetLeft+$(".updatePage").width()/2-left-20);$("#message").css("top",offsetTop+70);$("#message").fadeIn(1000);messageOut();$(".updatePage input[name='jzyxq']").focus();return false;}var sgzyxq = $(".updatePage input[name='sgzyxq']").val();if(sgzyxq==null||sgzyxq.length==0){$("#message").html("请输入上岗证有效期！");var left = $("#message").width()/2;var offsetTop = $(".updatePage").offset().top;var offsetLeft = $(".updatePage").offset().left;$("#message").css("left",offsetLeft+$(".updatePage").width()/2-left-20);$("#message").css("top",offsetTop+70);$("#message").fadeIn(1000);messageOut();$(".updatePage input[name='sgzyxq']").focus();return false;}return true;
}
function update(){if(checkUpdate()){var formData = $(".updatePageDiv form").serialize();$.ajax({url:'updateDriver',type:'post',data:formData,async:false,success:function(data){if(data!=0){$("#message").html("修改成功！");var left = $("#message").width()/2;var offsetTop = $(".updatePage").offset().top;var offsetLeft = $(".updatePage").offset().left;$("#message").css("left",offsetLeft+$(".updatePage").width()/2-left-20);$("#message").css("top",offsetTop+70);$("#message").fadeIn(1000);messageOut();driverList();}else{$("#message").html("修改失败！");var left = $("#message").width()/2;var offsetTop = $(".updatePage").offset().top;var offsetLeft = $(".updatePage").offset().left;$("#message").css("left",offsetLeft+$(".addPage").width()/2-left-20);$("#message").css("top",offsetTop+70);$("#message").fadeIn(1000);messageOut();}}});}
}function showDeletePageDiv(button,jsybh){$("#confirm h3").html("是否确认删除驾驶员信息？");$("#confirmDiv").fadeIn(1000);var left = window.innerWidth/2-$("#confirm").width()/2;$("#confirm").css("left",left);$("#confirm").css("top",200);$("#confirm .yes").click(function(){$("#confirmDiv").fadeOut(1000);$.ajax({url:'deleteDriver',type:'post',data:'jsybh='+jsybh,async:false,success:function(data){if(data!=0){$("#message").html("删除成功！");var left = $("#message").width()/2;$("#message").css("left",window.innerWidth/2-left);$("#message").css("top",250);$("#message").fadeIn(1000);messageOut();driverList();}else{$("#message").html("删除失败！");var left = $("#message").width()/2;$("#message").css("left",window.innerWidth/2-left);$("#message").css("top",250);$("#message").fadeIn(1000);messageOut();}}});});$("#confirm .no").click(function(){$("#confirmDiv").fadeOut(1000);});
}
function changeNumPage(){var rows = $(".pageManager input[name='rows']").val();var page = $(".pageManager select[name='toNumPage']").val();loadPage(rows,page);
}
function first(){var rows = $(".pageManager input[name='rows']").val();var page = 1;loadPage(rows,page);
}
function last(){var rows = $(".pageManager input[name='rows']").val();var pages = $(".pageManager>b>span").html();loadPage(rows,pages);
}
function prev(){var rows = $(".pageManager input[name='rows']").val();var page = parseInt($(".pageManager select[name='toNumPage']").val());if(page-1<1){$(".pageManager select[name='toNumPage']").children(":last").prop("selected","true");last();}else{$(".pageManager select[name='toNumPage']").children(":eq("+(page-1)+")").prop("selected","true");loadPage(rows,page-1);}
}
function next(){var rows = $(".pageManager input[name='rows']").val();var page = parseInt($(".pageManager select[name='toNumPage']").val());var pages = parseInt($(".pageManager>b>span").html());if(page+1>pages){$(".pageManager select[name='toNumPage']").children(":eq(0)").prop("selected","true");first();}else{$(".pageManager select[name='toNumPage']").children(":eq("+(page+1)+")").prop("selected","true");loadPage(rows,page+1);}
}

驾驶员信息管理子页面css代码：

.xg,.sc{color:#fff;border-radius:5px;border:none;line-height:25px;width:40px;
}
.xg{background-color:#01AAED;outline:none;cursor:pointer;
}
.sc{background-color:#FF5722;outline:none;cursor:pointer;
}
.table1{background-color:#eef;line-height:41px;font-size:12px;padding-left:25px;font-weight:bolder;color:#666;
}
.table1 tr td{padding-left:10px;
}
.list{font-size:12px;padding-left:25px;margin-top:15px;color:#666;
}
.list tr{background-color:#fff;height:50px;outline:3px solid #def;
}
.list tr:hover{background-color:#aef;
}
.list tr td{padding-left:10px;
}
.addPageDiv{display:none;position:absolute;left:0px;top:0px;width:100%;height:100%;background-color:rgba(0,0,0,0.3);
}
.addPage{width:370px;border-radius:5px;background-color:#fff;margin:200px auto;box-shadow:3px 3px 3px 3px #555;
}
.addPage input{outline:none;line-height:25px;
}
.addPage>h2{border-bottom:1px solid #ccc;padding:15px 20px;color:#fff;background-color:#0cf;
}
.addPage h2 span{float:right;color:#fff;margin-top:-10px;margin-right:-5px;cursor:pointer;
}
.addPage table{color:#666;font-size:14px;margin:10px auto;
}
.addPage table input{border:1px solid #ccc;padding-top:3px;padding-left:10px;border-radius:2px;
}
.addPage table tr{line-height:50px;
}
.addPage p{border-top:1px solid #ccc;padding:15px 15px;overflow: auto;
}
.addPage p span{float:right;border:1px solid #999;border-radius:3px;font-size:9px;padding:3px 5px;letter-spacing:2px;margin-right:10px;font-weight:500;cursor:pointer;
}
.addPage p .bc{background-color:#0cf;color:#fff;
}
.updatePageDiv{display:none;position:absolute;left:0px;top:0px;width:100%;height:100%;background-color:rgba(0,0,0,0.3);
}
.updatePage{width:370px;border-radius:5px;background-color:#fff;margin:200px auto;box-shadow:3px 3px 3px 3px #555;
}
.updatePage input{outline:none;line-height:25px;
}
.updatePage>h2{border-bottom:1px solid #ccc;padding:15px 20px;color:#fff;background-color:#0cf;
}
.updatePage h2 span{float:right;color:#fff;margin-top:-10px;margin-right:-5px;cursor:pointer;
}
.updatePage table{color:#666;font-size:14px;margin:10px auto;
}
.updatePage table input{border:1px solid #ccc;padding-top:3px;padding-left:10px;border-radius:2px;
}
.updatePage table tr{line-height:50px;
}
.updatePage p{border-top:1px solid #ccc;padding:15px 15px;overflow: auto;
}
.updatePage p span{float:right;border:1px solid #999;border-radius:3px;font-size:9px;padding:3px 5px;letter-spacing:2px;margin-right:10px;font-weight:500;cursor:pointer;
}
.updatePage p .bc{background-color:#0cf;color:#fff;
}
.pageManager{margin-top:10px;margin-left:25px;background-color:#fff;padding:5px 10px;color:#999;box-shadow:2px 2px 3px #999;
}
.pageManager>span{font-size:9px;
}
.pageManager>span>input{width:40px;border:1px solid #ccc;outline:none;padding-left:5px;border-radius:5px;margin-left:5px;
}
.pageManager>b{font-weight:100;font-size:9px;margin-left:15px;
}
.pageManager>b>select{border:1px solid #ccc;outline:none;border-radius:5px;
}
.pageManager>b>button{border:1px solid #ccc;outline:none;background-color:#fff;color:#666;font-size:9px;padding:1px 2px;cursor:pointer;
}
.pageManager>b>button:hover{color:white;font-weight:bolder;background-color:#0DE;
}
#xz{box-shadow:2px 2px 2px #aaa;cursor:pointer;
}