图解JSP页面教程
2015-03-25 14:41
197 查看
所有Demo可以下载，链接在尾部。
一 简单JSP页面
1 hello world
代码
<html>
<head>
<title>第一个JSP程序</title>
</head>
<body>
<%
out.println("Hello World!");
%>
</body>
</html>
效果：
2 JSP生命周期
代码
<%@ page contentType="text/html; charset=GB2312" %>
<html><head><title>life.jsp</title></head><body>
<%!
private int initVar=0;
private int serviceVar=0;
private int destroyVar=0;
%>
<%!
public void jspInit(){
initVar++;
System.out.println("jspInit(): JSP被初始化了"+initVar+"次");
}
public void jspDestroy(){
destroyVar++;
System.out.println("jspDestroy(): JSP被销毁了"+destroyVar+"次");
}
%>
<%
serviceVar++;
System.out.println("_jspService(): JSP共响应了"+serviceVar+"次请求");
String content1="初始化次数 : "+initVar;
String content2="响应客户请求次数 : "+serviceVar;
String content3="销毁次数 : "+destroyVar;
%>
<h1><%=content1 %></h1>
<h1><%=content2 %></h1>
<h1><%=content3 %></h1>
</body></html>
效果：
3 获取自己的IP
代码：
<html>
<head><title>Hello World</title></head>
<body>
Hello World!<br/>
<%
out.println("Your IP address is " + request.getRemoteAddr());
%>
</body>
</html>
效果：
4 获取日期
代码
<html>
<head><title>A Comment Test</title></head>
<body>
<p>
Today's date: <%= (new java.util.Date()).toLocaleString()%>
</p>
</body>
</html>
效果：
5 if-else
代码
<%! int day = 3; %>
<html>
<head><title>IF...ELSE Example</title></head>
<body>
<% if (day == 1 | day == 7) { %>
<p> Today is weekend</p>
<% } else { %>
<p> Today is not weekend</p>
<% } %>
</body>
</html>
6 switch
<%! int day = 3; %>
<html>
<head><title>SWITCH...CASE Example</title></head>
<body>
<%
switch(day) {
case 0:
out.println("It\'s Sunday.");
break;
case 1:
out.println("It\'s Monday.");
break;
case 2:
out.println("It\'s Tuesday.");
break;
case 3:
out.println("It\'s Wednesday.");
break;
case 4:
out.println("It\'s Thursday.");
break;
case 5:
out.println("It\'s Friday.");
break;
default:
out.println("It's Saturday.");
}
%>
</body>
</html>
效果：
7 for
<%! int fontSize; %>
<html>
<head><title>FOR LOOP Example</title></head>
<body>
<%for ( fontSize = 1; fontSize <= 3; fontSize++){ %>
<font color="green" size="<%= fontSize %>">
JSP Tutorial
</font><br />
<%}%>
</body>
</html>
效果：
8 include
<html>
<head>
<title>The include Action Example</title>
</head>
<body>
<center>
<h2>The include action Example</h2>
<jsp:include page="date.jsp" flush="true" />
</center>
</body>
</html>
效果：
9 使用Bean
建立TestBean.java,
package action;
public class TestBean {
private String message = "No message specified";
public String getMessage() {
return(message);
}
public void setMessage(String message) {
this.message = message;
}
}
然后用javac命令编译为class文件；
测试jsp页：
<html>
<head>
<title>Using JavaBeans in JSP</title>
</head>
<body>
<center>
<h2>Using JavaBeans in JSP</h2>
<jsp:useBean id="test" class="action.TestBean" />
<jsp:setProperty name="test"
property="message"
value="Hello JSP..." />
<p>Got message....</p>
<jsp:getProperty name="test" property="message" />
</center>
</body>
</html>
把class文件拷贝到如下目录；
运行测试页，结果如下；
二 项目上的简单JSP页
1 一个精简登陆JSP，未连数据库
<%@ page language="java" contentType="text/html;charset=gb2312"%>
<html>
<head>
<title>登陆</title>
</head>
<body>
<form method="POST" name="frmLogin" action="LoginServlet">
<h1 align="center">用户登录</h1><br />
<center>
<table border=1>
<tr>
<td>用户名：</td>
<td>
<input type="text" name="username" value="Your name" size="20" maxlength="20" onfocus="if (this.value=='Your name') this.value='';" />
</td>
</tr>
<tr>
<td>密 码：</td>
<td>
<input type="password" name="password" value="Your password" size="20" maxlength="20" onfocus="if (this.value=='Your password') this.value='';" />
</td>
</tr>
<tr>
<td>
<input type="submit" name="Submit" value="提交" onClick="return validateLogin()" />
</td>
<td>
<input type="reset" name="Reset" value="重置" />
</td>
</tr>
</table>
</center>
</form>
<script language="javascript">
function validateLogin(){
var sUserName = document.frmLogin.username.value ;
var sPassword = document.frmLogin.password.value ;
if ((sUserName =="") || (sUserName=="Your name")){
alert("请输入用户名!");
return false ;
}
if ((sPassword =="") || (sPassword=="Your password")){
alert("请输入密码!");
return false ;
}
}
</script>
</body>
</html>
效果：
2 三个的登陆页
<%@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%>
<%@ page import="java.util.*" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>登录页面</title>
</head>
<body>
<form name="loginForm" method="post" action="judgeUser.jsp">
<table>
<tr>
<td>用户名:<input type="text" name="userName" id="userName"></td>
</tr>
<tr>
<td>密码:<input type="password" name="password" id="password"></td>
</tr>
<tr>
<td><input type="submit" value="登录" style="background-color:pink"><input type="reset" value="重置" style="background-color:red"></td>
</tr>
</table>
</form>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%>
<%@ page import="java.util.*" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>身份验证</title>
</head>
<body>
<%
request.setCharacterEncoding("GB18030");
String name = request.getParameter("userName");
String password = request.getParameter("password");
if(name.equals("abc")&& password.equals("123"))
{
%>
<jsp:forward page="afterLogin.jsp">
<jsp:param name="userName" value="<%=name%>"/>
</jsp:forward>
<%
}
else
{
%>
<jsp:forward page="login.jsp"/>
<%
}
%>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>登录成功</title>
</head>
<body>
<%
request.setCharacterEncoding("GB18030");
String name = request.getParameter("userName");
out.println("欢迎你:" + name);
%>
</body>
</html>
总共3个jsp文件，第一个是login.jsp,第2个是judgeUser.jsp,第3个是afterLogin.jsp
效果：
3 一个简单留言板
首先在MySQL中建立测试数据；如下图，有时候难免也会输入错sql；
拷贝MySQL安装目录下的JDBC驱动到tomcat的lib目录；
看了图图，再看下码码；
<%@ page contentType="text/html;charset=gb2312"%>
<%@ page import="java.sql.*"%>
<html>
<head>
<title>JSP+JDBC 留言管理程序——登陆</title>
</head>
<body>
<center>
<h1>留言管理范例 —— JSP + JDBC实现</h1>
<hr>
<br>
<%
// 编码转换
request.setCharacterEncoding("GB2312") ;
if(session.getAttribute("uname")==null)
{
// 用户已登陆
%>
<%!
String host="localhost"; //数据库主机
String database="test"; //数据库名
String user="root"; //用户名
String pass="123456ab"; //口令
java.sql.Connection conn; //数据库连接对象
java.sql.Statement pstmt; //语句对象
java.sql.ResultSet rs; //结果集对象
%>
<%
// 如果有内容，则修改变量i，如果没有，则根据i的值进行无内容提示
int i = 0 ;
String sql = null;
String keyword = request.getParameter("keyword") ;
// out.println(keyword) ;
if(keyword==null)
{
// 没有任何查询条件
sql = "SELECT id,title,author,content FROM note" ;
}
else
{
// 有查询条件
sql = "SELECT id,title,author,content FROM note WHERE title like ? or author like ? or
content like ?" ;
}
try
{
Class.forName("com.mysql.jdbc.Driver");
conn= java.sql.DriverManager.getConnection("jdbc:mysql://"+host+"/"+database,user,pass);
pstmt=conn.createStatement
(java.sql.ResultSet.TYPE_SCROLL_INSENSITIVE,java.sql.ResultSet.CONCUR_READ_ONLY);
rs=pstmt.executeQuery (sql);
// 如果存在查询内容，则需要设置查询条件
if(keyword!=null)
{
// 存在查询条件
//pstmt.setString(1,"%"+keyword+"%") ;
//pstmt.setString(2,"%"+keyword+"%") ;
//pstmt.setString(3,"%"+keyword+"%") ;
}
//rs = pstmt.executeQuery() ;
%>
<form action="list_notes.jsp" method="POST">
请输入查询内容：<input type="text" name="keyword">
<input type="submit" value="查询">
</form>
</h3><a href="insert.jsp">添加新留言</a></h3>
<table width="80%" border="1">
<tr>
<td>留言ID</td>
<td>标题</td>
<td>作者</td>
<td>内容</td>
<td>删除</td>
</tr>
<%
while(rs.next())
{
i++ ;
// 进行循环打印，打印出所有的内容，以表格形式
// 从数据库中取出内容
int id = rs.getInt(1) ;
String title = rs.getString(2) ;
String author = rs.getString(3) ;
String content = rs.getString(4) ;
if(keyword!=null)
{
// 需要将数据返红
title = title.replaceAll(keyword,"<font color=\"red\">"+keyword+"</font>")
;
author = author.replaceAll(keyword,"<font color=\"red\">"+keyword
+"</font>") ;
content = content.replaceAll(keyword,"<font color=\"red\">"+keyword
+"</font>") ;
}
%>
<tr>
<td><%=id%></td>
<td><a href="update.jsp?id=<%=id%>"><%=title%></a></td>
<td><%=author%></td>
<td><%=content%></td>
<td><a href="delete_do.jsp?id=<%=id%>">删除</a></td>
</tr>
<%
}
// 判断i的值是否改变，如果改变，则表示有内容，反之，无内容
if(i==0)
{
// 进行提示
%>
<tr>
<td colspan="5">没有任何内容！！！</td>
</tr>
<%
}
%>
</table>
<%
rs.close() ;
pstmt.close() ;
conn.close() ;
}
catch(Exception e)
{}
%>
<%
}
else
{
// 用户未登陆，提示用户登陆，并跳转
response.setHeader("refresh","2;URL=login.jsp") ;
%>
您还未登陆，请先登陆！！！<br>
两秒后自动跳转到登陆窗口！！！<br>
如果没有跳转，请按<a href="login.jsp">这里</a>！！！<br>
<%
}
%>
</center>
</body>
</html>
RUN；
4 一个jquery easy ui 的GRID
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/demo/demo.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>
</head>
<body>
<table id="dg" title="My Users" class="easyui-datagrid" style="width:550px;height:250px"
url=""
toolbar="#toolbar"
rownumbers="true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<th field="firstname" width="50">First Name</th>
<th field="lastname" width="50">Last Name</th>
<th field="phone" width="50">Phone</th>
<th field="email" width="50">Email</th>
</tr>
</thead>
</table>
<div id="toolbar">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove
User</a>
</div>
</body>
</html>
当前没有数据，easy ui 可以不要js简单创建视觉效果不错的GRI
代码下载：
http://pan.baidu.com/s/1pJyrHxT
一 简单JSP页面
1 hello world
代码
<html>
<head>
<title>第一个JSP程序</title>
</head>
<body>
<%
out.println("Hello World!");
%>
</body>
</html>
效果：
2 JSP生命周期
代码
<%@ page contentType="text/html; charset=GB2312" %>
<html><head><title>life.jsp</title></head><body>
<%!
private int initVar=0;
private int serviceVar=0;
private int destroyVar=0;
%>
<%!
public void jspInit(){
initVar++;
System.out.println("jspInit(): JSP被初始化了"+initVar+"次");
}
public void jspDestroy(){
destroyVar++;
System.out.println("jspDestroy(): JSP被销毁了"+destroyVar+"次");
}
%>
<%
serviceVar++;
System.out.println("_jspService(): JSP共响应了"+serviceVar+"次请求");
String content1="初始化次数 : "+initVar;
String content2="响应客户请求次数 : "+serviceVar;
String content3="销毁次数 : "+destroyVar;
%>
<h1><%=content1 %></h1>
<h1><%=content2 %></h1>
<h1><%=content3 %></h1>
</body></html>
效果：
3 获取自己的IP
代码：
<html>
<head><title>Hello World</title></head>
<body>
Hello World!<br/>
<%
out.println("Your IP address is " + request.getRemoteAddr());
%>
</body>
</html>
效果：
4 获取日期
代码
<html>
<head><title>A Comment Test</title></head>
<body>
<p>
Today's date: <%= (new java.util.Date()).toLocaleString()%>
</p>
</body>
</html>
效果：
5 if-else
代码
<%! int day = 3; %>
<html>
<head><title>IF...ELSE Example</title></head>
<body>
<% if (day == 1 | day == 7) { %>
<p> Today is weekend</p>
<% } else { %>
<p> Today is not weekend</p>
<% } %>
</body>
</html>
6 switch
<%! int day = 3; %>
<html>
<head><title>SWITCH...CASE Example</title></head>
<body>
<%
switch(day) {
case 0:
out.println("It\'s Sunday.");
break;
case 1:
out.println("It\'s Monday.");
break;
case 2:
out.println("It\'s Tuesday.");
break;
case 3:
out.println("It\'s Wednesday.");
break;
case 4:
out.println("It\'s Thursday.");
break;
case 5:
out.println("It\'s Friday.");
break;
default:
out.println("It's Saturday.");
}
%>
</body>
</html>
效果：
7 for
<%! int fontSize; %>
<html>
<head><title>FOR LOOP Example</title></head>
<body>
<%for ( fontSize = 1; fontSize <= 3; fontSize++){ %>
<font color="green" size="<%= fontSize %>">
JSP Tutorial
</font><br />
<%}%>
</body>
</html>
效果：
8 include
<html>
<head>
<title>The include Action Example</title>
</head>
<body>
<center>
<h2>The include action Example</h2>
<jsp:include page="date.jsp" flush="true" />
</center>
</body>
</html>
效果：
9 使用Bean
建立TestBean.java,
package action;
public class TestBean {
private String message = "No message specified";
public String getMessage() {
return(message);
}
public void setMessage(String message) {
this.message = message;
}
}
然后用javac命令编译为class文件；
测试jsp页：
<html>
<head>
<title>Using JavaBeans in JSP</title>
</head>
<body>
<center>
<h2>Using JavaBeans in JSP</h2>
<jsp:useBean id="test" class="action.TestBean" />
<jsp:setProperty name="test"
property="message"
value="Hello JSP..." />
<p>Got message....</p>
<jsp:getProperty name="test" property="message" />
</center>
</body>
</html>
把class文件拷贝到如下目录；
运行测试页，结果如下；
二 项目上的简单JSP页
1 一个精简登陆JSP，未连数据库
<%@ page language="java" contentType="text/html;charset=gb2312"%>
<html>
<head>
<title>登陆</title>
</head>
<body>
<form method="POST" name="frmLogin" action="LoginServlet">
<h1 align="center">用户登录</h1><br />
<center>
<table border=1>
<tr>
<td>用户名：</td>
<td>
<input type="text" name="username" value="Your name" size="20" maxlength="20" onfocus="if (this.value=='Your name') this.value='';" />
</td>
</tr>
<tr>
<td>密 码：</td>
<td>
<input type="password" name="password" value="Your password" size="20" maxlength="20" onfocus="if (this.value=='Your password') this.value='';" />
</td>
</tr>
<tr>
<td>
<input type="submit" name="Submit" value="提交" onClick="return validateLogin()" />
</td>
<td>
<input type="reset" name="Reset" value="重置" />
</td>
</tr>
</table>
</center>
</form>
<script language="javascript">
function validateLogin(){
var sUserName = document.frmLogin.username.value ;
var sPassword = document.frmLogin.password.value ;
if ((sUserName =="") || (sUserName=="Your name")){
alert("请输入用户名!");
return false ;
}
if ((sPassword =="") || (sPassword=="Your password")){
alert("请输入密码!");
return false ;
}
}
</script>
</body>
</html>
效果：
2 三个的登陆页
<%@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%>
<%@ page import="java.util.*" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>登录页面</title>
</head>
<body>
<form name="loginForm" method="post" action="judgeUser.jsp">
<table>
<tr>
<td>用户名:<input type="text" name="userName" id="userName"></td>
</tr>
<tr>
<td>密码:<input type="password" name="password" id="password"></td>
</tr>
<tr>
<td><input type="submit" value="登录" style="background-color:pink"><input type="reset" value="重置" style="background-color:red"></td>
</tr>
</table>
</form>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%>
<%@ page import="java.util.*" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>身份验证</title>
</head>
<body>
<%
request.setCharacterEncoding("GB18030");
String name = request.getParameter("userName");
String password = request.getParameter("password");
if(name.equals("abc")&& password.equals("123"))
{
%>
<jsp:forward page="afterLogin.jsp">
<jsp:param name="userName" value="<%=name%>"/>
</jsp:forward>
<%
}
else
{
%>
<jsp:forward page="login.jsp"/>
<%
}
%>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>登录成功</title>
</head>
<body>
<%
request.setCharacterEncoding("GB18030");
String name = request.getParameter("userName");
out.println("欢迎你:" + name);
%>
</body>
</html>
总共3个jsp文件，第一个是login.jsp,第2个是judgeUser.jsp,第3个是afterLogin.jsp
效果：
3 一个简单留言板
首先在MySQL中建立测试数据；如下图，有时候难免也会输入错sql；
拷贝MySQL安装目录下的JDBC驱动到tomcat的lib目录；
看了图图，再看下码码；
<%@ page contentType="text/html;charset=gb2312"%>
<%@ page import="java.sql.*"%>
<html>
<head>
<title>JSP+JDBC 留言管理程序——登陆</title>
</head>
<body>
<center>
<h1>留言管理范例 —— JSP + JDBC实现</h1>
<hr>
<br>
<%
// 编码转换
request.setCharacterEncoding("GB2312") ;
if(session.getAttribute("uname")==null)
{
// 用户已登陆
%>
<%!
String host="localhost"; //数据库主机
String database="test"; //数据库名
String user="root"; //用户名
String pass="123456ab"; //口令
java.sql.Connection conn; //数据库连接对象
java.sql.Statement pstmt; //语句对象
java.sql.ResultSet rs; //结果集对象
%>
<%
// 如果有内容，则修改变量i，如果没有，则根据i的值进行无内容提示
int i = 0 ;
String sql = null;
String keyword = request.getParameter("keyword") ;
// out.println(keyword) ;
if(keyword==null)
{
// 没有任何查询条件
sql = "SELECT id,title,author,content FROM note" ;
}
else
{
// 有查询条件
sql = "SELECT id,title,author,content FROM note WHERE title like ? or author like ? or
content like ?" ;
}
try
{
Class.forName("com.mysql.jdbc.Driver");
conn= java.sql.DriverManager.getConnection("jdbc:mysql://"+host+"/"+database,user,pass);
pstmt=conn.createStatement
(java.sql.ResultSet.TYPE_SCROLL_INSENSITIVE,java.sql.ResultSet.CONCUR_READ_ONLY);
rs=pstmt.executeQuery (sql);
// 如果存在查询内容，则需要设置查询条件
if(keyword!=null)
{
// 存在查询条件
//pstmt.setString(1,"%"+keyword+"%") ;
//pstmt.setString(2,"%"+keyword+"%") ;
//pstmt.setString(3,"%"+keyword+"%") ;
}
//rs = pstmt.executeQuery() ;
%>
<form action="list_notes.jsp" method="POST">
请输入查询内容：<input type="text" name="keyword">
<input type="submit" value="查询">
</form>
</h3><a href="insert.jsp">添加新留言</a></h3>
<table width="80%" border="1">
<tr>
<td>留言ID</td>
<td>标题</td>
<td>作者</td>
<td>内容</td>
<td>删除</td>
</tr>
<%
while(rs.next())
{
i++ ;
// 进行循环打印，打印出所有的内容，以表格形式
// 从数据库中取出内容
int id = rs.getInt(1) ;
String title = rs.getString(2) ;
String author = rs.getString(3) ;
String content = rs.getString(4) ;
if(keyword!=null)
{
// 需要将数据返红
title = title.replaceAll(keyword,"<font color=\"red\">"+keyword+"</font>")
;
author = author.replaceAll(keyword,"<font color=\"red\">"+keyword
+"</font>") ;
content = content.replaceAll(keyword,"<font color=\"red\">"+keyword
+"</font>") ;
}
%>
<tr>
<td><%=id%></td>
<td><a href="update.jsp?id=<%=id%>"><%=title%></a></td>
<td><%=author%></td>
<td><%=content%></td>
<td><a href="delete_do.jsp?id=<%=id%>">删除</a></td>
</tr>
<%
}
// 判断i的值是否改变，如果改变，则表示有内容，反之，无内容
if(i==0)
{
// 进行提示
%>
<tr>
<td colspan="5">没有任何内容！！！</td>
</tr>
<%
}
%>
</table>
<%
rs.close() ;
pstmt.close() ;
conn.close() ;
}
catch(Exception e)
{}
%>
<%
}
else
{
// 用户未登陆，提示用户登陆，并跳转
response.setHeader("refresh","2;URL=login.jsp") ;
%>
您还未登陆，请先登陆！！！<br>
两秒后自动跳转到登陆窗口！！！<br>
如果没有跳转，请按<a href="login.jsp">这里</a>！！！<br>
<%
}
%>
</center>
</body>
</html>
RUN；
4 一个jquery easy ui 的GRID
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/demo/demo.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>
</head>
<body>
<table id="dg" title="My Users" class="easyui-datagrid" style="width:550px;height:250px"
url=""
toolbar="#toolbar"
rownumbers="true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<th field="firstname" width="50">First Name</th>
<th field="lastname" width="50">Last Name</th>
<th field="phone" width="50">Phone</th>
<th field="email" width="50">Email</th>
</tr>
</thead>
</table>
<div id="toolbar">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove
User</a>
</div>
</body>
</html>
当前没有数据，easy ui 可以不要js简单创建视觉效果不错的GRI
代码下载：
http://pan.baidu.com/s/1pJyrHxT
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 【MyEclipse教程】—如何设置jsp页面默认utf-8编码
- 【MyEclipse使用教程】—如何设置jsp页面为默认utf-8编码
- JSP入门初级教程之实现页面跳转
- 韩顺平_php从入门到精通_视频教程_第8讲_多媒体页面_标签汇总①_地图映射_学习笔记_源代码图解_PPT文档整理
- JSP入门初级教程之实现页面跳转
- JSP教程(六)-怎么在JSP中跳转到别一页面
- springMVC教程（五）将controller中数据传递到jsp页面
- Spring Boot (教程五：响应JSP页面)
- ASP.NET页面生命周期图解教程
- JSP教程(六)-怎么在JSP中跳转到别一页面
- JSP教程(六)-怎么在JSP中跳转到别一页面
- 教程3：jsp和servlet配合的简单登录页面login.jsp
- JSP教程二 JSP页面组成
- [Gradle中文教程系列]-跟我学Gradle-8.7.多模块项目之 - spring boot + gradle + 构建公共jsp页面的多模块项目
- JSP实用教程之简易页面编辑器的实现方法（附源码）
- eclipse+springboot+maven访问jsp页面，详细步骤图解！！！(源码)
- JSP教程(六)-怎么在JSP中跳转到别一页面
- Textarea插入表格table，保存到数据库。jsp页面显示表格问题
- JSP页面跳转的五种方法
- 开发jsp页面的部分声明(extjs easyui)