今日完成任务：客户信息管理及页面设计
核心代码：见下列插入的代码
遇到的问题：无
解决的方法：无
功能模块：客户信息管理
需要角色：业务员（其他角色不能操作）
数据加载：客户信息列表
数据验证：非空验证、电话号码验证、客户单位是否已存在验证
列表分页：AJAX分页查询
业务描述：
客户想要租车必须要先登记客户自己的信息，登记以后才可以给予派车登记操作
业务员登录以后才可以进行客户信息的管理，点击左侧“档案管理”下的“客户信息管理”，在右侧主体区域加载客户信息的子页面，并ajax加载所有的客户信息资料，点击列表上面的“加号状图标”可以打开客户添加窗口，在客户添加窗口完成客户信息的登记操作，点击列表后的“修改”按钮可以修改客户信息，无论添加还是修改都会验证客户单位是否已存在，不能重复添加，点击列表后的“删除”按钮可以删除客户信息，点击删除弹窗的“是”即可完成删除。
视频演示地址：https://www.bilibili.com/video/BV1tA411Y7o2/
图文演示：
客户信息列表
客户信息登记：
客户信息修改：
客户信息删除：
客户信息管理子页面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="15%">用车单位</td>
<td width="8%">联系人</td>
<td width="12%">联系电话</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="addCustomDiv">
<div class="addCustomPage">
<h2>登记客户信息<span><sup onclick="closeAddCustomDiv()">×</sup></span></h2>
<form>
<table>
<tr>
<td align="right">用车单位：</td>
<td>
<input type="text" name="ycdw" placeholder="例：厚溥教育科技有限公司"/><br/>
</td>
</tr>
<tr>
<td align="right">联系人：</td>
<td>
<input type="text" name="lxr"/><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="wxh"/><br/>
</td>
</tr>
</table>
</form>
<p>
<span class="bc" onclick="saveAddCustomPage()">保存</span>
<span onclick="closeAddCustomDiv()">取消</span>
</p>
</div>
</div>
<div class="updateCustomDiv">
<div class="updateCustomPage">
<h2>更新客户信息<span><sup onclick="closeUpdateCustomDiv()">×</sup></span></h2>
<form>
<table>
<tr>
<td align="right">用车单位：</td>
<td>
<input type="hidden" name="khbh"/>
<input type="text" name="ycdw" /><br/>
</td>
</tr>
<tr>
<td align="right">联系人：</td>
<td>
<input type="text" name="lxr"/><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="wxh"/><br/>
</td>
</tr>
</table>
</form>
<p>
<span class="bc" onclick="saveUpdateCustomPage()">保存</span>
<span onclick="closeUpdateCustomDiv()">取消</span>
</p>
</div>
</div>客户信息管理子页面js代码：
function loadPage(rows,page){
$.ajax({
url:'customList',
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='8%'>"+o.khbh+"</td>";
row +="<td width='15%'>"+o.ycdw+"</td>";
row +="<td width='8%'>"+o.lxr+"</td>";
row +="<td width='12%'>"+o.lxdh+"</td>";
row +="<td width='15%'>"+o.lxdz+"</td>";
row +="<td width='15%'>"+o.wxh+"</td>";
row +="<td width=''>";
row +="<button class='xg' onclick='showUpdateCustomDiv(this)'>修改</button> ";
row +="<button class='sc' onclick='showDeleteCustomDiv(this,"+o.khbh+")'>删除</button>";
row +="</td></tr>";
});
$(".list").html(row);
$.ajax({
url:'customPages',
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(){
showAddCustomDiv();
});
});
function showAddCustomDiv(button){
$(".addCustomDiv").fadeIn(1000);
$(".addCustomDiv form input[name='ycdw']").focus();
}
function closeAddCustomDiv(){
$(".addCustomDiv form input").val('');
$(".addCustomDiv").fadeOut();
}
function checkAddCustom(){
var ycdw = $(".addCustomPage input[name='ycdw']").val();
if(ycdw==null||ycdw.length==0){
$("#message").html("请输入用车单位！");
var left = $("#message").width()/2;
var offsetTop = $(".addCustomPage").offset().top;
var offsetLeft = $(".addCustomPage").offset().left;
$("#message").css("left",offsetLeft+$(".addCustomPage").width()/2-left-20);
$("#message").css("top",offsetTop+70);
$("#message").fadeIn(1000);
messageOut();
$(".addCustomPage input[name='ycdw']").focus();
return false;
}
var lxr = $(".addCustomPage input[name='lxr']").val();
if(lxr==null||lxr.length==0){
$("#message").html("请输入客户联系人！");
var left = $("#message").width()/2;
var offsetTop = $(".addCustomPage").offset().top;
var offsetLeft = $(".addCustomPage").offset().left;
$("#message").css("left",offsetLeft+$(".addCustomPage").width()/2-left-20);
$("#message").css("top",offsetTop+70);
$("#message").fadeIn(1000);
messageOut();
$(".addCustomPage input[name='lxr']").focus();
return false;
}
var lxdh = $(".addCustomPage input[name='lxdh']").val();
if(lxdh==null||lxdh.length!=11){
$("#message").html("手机号必须11位号码！");
var left = $("#message").width()/2;
var offsetTop = $(".addCustomPage").offset().top;
var offsetLeft = $(".addCustomPage").offset().left;
$("#message").css("left",offsetLeft+$(".addCustomPage").width()/2-left-20);
$("#message").css("top",offsetTop+70);
$("#message").fadeIn(1000);
messageOut();
$(".addCustomPage input[name='lxdh']").focus();
return false;
}
var lxdz = $(".addCustomPage input[name='lxdz']").val();
if(lxdz==null||lxdz.length==0){
$("#message").html("请输入客户联系地址！");
var left = $("#message").width()/2;
var offsetTop = $(".addCustomPage").offset().top;
var offsetLeft = $(".addCustomPage").offset().left;
$("#message").css("left",offsetLeft+$(".addCustomPage").width()/2-left-20);
$("#message").css("top",offsetTop+70);
$("#message").fadeIn(1000);
messageOut();
$(".addCustomPage input[name='lxdz']").focus();
return false;
}
var wxh = $(".addCustomPage input[name='wxh']").val();
if(wxh==null||wxh.length==0){
$("#message").html("请输入客户微信号！");
var left = $("#message").width()/2;
var offsetTop = $(".addCustomPage").offset().top;
var offsetLeft = $(".addCustomPage").offset().left;
$("#message").css("left",offsetLeft+$(".addCustomPage").width()/2-left-20);
$("#message").css("top",offsetTop+70);
$("#message").fadeIn(1000);
messageOut();
$(".addCustomPage input[name='wxh']").focus();
return false;
}
return true;
}
function saveAddCustomPage(){
if(checkAddCustom()){
var formData = $(".addCustomDiv form").serialize();
$.ajax({
url:'saveAddCustom',
type:'post',
data:formData,
async:false,
success:function(data){
if(data!=0){
$("#message").html("添加成功！");
var left = $("#message").width()/2;
var offsetTop = $(".addCustomPage").offset().top;
var offsetLeft = $(".addCustomPage").offset().left;
$("#message").css("left",offsetLeft+$(".addCustomPage").width()/2-left-20);
$("#message").css("top",offsetTop+70);
$("#message").fadeIn(1000);
messageOut();
customList();
}else{
$("#message").html("添加失败！");
var left = $("#message").width()/2;
var offsetTop = $(".addCustomPage").offset().top;
var offsetLeft = $(".addCustomPage").offset().left;
$("#message").css("left",offsetLeft+$(".addCustomPage").width()/2-left-20);
$("#message").css("top",offsetTop+70);
$("#message").fadeIn(1000);
messageOut();
}
}
});
}
}
function showUpdateCustomDiv(button){
var khbh = $(button).parent().parent().children(":eq(1)").text();
var ycdw = $(button).parent().parent().children(":eq(2)").text();
var lxr = $(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 wxh = $(button).parent().parent().children(":eq(6)").text();
$(".updateCustomDiv form input[name='khbh']").val(khbh);
$(".updateCustomDiv form input[name='ycdw']").val(ycdw);
$(".updateCustomDiv form input[name='lxr']").val(lxr);
$(".updateCustomDiv form input[name='lxdh']").val(lxdh);
$(".updateCustomDiv form input[name='lxdz']").val(lxdz);
$(".updateCustomDiv form input[name='wxh']").val(wxh);
$(".updateCustomDiv").fadeIn(1000);
$(".updateCustomDiv form input[name='ycdw']").focus();
}
function closeUpdateCustomDiv(){
$(".updateCustomDiv form input").val('');
$(".updateCustomDiv").fadeOut(1000);
}
function checkUpdateCustom(){
var ycdw = $(".updateCustomPage input[name='ycdw']").val();
if(ycdw==null||ycdw.length==0){
$("#message").html("请输入用车单位！");
var left = $("#message").width()/2;
var offsetTop = $(".updateCustomPage").offset().top;
var offsetLeft = $(".updateCustomPage").offset().left;
$("#message").css("left",offsetLeft+$(".updateCustomPage").width()/2-left-20);
$("#message").css("top",offsetTop+70);
$("#message").fadeIn(1000);
messageOut();
$(".updateCustomPage input[name='ycdw']").focus();
return false;
}
var lxr = $(".updateCustomPage input[name='lxr']").val();
if(lxr==null||lxr.length==0){
$("#message").html("请输入客户联系人！");
var left = $("#message").width()/2;
var offsetTop = $(".updateCustomPage").offset().top;
var offsetLeft = $(".updateCustomPage").offset().left;
$("#message").css("left",offsetLeft+$(".updateCustomPage").width()/2-left-20);
$("#message").css("top",offsetTop+70);
$("#message").fadeIn(1000);
messageOut();
$(".updateCustomPage input[name='lxr']").focus();
return false;
}
var lxdh = $(".updateCustomPage input[name='lxdh']").val();
if(lxdh==null||lxdh.length!=11){
$("#message").html("手机号必须11位号码！");
var left = $("#message").width()/2;
var offsetTop = $(".updateCustomPage").offset().top;
var offsetLeft = $(".updateCustomPage").offset().left;
$("#message").css("left",offsetLeft+$(".updateCustomPage").width()/2-left-20);
$("#message").css("top",offsetTop+70);
$("#message").fadeIn(1000);
messageOut();
$(".updateCustomPage input[name='lxdh']").focus();
return false;
}
var lxdz = $(".updateCustomPage input[name='lxdz']").val();
if(lxdz==null||lxdz.length==0){
$("#message").html("请输入客户联系地址！");
var left = $("#message").width()/2;
var offsetTop = $(".updateCustomPage").offset().top;
var offsetLeft = $(".updateCustomPage").offset().left;
$("#message").css("left",offsetLeft+$(".updateCustomPage").width()/2-left-20);
$("#message").css("top",offsetTop+70);
$("#message").fadeIn(1000);
messageOut();
$(".updateCustomPage input[name='lxdz']").focus();
return false;
}
var wxh = $(".updateCustomPage input[name='wxh']").val();
if(wxh==null||wxh.length==0){
$("#message").html("请输入客户微信号！");
var left = $("#message").width()/2;
var offsetTop = $(".updateCustomPage").offset().top;
var offsetLeft = $(".updateCustomPage").offset().left;
$("#message").css("left",offsetLeft+$(".updateCustomPage").width()/2-left-20);
$("#message").css("top",offsetTop+70);
$("#message").fadeIn(1000);
messageOut();
$(".updateCustomPage input[name='wxh']").focus();
return false;
}
return true;
}
function saveUpdateCustomPage(){
if(checkUpdateCustom()){
var formData = $(".updateCustomDiv form").serialize();
$.ajax({
url:'saveUpdateCustom',
type:'post',
data:formData,
async:false,
success:function(data){
if(data!=0){
$("#message").html("修改成功！");
var left = $("#message").width()/2;
var offsetTop = $(".updateCustomPage").offset().top;
var offsetLeft = $(".updateCustomPage").offset().left;
$("#message").css("left",offsetLeft+$(".updateCustomPage").width()/2-left-20);
$("#message").css("top",offsetTop+70);
$("#message").fadeIn(1000);
messageOut();
customList();
}else{
$("#message").html("修改失败！");
var left = $("#message").width()/2;
var offsetTop = $(".updateCustomPage").offset().top;
var offsetLeft = $(".updateCustomPage").offset().left;
$("#message").css("left",offsetLeft+$(".addCustomPage").width()/2-left-20);
$("#message").css("top",offsetTop+70);
$("#message").fadeIn(1000);
messageOut();
}
}
});
}
}
function showDeleteCustomDiv(button,khbh){
$("#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:'deleteCustom',
type:'post',
data:'khbh='+khbh,
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();
customList();
}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;
}
.addCustomDiv{
display:none;
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.3);
}
.addCustomPage{
width:370px;
border-radius:5px;
background-color:#fff;
margin:200px auto;
box-shadow:3px 3px 3px 3px #555;
}
.addCustomPage input{
outline:none;
line-height:25px;
}
.addCustomPage>h2{
border-bottom:1px solid #ccc;
padding:15px 20px;
color:#fff;
background-color:#0cf;
}
.addCustomPage h2 span{
float:right;
color:#fff;
margin-top:-10px;
margin-right:-5px;
cursor:pointer;
}
.addCustomPage table{
color:#666;
font-size:14px;
margin:10px auto;
}
.addCustomPage table input{
border:1px solid #ccc;
padding-top:3px;
padding-left:10px;
border-radius:2px;
}
.addCustomPage table tr{
line-height:50px;
}
.addCustomPage p{
border-top:1px solid #ccc;
padding:15px 15px;
overflow: auto;
}
.addCustomPage 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;
}
.addCustomPage p .bc{
background-color:#0cf;
color:#fff;
}
.updateCustomDiv{
display:none;
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.3);
}
.updateCustomPage{
width:370px;
border-radius:5px;
background-color:#fff;
margin:200px auto;
box-shadow:3px 3px 3px 3px #555;
}
.updateCustomPage input{
outline:none;
line-height:25px;
}
.updateCustomPage>h2{
border-bottom:1px solid #ccc;
padding:15px 20px;
color:#fff;
background-color:#0cf;
}
.updateCustomPage h2 span{
float:right;
color:#fff;
margin-top:-10px;
margin-right:-5px;
cursor:pointer;
}
.updateCustomPage table{
color:#666;
font-size:14px;
margin:10px auto;
}
.updateCustomPage table input{
border:1px solid #ccc;
padding-top:3px;
padding-left:10px;
border-radius:2px;
}
.updateCustomPage table tr{
line-height:50px;
}
.updateCustomPage p{
border-top:1px solid #ccc;
padding:15px 15px;
overflow: auto;
}
.updateCustomPage 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;
}
.updateCustomPage 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;
}
1044
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
