信息管理需求分析: 1.对自身的信息进行修改
2.添加客户信息(客户无法注册，只能由员工添加)
3.查找，删除，修改客户信息
页面准备: 1.添加客户信息页面
2.管理客户信息页面
3.修改自身信息
添加信息其实就是一个表单，在界面上我真的没有花多少功夫。
唯一有点技术含量的就是那个提醒这个账号是否已经被注册，使用了ajax和onblur事件，在EasyUI中的校验控件真的很强大，省事多了。
<form id="ff" method="post" action="UserInfo_register">
<table>
<tr>
<td><label for="name">姓名:</label></td>
<td><input class="easyui-validatebox" type="text" name="cname"
data-options="required:true" /></td>
<td><label for="email">账号Email:</label></td>
<td style="float:right;"><input class="easyui-validatebox" type="text" name="email" id="email"
data-options="validType:'email'" οnblur="validEmail()"/><label id="viaEmail"></label></td>
</tr>
<tr>
<td><label for="name">年龄:</label></td>
<td><input class="easyui-validatebox" type="text" name="age"
data-options="required:true" /></td>
<td><label for="email">密码:</label></td>
<td><input class="easyui-validatebox" type="text" name="passwords" /></td>
</tr>
<tr>
<td><label for="name">性别:</label></td>
<td><select id="sex" name="sex" style="width:100%;">
<option value="1">男</option>
<option value="0">女</option>
</select></td>
<td><label for="email">客户等级:</label></td>
<td><select id="level" name="level" style="width:100%;">
<option value="0">A</option>
<option value="1">B</option>
<option value="2">C</option>
<option value="3">D</option>
<option value="4">E</option>
</select></td>
</tr>
<tr>
<td><label for="name">电话号码:</label></td>
<td><input class="easyui-validatebox" type="text" name="phone"
data-options="required:true"
data-options="validType:'length[7,11]'" /></td>
<td><label for="email">地址:</label></td>
<td><input class="easyui-validatebox" type="text" name="address" /></td>
</tr>
<tr> <td></td>
<td><a href="javascript:void(0)" οnclick="reloadPage()" class="easyui-linkbutton" plain="true" iconCls="icon-reload">重置</a></td>
<td></td>
<td><a href="javascript:void(0)" οnclick="addUserInfo()" class="easyui-linkbutton" plain="true" iconCls="icon-ok">确认</a></td>
</tr>
</table>
</form>
脚本
<script>
/*提交验证表单*/
function validEmail(){
var email=$('#email').val();
if(email.length>=5){
$.post("UserInfo_vailEmail", { "email": email },
function(data){
if(data=='1'){
$('#viaEmail').html('<font size=\"2\" color=\"red\">对不起,已注册!</font>');
}else{
$('#viaEmail').html('<font size=\"2\" color=\"green\">恭喜,可以使用!</font>');
}
}, "json");
}else{
}
}
function addUserInfo(){
var isValid = $('#ff').form('validate');
if (!isValid){
return false;
}
$('#ff').form('submit', {
success: function(data){
var data = eval('(' + data + ')');
if(data=='0'){
alert('恭喜您,注册成功!');
reloadPage();
}else{
alert('注册失败,请联系管理人员!');
}
}
});
}
function reloadPage(){
$('#ff').form('reset',{});
$('#viaEmail').html(" ");
}
</script>
后台业务也挺简单的。这里就不多啰嗦了。
之后的管理个人信息也是，需要说明的是在管理客户信息的时候，使用了EasyUI的datagrid控件，说实话，对于后台这一块我完全是小白，之前只是了解，没有深入研究。这次大部分时间都花在了前台的界面和脚本上了，真的很无奈！
一直觉得这真特么烦人，不过慢慢熬，还是过来了，体力活啊体力活！
页面就是这样了，输入姓名是一个输入控件，这里没有加入一个搜索按钮了，当鼠标失去焦点时就根据姓名进行模糊搜索。
因为我觉得一切能简洁就简洁，去访问一些网站觉得设计多么简洁，看起来多么舒畅。
这里没有写分页了，因为自己的原因。
前台分为三个部分，一部分是姓名搜索，一部分是datagrid数据表格，还有一部分页面刚刚打开的时候被隐藏了，点击管理的时候作为dialog弹出来。其实就和修改自身信息一样。
1.搜索部分
<form action="UserInfo_manage" method="post">
<div id="tb" style="padding:3px">
<span>姓名:</span>
<input id="name" name="name" style="line-height:16px;border:1px solid #ccc" οnblur="doSearch()">
</div>
</form>
<table id="custableDiv"></table>3.客户信息管理部分
<div id="userInfoDiv" style="width:520px;height:180px;padding:5px">
<form id="userInfoForm" method="post">
<table id="usesrInfoTab">
<tr>
<td><label for="name">姓名:</label></td>
<td><input class="easyui-validatebox" type="text" name="cname" id="cname"
data-options="required:true" readonly="true"/></td>
<td><label for="email">账号Email:</label></td>
<td style="float:right;"><input class="easyui-validatebox" type="text" name="email" id="email"
data-options="validType:'email'" readonly="true"/><label id="viaEmail"></label></td>
</tr>
<tr>
<td><label for="name">年龄:</label></td>
<td><input class="easyui-validatebox" type="text" name="age" id="age"
data-options="required:true" /></td>
<td><label for="email">密码:</label></td>
<td><input class="easyui-validatebox" type="text" id="password"
name="password" value="******" readonly="true"/></td>
</tr>
<tr>
<td><label for="name">性别:</label></td>
<td><select id="sex" name="sex" id="sex" style="width:100%;">
<option value="1">男</option>
<option value="0">女</option>
</select></td>
<td><label for="email">客户等级:</label></td>
<td><select id="level" name="level" id="level" style="width:100%;">
<option value="0">A</option>
<option value="1">B</option>
<option value="2">C</option>
<option value="3">D</option>
<option value="4">E</option>
</select></td>
</tr>
<tr>
<td><label for="name">电话号码:</label></td>
<td><input class="easyui-validatebox" type="text" name="phone" id="phone"
data-options="required:true"
data-options="validType:'length[7,11]'"/></td>
<td><label for="email">地址:</label></td>
<td><input class="easyui-validatebox" type="text" name="address" id="address"/></td>
</tr>
<tr> <td><input id="uid" name="uid" type="hidden"/></td>
<td><button class="easyui-linkbutton" οnclick="deleteCustomer()">删除</button></td>
<td></td>
<td><button class="easyui-linkbutton" οnclick="modify()">确认修改</button> </td>
</tr>
</table>
</form>
</div>图
接下来就是脚本的舞台了，先说一下思路:在进入这个页面时，首先初始化这三个部分，第一个不用变，第二个需要发送请求至服务器，得到json数据，显示在页面上，而第三部分则初始化为一个dialog被隐藏了。
当点击管理时，datagrid中的一行数据转为json显示在第三部分的dialog上，这个dialog有俩个操作，一个是删除，一个是修改。
初始化脚本
$(function() {
$("#userInfoDiv").dialog({
title : '客户信息管理',
closed : true
});
$("#custableDiv").datagrid({
url : 'UserInfo_manage',
fit : false,//列行都填充
fitColumns : true,//只列填充
pagination : true,
singleSelect : true,
pageSize : 5,
pageList : [5,10,15],
columns : [ [
{
field : 'cname',
title : '姓名',
width : 60,
halign : 'center',
sortable : true,
checkbox : false
},
{
field : 'sex',
title : '性别',
width : 20,
halign : 'center',
formatter : function(value, row, index) {
if (row.sex == 1) {
return "男";
} else {
return "女";
}
}
},
{
field : 'age',
title : '年龄',
width : 20,
halign : 'center'
},
{
field : 'phone',
title : '电话号码',
width : 70,
halign : 'center'
},
{
field : 'address',
title : '地址',
width : 200,
halign : 'center'
},
{
field : 'level',
title : '等级',
width : 20,
halign : 'center',
formatter : function(value, row,index) {
if(value==0){
return "A";
}else if(value==1){
return "B";
}else if(value==2){
return "C";
}else if(value==3){
return "D";
}else if(value==4){
return "E";
}else{
return "";
}
}
},
{
field : 'operation',
title : '操作',
width : 50,
align : 'center',
formatter : function(value, row,index) {
return "<button οnclick='modifyUserinfo("
+ JSON.stringify(row)
+ ")'>管理</button>";
}
} ] ],
});
});当点击管理时，将json数据显示到dialog中。
function modifyBloginfo(row) {
$('#uid').val(row.uid);
$('#cname').val(row.cname);
$('#email').val(row.email);
$('#age').val(row.age);
$('#phone').val(row.phone);
$('#sex').val(row.sex);
$('#address').val(row.address);
$('#level').val(row.level);
$("#userInfoDiv").dialog("open", true);
}
删除和修改就是提交表单，只不过url不同，原理都是通过自动注参在后台获取一个UserInfo对象，里面的属性值和前台页面的输入控件中name=属性名的值一样。删除业务就不说了，修改我觉得麻烦，就是先删除再添加新的。因为要判断哪个没变哪个变了，而且还要判断是否为空，整个写起来非常麻烦。
脚本代码:
function modify() {
$('#userInfoForm').form({
url: 'UserInfo_modifyc',
success : function(data) {
var data = eval('(' + data + ')');
if (data == '0') {
alert('恭喜您,修改成功!');
$('#userInfoDiv').dialog("close", true);
$("#custableDiv").datagrid('reload', {});
}else{
alert('修改失败,请联系管理人员!');
}
}
});
}
function deleteCustomer(){
var uid=$('#uid').val();
$('#userInfoForm').form({
url: 'UserInfo_delete',
success : function(data) {
var data = eval('(' + data + ')');
//alert(data);
if (data == '0') {
alert('恭喜您,删除成功!');
$('#userInfoDiv').dialog("close", true);
$('#custableDiv').datagrid('reload', {});
}else{
alert('删除失败,请联系管理人员!');
}
}
});
}对了，最后还有一个根据姓名搜索的功能，这个是使用了datagrid的load事件。只需要传一个参数过去就行，在配置文件只需要判断一下cname是否为空即可。
/*当几点查询的时候，取到数据，然后进行查询*/
function doSearch() {
$('#custableDiv').datagrid('load', {
cname : $('#name').val()
});
}
推荐一个网站 http://www.runoob.com/jeasyui/jeasyui-form-form1.html
我是菜鸟，我在路上。
扫一扫
563
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
