J2EE 之easyUI+jsp+JDBC模式（二）

（一）创建项目登录页

（二）实现数据显示页

（三）添加datagrid控件

（四）实现添加功能页

（五）实现更新功能页

（六）实现删除功能页

创建数据显示页面

1、在WebContext目录中创建listlogin.html页面，如下图所示。

J2EE 之easyUI+jsp+JDBC模式（二）

（1）在listlogin.html文件的<head>和</head>中引入easyui的样式表和相关的函数库，如下代码

完整代码如下：

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

$(function(){

});

</script>

</head>

<body>

</body>

</html>

（2）在listlogin.html文件中的<body>和</body>中输入如下的内容。作为显示数据表login的位置，

（3）在$(function(){ });在左花括号中输入如下代码。

$('#dg').datagrid({

url:'listlogin.jsp', //这是处理数据的后台程序。该程序必须返回给我们所需要的json数据格式,如：

columns:[[ //columns是定义datagrid的表格头

{field:'id',title:'编号',width:100}, //表格头部的列标题，其中field的值id,必须与后台程序返回的数据中存在id.

{field:'name',title:'用户名',width:100},

{field:'pass',title:'密码',width:100}

]]

});

listlogin.html文件的完整代码如下：

<!DOCTYPE html>

<html>

<head>

<title>管理员信息列表</title>

$(function(){

//利用easyui的datagrid组件以表格方式显示数据表login的内容

$('#dg').datagrid({

url:'listlogin.jsp', //这是处理数据的后台程序

columns:[[ //columns是定义datagrid张爱玲折表格头

{field:'id',title:'编号',width:100}, //表格头部的列标题

{field:'name',title:'用户名',width:100},

{field:'pass',title:'密码',width:100}

]]

});

})

</script>

</head>

<body>

</body>

</html>

2、在后台服务器中创建listlogin.jsp文件，用于处理用户的请求，并把数据表login中的所有记录转化为json数据格式后，再传给前台页面listlogin.html。在WebContext目录中创建listlogin.jsp文件，如下图所示。

J2EE 之easyUI+jsp+JDBC模式（二）

listlogin.jsp文件的代码如下。

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<%@ page import="java.sql.*" %>

<%!

private static final String DBDRIVER="org.gjt.mm.mysql.Driver";

private static final String DBURL="jdbc:mysql://localhost:3306/stsc";

private static final String DBUSER="root";

private static final String DBPASS="admin";

private static Connection conn=null;

try{

Class.forName(DBDRIVER);

conn=DriverManager.getConnection(DBURL, DBUSER, DBPASS);

String sql="select id,name,pass from login";

PreparedStatement psta=conn.prepareStatement(sql);

ResultSet rs=psta.executeQuery();

//str是构建json格式的字符串，其中json数据格式为：[{"id":1,"name":"admin","pass":"admin"},{"id":2,"name":"qin","pass":"qin"}]

String str="[";

while(rs.next()){//通过这个循环是把数据表中读取到的记录，逐条来构建成javascript对象{"id":1,"name":"admin","pass":"admin"}

if(str.length()>1){//凑数如不是第一个对象则要在对象后面加“,"

str+=",";

}

str+="{";

str+="\"id\":"+rs.getInt(1)+",\"name\":\""+rs.getString(2)+"\",\"pass\":\""+rs.getString(3)+"\"";

str+="}";

}

str+="]";

rs.close();//关闭rs

psta.close();

conn.close();

out.println(str);//向客户端输出json格式数据。

}catch(Exception e){

return ;

}

listlogin.jsp文件主要完成连接到mysql数据库stsc中把login数据表中所有记录读取出来，把记录逐条转换成javaScript的对象，然后把输出到客户端listlogin.html页面中。运行listlogin.jsp得到如下图所示的结果。

J2EE 之easyUI+jsp+JDBC模式（二）

J2EE 之easyUI+jsp+JDBC模式（二）

相关推荐