(一)创建项目登录页
(二)实现数据显示页
(三)添加datagrid控件
(四)实现添加功能页
(五)实现更新功能页
(六)实现删除功能页
实现添加数据功能
1、在listlogin.html页面中,单击用户单击datagrid表格工具栏上的“添加”按钮即弹出一个添加管理员的对话框,代码如下。
function insert(){
if($("#dd") != null){//判断页面中是滞存在id等于dd元素,若存则删除它
$("#dd").remove();
}
$("body").append("<div id='dd'></div>");//在页面的body元素中添加一个div元素,且它的id="dd"
$('#dd').dialog({ //定义一个弹出一个窗口
title: '添加管理员', //窗口的标题
width: 280, //窗口的宽度
height: 140, //窗口的高度
closed: false, //窗口没有显示关闭按钮
cache: false, //没有设置缓冲
modal: true ,//设置窗口模式为真的
buttons:[{ //为窗口设置两个按钮,即登录和重置两个按钮
text:'添加',
handler:function(){//当单击登录按钮时,调用send()方法进行处理表单
$('#ff').form('submit', {
url:"insertlogin.jsp" ,//当用于单击提交按钮时,把表单数据提交到后台login.jsp进行处理
onSubmit: function(){
//在这里可以对用户输入的信息进行验证操作
if($("#name").val()==""){//判断用户名输入框是否为空,若为空则提示用户,并返回到登录界面
$.messager.alert('错误','用户名不能为空');
return false;
}
if($("#pass").val()==""){//判断密码输入框是否为空,若为空则提示用户,并返回到登录界面
$.messager.alert('错误','密码不能为空');
return false;
}
},
success:function(data){ //若提交成功则弹出对话框提示用户
$('#dd').dialog("close");//关闭当前添加窗口
$('#dg').datagrid("reload");//重新装入表格的内容
}
});
}
},{
text:'关闭',
handler:function(){//当单击重置按钮所要执行的任务
$('#dd').dialog("close");//关闭当前添加窗口
$('#dg').datagrid("reload");//重新装入表格的内容
}
}]
});
//str变量是构建添加管理员表单
var str="";
str&#