J2EE 之easyui+jsp+JDBC模式（四）

（一）创建项目登录页

（二）实现数据显示页

（三）添加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&#