本周完成任务：登录功能及页面设计、主页面设计、客户管理模块、车辆管理模块、驾驶员管理模块、业务员管理模块
核心代码：见下列插入的代码
遇到的问题：无
解决的方法：无
项目燃尽图：见页面最后
前言：内容主要为页面设计和档案管理模块
一、系统管理后台登录
css源码
*{
padding:0;
margin:0;
outline:none;
}
body{
background:#9df;
}
.loginDiv{
width:1100px;
margin:170px auto;
}
.left{
float:left;
width:500px;
height:300px;
margin-top:30px;
}
.right{
width:300px;
padding:50px;
background-color:#fff;
border-radius:5px;
float:right;
margin-right:50px;
margin-top:50px;
box-shadow:3px 3px 3px #999;
}
.login_logo{
width:120px;
height:120px;
border:5px solid #9df;
border-radius:100px;
background:#fff;
text-align:center;
line-height:120px;
position:absolute;
margin-top:-115px;
margin-left:85px;
}
.login_logo img{
width:110px;
transition:1s;
}
.login_logo img:hover{
width:130px;
}
.login_name{
width:100%;
float:left;
text-align:center;
margin-top:20px;
}
.login_name p{
text-align:center;
font-size:18px;
color:#999;
font-weight:bolder;
padding:10px 0 20px;
letter-spacing:1px;
}
input[type=text],input[type=password]{
border:1px solid #ddd;
border-radius:3px;
line-height:50px;
padding:0px 16px;
font-size:14px;
width:266px;
margin-bottom:15px;
color:#888;
}
input[type=text]:focus,input[type=password]:focus{
border: 1px solid #2ae;
}
input[type=button] {
width:100%;
padding:12px 24px;
font-size:16px;
line-height:24px;
text-align:center;
cursor:pointer;
color:#fff;
background-color:#2ae;
border-radius:3px;
border:none;
}
.foot{
background-color:#069;
color:#fff;
padding:20px 0px;
font-size:14px;
width:100%;
margin:auto;
position:absolute;
bottom:0px;
}
.foot .footer{
width:1250px;
margin:auto;
text-align:center;
}
#message{
display:none;
padding:20px 30px;
background-color:#fff;
color:#09d;
font-size:14px;
margin:auto;
position:absolute;
border-radius:5px;
box-shadow:3px 3px 3px #999;
border:1px solid #9ef;
text-shadow:1px 1px 2px #aaa;
}js源码
var mo=0;
function messageOut(){
mo+=1;
if(mo>=20){
$("#message").css("top","-=3");
}
if(mo<=41){
setTimeout(messageOut,50);
}else{
$("#message").fadeOut(500);
mo=0;
}
}
function login(){
var yhzh = $(".form1 input[name='yhzh']").val();
if(yhzh==null||yhzh.length==0){
$("#message").html("用户名不能为空，请输入后重新登录！");
var left = $("#message").width()/2;
var offsetTop = $(".loginDiv").offset().top;
var offsetLeft = $(".loginDiv").offset().left;
$("#message").css("left",offsetLeft+$(".loginDiv").width()/2-left-20);
$("#message").css("top",offsetTop-13);
$("#message").fadeIn(1000);
messageOut();
$(".form1 input[name='yhzh']").focus();
return false;
}
var yhmm = $(".form1 input[name='yhmm']").val();
if(yhmm==null||yhmm.length==0){
$("#message").html("密码不能为空，请输入后重新登录！");
var left = $("#message").width()/2;
var offsetTop = $(".loginDiv").offset().top;
var offsetLeft = $(".loginDiv").offset().left;
$("#message").css("left",offsetLeft+$(".loginDiv").width()/2-left-20);
$("#message").css("top",offsetTop-13);
$("#message").fadeIn(1000);
messageOut();
$(".form1 input[name='yhmm']").focus();
return false;
}
$.ajax({
url:"login",
type:"post",
data:$(".form1").serialize(),
async:false,
success:function(data){
if(data!='loginErr'){
location.reload();
}else{
alert("登录失败");
}
}
});
}
$(Window).keydown(function(){
if(event.keyCode==13){
var uname = $(".form1 input[name='yhzh']").val();
if(uname.length>0){
login();
return;
}
}
});html源码
<h3 id="message"></h3>
<div class="loginDiv">
<div class="left">
<img src="img/login-img.png" width="650px"/>
</div>
<div class="right">
<div class="login_logo">
<img src="img/keche.png"/>
</div>
<div class="login_name">
<p>管理系统登录</p>
</div>
<form class="form1">
<input type="text" name="yhzh" value="admin" >
<input type="password" name="yhmm" value="1234"/>
<input type="button" value="登录" onclick="login()">
</form>
</div>
</div>
<div class="foot">
<div class="footer">
<p>京公网安备 11000002000088号 | 京ICP证070359号 | 互联网信息服务资格证编号(京)-经营性-2014-0008 | 新出发京零 字第大120007号</p>
<p>互联网出版许可证编号新出网证(京)字150号 | 出版物经营许可证 | 网络文化经营许可证京网文[2014]2148-348号 | 违法和不良信息举报电话：4006561155</p>
<p>Copyright © 2020 - 2022 方凯@ 版权所有 | 消费者维权热线：4006067733经营证照 | (京)网械平台备字(2018)第00003号 | 营业执照</p>
</div>
</div>
二、管理系统整体布局
主体区域为内嵌子网页
css源码
*{
padding:0px;
margin:0px;
}
a{
text-decoration:none;
display:block;
}
span{
display:inline-block;
}
ul{
list-style:none;
color:#555;
}
.banner{
position:absolute;
top:10px;
font-size:18px;
color:#069;
padding-left:20px;
letter-spacing: 3px;
transition:1s;
}
.banner:hover{
color:#0de;
}
#message{
display:none;
padding:20px 30px;
background-color:#bef;
color:#09d;
font-size:14px;
margin:auto;
position:absolute;
border-radius:5px;
box-shadow:3px 3px 3px #999;
border:1px solid #9ef;
text-shadow:1px 1px 2px #aaa;
}
#confirmDiv{
display:none;
position:fixed;
left:0px;
top:0px;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.1);
}
#confirm{
position:fixed;
padding:30px 60px;
background-color:#def;
color:#09d;
font-size:14px;
margin:auto;
border-radius:5px;
box-shadow:3px 3px 3px #999;
border:1px solid #9ef;
}
#confirm>h3{
text-shadow:1px 1px 2px #aaa;
}
#confirm>div{
width:120px;
margin:auto;
margin-bottom:-10px;
}
#confirm .yes,.no{
padding:5px 20px;
outline:none;
margin-top:20px;
border:none;
cursor:pointer;
color:#fff;
}
#confirm .yes{
background-color:#0c0;
}
#confirm .yes:hover{
box-shadow:2px 2px 2px #999;
}
#confirm .no{
background-color:red;
}
#confirm .no:hover{
box-shadow:2px 2px 2px #999;
}
.maxdiv{
width:1250px;
margin:auto;
background-color:#fff;
}
.maxdiv>.top{
overflow:auto;
min-width:1250px;
background-color:#069;
color:#fff;
margin-bottom:5px;
box-shadow:2px 2px 3px #000;
}
.maxdiv>.top>div{
overflow:auto;
}
.left{
min-height:650px;
width:200px;
float:left;
background-color:#fff;
box-shadow:2px 2px 3px #999;
border-left:1px dotted #ccc;
}
.left>ul>li{
border:1px dotted #ddd;
padding:10px 10px;
cursor:pointer;
letter-spacing:2px;
transition:1s;
}
.left>ul>li:hover{
background-color:#069;
color:#fff;
}
#checked{
background-color:#069;
color:#fff;
}
.left>ul>ul{
color:#aaa;
display:none;
}
.left>ul>ul>li{
letter-spacing:2px;
text-align: left;
font-size:12px;
padding-left:30px;
line-height:30px;
cursor:pointer;
}
.left>ul>ul>li:hover{
color:#0df;
}
.top_div_span1{
margin:10px 20px;
letter-spacing:2px;
cursor:pointer;
transition:1s;
}
.top_div_span1:hover{
color:#0de;
}
.top_div_span2{
font-size:14px;
}
.top_div_tc{
cursor:pointer;
border:1px dotted #999;
font-size:14px;
color:#ccc;
transition:1s;
}
.top_div_tc:hover{
color:#0de;
border:1px dotted #0de;
}
.center{
overflow:auto;
}
.main{
float:left;
width:1038px;
margin-left:10px;
margin-top:1px;
background-color:#def;
box-shadow:2px 2px 3px #999;
min-height:650px;
}
.main>h3{
background-color:#dde;
padding:9px 20px;
color:#0ac;
letter-spacing:5px;
}
.foot{
background-color:#069;
color:#fff;
padding: 20px 0px;
font-size: 14px;
width:1250px;
margin:auto;
margin-top:3px;
clear:both;
}
.foot .footer{
margin:auto;
text-align: center;
}js源码
function customList(){
$.ajax({
url:'customListPage',
async:false,
success:function(data){
$(".listView").html(data);
}
});
}
function carList(){
$.ajax({
url:'carListPage',
async:false,
success:function(data){
$(".listView").html(data);
}
});
}
function driverList(){
$.ajax({
url:'driverListPage',
async:false,
success:function(data){
$(".listView").html(data);
}
});
}
function salesList(){
$.ajax({
url:'salesListPage',
async:false,
success:function(data){
$(".listView").html(data);
}
});
}
$(function(){
$(".top_div_span1").click(function(){
location.reload();
});
function startTime(){
var time = new Date().toLocaleString();
$("#time").html(time);
setTimeout(startTime,1000);
}
startTime();
var h1 = window.innerHeight-parseInt($(".top").css("height"))-115;
$(".left").css("height",h1);
var h2 = window.innerHeight-parseInt($(".top").css("height"))-115;
$(".main").css("height",h2);
$(".left>ul>li").click(function(){
$(".left>ul>li:not(this)").prop("id","");
$(this).prop("id","checked");
var jj=$(this).children("span").html();
if(jj=='+'){
$(this).next().css("display","block");
$(this).children("span").html("-");
}else{
$(this).next().css("display","none");
$(this).children("span").html("+");
}
});
$(".left>ul>ul>li").click(function(){
$(".left>ul>ul>li").css("color","#aaa");
$(this).css("color","#0df");
var title = $(this).html();
$(".main>h3").html(title);
if(title=='客户信息管理'){
customList();
return;
}
if(title=='车辆信息管理'){
carList();
return;
}
if(title=='驾驶员信息管理'){
driverList();
return;
}
if(title=='业务员信息管理'){
salesList();
return;
}
});
});
$(window).resize(function(){
var h1 = window.innerHeight-parseInt($(".top").css("height"))-115;
$(".left").css("height",h1);
var h2 = window.innerHeight-parseInt($(".top").css("height"))-115;
$(".main").css("height",h2);
});
function exit(){
$("#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:'exit',
async:false,
success:function(data){
location.reload();
}
});
});
$("#confirm .no").click(function(){
$("#confirmDiv").fadeOut(1000);
});
}
var mo=0;
function messageOut(){
mo+=1;
if(mo>=20){
$("#message").css("top","-=3");
}
if(mo<=41){
setTimeout(messageOut,50);
}else{
$("#message").fadeOut(500);
mo=0;
}
}
$(Window).keydown(function(){
if(event.keyCode==13){
var addCustomPage = $(".addCustomPage").css("display");
if(addCustomPage=='block'){
saveAddCustomPage();
return;
}
var updateCustomPage = $(".updateCustomPage").css("display");
if(updateCustomPage=='block'){
saveUpdateCustomPage();
return;
}
var addPageDiv = $(".addPageDiv").css("display");
if(addPageDiv=='block'){
add();
return;
}
var updatePageDiv = $(".updatePageDiv").css("display");
if(updatePageDiv=='block'){
update();
return;
}
}
});html源码
<div class="maxdiv" >
<div class="top" >
<div>
<img src="img/banner.jpg" height="150px" width='1250px' align="left"/>
<p class="banner">HOPU·IT 中国信息化教育领导者</p>
</div>
<div>
<span class="top_div_span1"><b>车辆派遣管理系统</b></span>
<span class="top_div_span2">当前登录用户:</span>
<span class="top_div_span2">admin</span>
<span class="top_div_span2">用户角色:</span>
<span class="top_div_span2">管理员</span>
<span>当前时间：</span>
<span class="top_div_span2" id="time"></span>
<span class="top_div_tc" onclick="exit()">退出系统</span>
</div>
</div>
<div class="center">
<div class="left">
<ul>
<li id="checked"><span>+</span>业务管理</li>
<ul>
<li>派车单登记</li>
<li>派车单审核</li>
<li>财务收款</li>
<li>单车月结算</li>
</ul>
<li><span>+</span>档案管理</li>
<ul>
<li>客户信息管理</li>
<li>车辆信息管理</li>
<li>驾驶员信息管理</li>
<li>业务员信息管理</li>
</ul>
<li><span>+</span>查询统计</li>
<ul>
<li>派车单统计</li>
<li>出车率分析</li>
<li>已收款明细</li>
<li>未收款明细</li>
<li>结算明细</li>
<li>车补贴查询</li>
<li>单车查询</li>
</ul>
</ul>
</div>
<div class="main">
<h3>初始信息待定</h3>
<div class="listView"></div>
</div>
</div>
</div>
<h3 id="message">登记客户信息失败，请重新登记</h3>
<div id="confirmDiv">
<div id="confirm">
<h3>确认？</h3>
<div>
<button class="yes">是</button>
<button class="no">否</button>
</div>
</div>
</div>
<div class="foot">
<div class="footer">
<p>京公网安备 11000002000088号 | 京ICP证070359号 | 互联网信息服务资格证编号(京)-经营性-2014-0008 | 新出发京零 字第大120007号</p>
<p>互联网出版许可证编号新出网证(京)字150号 | 出版物经营许可证 | 网络文化经营许可证京网文[2014]2148-348号 | 违法和不良信息举报电话：4006561155</p>
<p>Copyright © 2020 - 2022 方凯@ 版权所有 | 消费者维权热线：4006067733经营证照 | (京)网械平台备字(2018)第00003号 | 营业执照</p>
</div>
</div>
内嵌子网页部分(此处仅展示部分)
内嵌页面css源码
*{
padding:0px;
margin:0px;
}
.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;
}内嵌页面js源码
function loadPage(rows,page){
$.ajax({
url:'carList',
type:'post',
data:'rows='+rows+'&row='+((page-1)*rows),
async:false,
success:function(data){
var arr = eval(data);
var row="";
$.each(arr,function(i,o){
row +="<tr>";
row +="<td width='5%'><input type='checkbox' name='ckDel'/></td>";
row +="<td width='8%'>"+o.clbh+"</td>";
row +="<td width='12%'>"+o.cphm+"</td>";
row +="<td width='15%'>"+o.djsj+"</td>";
row +="<td width='10%'>"+o.zws+"</td>";
row +="<td width='15%'>"+o.cpxh+"</td>";
row +="<td width='15%'>"+o.cjhm+"</td>";
row +="<td width=''>";
row +="<button class='xg' onclick='showUpdatePageDiv(this)'>修改</button> ";
row +="<button class='sc' onclick='showDeletePageDiv(this,"+o.clbh+")'>删除</button>";
row +="</td></tr>";
});
$(".list").html(row);
$.ajax({
url:'carPages',
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='cphm']").focus();
}
function closeAddPageDiv(){
$(".addPageDiv form input").val('');
$(".addPageDiv").fadeOut();
}
function checkAdd(){
var cphm = $(".addPage input[name='cphm']").val();
if(cphm==null||cphm.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='cphm']").focus();
return false;
}
var zws = $(".addPage input[name='zws']").val();
if(zws==null||zws.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='zws']").focus();
return false;
}
var cpxh = $(".addPage input[name='cpxh']").val();
if(cpxh==null||cpxh.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='cpxh']").focus();
return false;
}
var cjhm = $(".addPage input[name='cjhm']").val();
if(cjhm==null||cjhm.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='cjhm']").focus();
return false;
}
return true;
}
function add(){
if(checkAdd()){
var formData = $(".addPageDiv form").serialize();
$.ajax({
url:'addCar',
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();
CarList();
}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 clbh = $(button).parent().parent().children(":eq(1)").text();
var cphm = $(button).parent().parent().children(":eq(2)").text();
var djsj = $(button).parent().parent().children(":eq(3)").text();
var zws = $(button).parent().parent().children(":eq(4)").text();
var cpxh = $(button).parent().parent().children(":eq(5)").text();
var cjhm = $(button).parent().parent().children(":eq(6)").text();
$(".updatePageDiv form input[name='clbh']").val(clbh);
$(".updatePageDiv form input[name='cphm']").val(cphm);
$(".updatePageDiv form input[name='djsj']").val(djsj);
$(".updatePageDiv form input[name='zws']").val(zws);
$(".updatePageDiv form input[name='cpxh']").val(cpxh);
$(".updatePageDiv form input[name='cjhm']").val(cjhm);
$(".updatePageDiv").fadeIn(1000);
$(".updatePageDiv form input[name='cphm']").focus();
}
function closeUpdatePageDiv(){
$(".updatePageDiv form input").val('');
$(".updatePageDiv").fadeOut(1000);
}
function checkUpdate(){
var cphm = $(".updatePage input[name='cphm']").val();
if(cphm==null||cphm.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='cphm']").focus();
return false;
}
var zws = $(".updatePage input[name='zws']").val();
if(zws==null||zws.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='zws']").focus();
return false;
}
var cpxh = $(".updatePage input[name='cpxh']").val();
if(cpxh==null||cpxh.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='cpxh']").focus();
return false;
}
var cjhm = $(".updatePage input[name='cjhm']").val();
if(cjhm==null||cjhm.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='cjhm']").focus();
return false;
}
return true;
}
function update(){
if(checkUpdate()){
var formData = $(".updatePageDiv form").serialize();
$.ajax({
url:'updateCar',
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();
carList();
}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,clbh){
$("#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:'deleteCar',
type:'post',
data:'clbh='+clbh,
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();
carList();
}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);
}
}内嵌页面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="8%">车辆编号</td>
<td width="12%">车牌号码</td>
<td width="15%">登记时间</td>
<td width="10%">座位数</td>
<td width="15%">厂牌型号</td>
<td width="15%">车架号码</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>
第
<select name="toNumPage" onchange="changeNumPage()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
页
共
<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="cphm" placeholder="例：豫K55555"/><br/>
</td>
</tr>
<tr>
<td align="right">座位数：</td>
<td>
<input type="text" name="zws"/><br/>
</td>
</tr>
<tr>
<td align="right">厂牌型号：</td>
<td>
<input type="text" name="cpxh"/><br/>
</td>
</tr>
<tr>
<td align="right">车架号码：</td>
<td>
<input type="text" name="cjhm"/><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="clbh"/>
<input type="text" name="cphm"/><br/>
</td>
</tr>
<tr>
<td align="right">登记时间：</td>
<td>
<input type="text" name="djsj" readonly="readonly"/><br/>
</td>
</tr>
<tr>
<td align="right">座位数：</td>
<td>
<input type="text" name="zws"/><br/>
</td>
</tr>
<tr>
<td align="right">厂牌型号：</td>
<td>
<input type="text" name="cpxh"/><br/>
</td>
</tr>
<tr>
<td align="right">车架号码：</td>
<td>
<input type="text" name="cjhm"/><br/>
</td>
</tr>
</table>
</form>
<p>
<span class="bc" onclick="update()">保存</span>
<span onclick="closeUpdatePageDiv()">取消</span>
</p>
</div>
</div>
案例项目燃尽图
链接：https://pan.baidu.com/s/100Wtn3_rNTwXpqrDJQ9tqg
提取码：81rm
复制这段内容后打开百度网盘手机App，操作更方便哦
扫一扫
563
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
