信息管理需求分析: 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'" onblur="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)" onclick="reloadPage()" class="easyui-linkbutton" plain="true" iconCls="icon-reload">重置</a></td> <td></td> <td><a href="javascript:void(0)" onclick="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" onblur="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" onclick="deleteCustomer()">删除</button></td> <td></td> <td><button class="easyui-linkbutton" onclick="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,formatter : function(value,row,index) {
if (row.sex == 1) {
return "男";
} else {
return "女";
}
}
},{
field : 'age',title : '年龄',halign : 'center'
},{
field : 'phone',title : '电话号码',width : 70,{
field : 'address',title : '地址',width : 200,{
field : 'level',title : '等级',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',index) {
return "<button onclick='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
我是菜鸟，我在路上。
