65.9K
CodeProject 正在变化。 阅读更多。
Home

JSP 数据网格

Prasad Khandekar
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.70/5 (46投票s)

2004年7月27日

LGPL3

6分钟阅读

viewsIcon

1042610

downloadIcon

20051

一个类似于 Asp.Net 风格的 JSP 网格控件，能够从 java.sql.Connection 或 java.util.List 或 java.sql.ResultSet 中获取数据

Sample Image - DBGrid.png

引言

本文介绍了一个与 ASP.NET 中非常相似的网格控件，但它是用于 JSP 页面的。尽管使用 JSTL 的 for 循环标签可以轻松渲染数据网格，但这往往会使代码变得混乱，从而使调试变得非常困难。本文介绍的控件使编写此类网格变得轻而易举，并且有助于保持代码的整洁。

功能一览

目前，该控件实现了以下功能。

  • 数据分页。
  • 按指定列排序。
  • 自动显示行号。
  • 基于图像的超链接列。
  • 超链接列。
  • 自定义数据格式化。
  • 值解码。
  • 能够绑定到 List。
  • 能够绑定到 ResultSet。
  • 能够绑定到 RowSet。

除此之外，它还允许指定在构造超链接的 HREF 元素时使用的列名。此引用在运行时会自动被列值替换。例如，以下代码片段

<grd:imagecolumn headerText="" width="5" HAlign="center" imageSrc="images/Edit.gif" 
    linkUrl="javascript:doEdit('{CLICORPORATION}', '{CLICLIENT}')" imageBorder="0" 
    imageWidth="16" imageHeight="16" alterText="Click to edit"></grd:imagecolumn>
导致以下代码输出到浏览器
<td WIDTH="5%" ALIGN="center">
    <a HREF="javascript:doEdit('TATA', 'TELCO')">
        <img SRC="images/Edit.gif" BORDER=0 WIDTH=16 HEIGHT=16 ALT="Click to edit">
    </a>
</td>

控件详情

DBGrid 控件由以下子控件（类）组成。

  1. gridpager - 此控件负责渲染分页控件。此控件具有以下属性来自定义用于导航的图像。所有这些属性都是必填属性。
    • imgFirst - 用于导航到第一页操作的自定义图像。
    • imgPrevious - 用于导航到上一页操作的自定义图像。
    • imgNext - 用于导航到下一页操作的自定义图像。
    • imgLast - 用于导航到最后一页操作的自定义图像。

  2. gridsorter - 此控件负责提供排序支持。此控件最重要和必需的属性是
    • sortColumn - 用于构造 ORDER BY 子句的列名。
    • sortAscending - 布尔值，指示是按升序排序还是降序排序。

    除了上述两个属性外，此控件还有以下两个可选属性来自定义列标题中出现的图像以指示当前排序顺序。如果未指定，则控件假定 ImgAsc.gif 和 ImgDesc.gif 存在于 images 文件夹中。

    • imageAscending - 当数据按升序排序时，显示在关联列标题中的图像。
    • imageDescending - 当数据按降序排序时，显示在关联列标题中的图像。

  3. textColumn - 此控件负责渲染文本列。此控件具有以下特殊属性来控制渲染文本的外观。
    • maxLength - 控制要输出的字符数。

  4. dateColumn - 此控件负责渲染日期时间值。此控件具有以下特殊属性来控制渲染文本的外观。
    • dataFormat - java.text.DateFormat 中定义的格式字符串

  5. numberColumn - 此控件负责渲染数值。此控件具有以下特殊属性来控制渲染文本的外观。
    • dataFormat - java.text.DecimalFormat 中定义的格式字符串

  6. anchorColumn - 此控件负责渲染超链接。此控件还支持上一节中解释的值替换。此控件具有以下特殊属性来控制超链接的外观和行为。
    • linkText - 用于渲染超链接的固定字符串。或者，也可以使用 dataField 属性指定要使用的列值
    • linkUrl - 单击此链接时要调用的 URL。这也可以是 JavaScript 函数。
    • target - 要在其中打开引用 URL 的窗口或框架的名称。

  7. imageColumn - 此控件负责渲染超链接图像。此控件还支持上一节中解释的值替换。此控件具有以下特殊属性来控制超链接的外观和行为。
    • imageSrc - 要显示的图像。
    • imageWidth - 图像的宽度（像素）。
    • imageHeight - 图像的高度（像素）。
    • imageBorder - 图像边框的宽度（像素）。
    • alterText - 要显示的工具提示文本。
    • linkUrl - 单击此链接时要调用的 URL。这也可以是 JavaScript 函数。
    • target - 要在其中打开引用 URL 的窗口或框架的名称。

  8. rownumColumn - 此控件负责为网格中显示的行编号。

  9. decodeColumn - 此控件负责解码列值并显示解码后的文本。此控件具有以下特殊属性来控制解码。
    • decodeValues - 一个字符串，包含要解码的值，这些值由使用 valueSeperator 属性指定的分隔符分隔。
    • displayValues - 一个字符串，包含要显示的值，这些值由使用 valueSeperator 属性指定的分隔符分隔。
    • valueSeperator - 值分隔符。

DBGrid 控件容器

DBGrid 控件本身具有以下特殊属性。

  1. dataSource - 允许指定 java.sql.Connection 对象以从数据库或 java.util.List 中获取值。
  2. dataMember - 用于检索所需数据的 SQL。SQL 不应包含 ORDER BY 子句。如果您指定java.util.List用于 dataSource则可以留空。
  3. pageSize - 每页显示的行数。
  4. currentPage - 要显示的页码。

使用代码

以下代码片段展示了 DBGrid 控件的用法。相同的源代码也可以在演示应用程序中找到。

<%@ taglib uri="/WEB-INF/tags/datagrid.tld" prefix="grd" %>
<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.DriverManager" %>
<%@ page import="java.sql.SQLException" %>
<%@ page import="com.freeware.gridtag.*" %> 
<%
int intCurr = 1;
int intSortOrd = 0;
String strTmp = null;
String strSQL = null;
String strSortCol = null;
String strSortOrd = "ASC";
boolean blnSortAsc = true; 
strSQL = "SELECT CLICORPORATION, CLICLIENT, CLIDESCRIPTION, " +
         "CLIENABLED, CLIUPDSTAMP FROM CLIENTMASTER "; 
Connection objCnn    = null;
Class      objDrvCls = null;
objDrvCls = Class.forName("oracle.jdbc.driver.OracleDriver");
objCnn = DriverManager.getConnection("jdbc:oracle:thin:@Host:port:sid", 
                                     "cashincpri", "cashincpri");
if (objDrvCls != null) objDrvCls = null;
strTmp = request.getParameter("txtCurr");
try
{
  if (strTmp != null)
  intCurr = Integer.parseInt(strTmp);
}
catch (NumberFormatException NFEx)
{
}
strSortCol = request.getParameter("txtSortCol");
strSortOrd = request.getParameter("txtSortAsc");
if (strSortCol == null) strSortCol = "CLICLIENT";
if (strSortOrd == null) strSortOrd = "ASC";
blnSortAsc = (strSortOrd.equals("ASC"));
%>
<html>
<head>
<title>Grid Tag Demonstration</title>
<link REL="StyleSheet" HREF="css/GridStyle.css">
<script LANGUAGE="javascript">
function doNavigate(pstrWhere, pintTot)
{
  var strTmp;
  var intPg; 
  strTmp = document.frmMain.txtCurr.value;
  intPg = parseInt(strTmp);
  if (isNaN(intPg)) intPg = 1; 
  if ((pstrWhere == 'F' || pstrWhere == 'P') && intPg == 1)
  {
    alert("You are already viewing first page!");
    return;
  }
  else if ((pstrWhere == 'N' || pstrWhere == 'L') && intPg == pintTot)
  {
    alert("You are already viewing last page!");
    return;
  }
  if (pstrWhere == 'F')
    intPg = 1;
  else if (pstrWhere == 'P')
    intPg = intPg - 1;
  else if (pstrWhere == 'N')
    intPg = intPg + 1;
  else if (pstrWhere == 'L')
    intPg = pintTot; 
  if (intPg < 1) intPg = 1;
  if (intPg > pintTot) intPg = pintTot;
  document.frmMain.txtCurr.value = intPg;
  document.frmMain.submit();
}
function doSort(pstrFld, pstrOrd)
{
  document.frmMain.txtSortCol.value = pstrFld;
  document.frmMain.txtSortAsc.value = pstrOrd;
  document.frmMain.submit();
}
</script>
</head>
<body>
<h2>Grid Example</h2>
<form NAME="frmMain" METHOD="post">
<grd:dbgrid id="tblStat" name="tblStat" width="100" pageSize="10" 
    currentPage="<%=intCurr%>" border="0" cellSpacing="1" cellPadding="2" 
    dataMember="<%=strSQL%>" dataSource="<%=objCnn%>" cssClass="gridTable">
 <grd:gridpager imgFirst="images/First.gif" imgPrevious="images/Previous.gif" 
      imgNext="images/Next.gif" imgLast="images/Last.gif"/>
 <grd:gridsorter sortColumn="<%=strSortCol%>" sortAscending="<%=blnSortAsc%>"/>
 <grd:rownumcolumn headerText="#" width="5" HAlign="right"/>
 <grd:imagecolumn headerText="" width="5" HAlign="center" 
      imageSrc="images/Edit.gif" 
      linkUrl="javascript:doEdit('{CLICORPORATION}', '{CLICLIENT}')" 
      imageBorder="0" imageWidth="16" imageHeight="16" 
      alterText="Click to edit"/>
 <grd:textcolumn dataField="CLICLIENT" headerText="Client" 
      width="10" sortable="true"/>
 <grd:textcolumn dataField="CLIDESCRIPTION" headerText="Description" 
      width="50" sortable="true"/>
 <grd:decodecolumn dataField="CLIENABLED" headerText="Enabled" width="10" 
      decodeValues="Y,N" displayValues="Yes,No" valueSeperator=","/>
 <grd:datecolumn dataField="CLIUPDSTAMP" headerText="Last Updated" 
      dataFormat="dd/MM/yyyy HH:mm:ss" width="20"/>
</grd:dbgrid>
<input TYPE="hidden" NAME="txtCurr" VALUE="<%=intCurr%>">
<input TYPE="hidden" NAME="txtSortCol" VALUE="<%=strSortCol%>">
<input TYPE="hidden" NAME="txtSortAsc" VALUE="<%=strSortOrd%>">
</form>
</body>
</html>
<%
try
{
    if (objCnn != null)
        objCnn.close();
}
catch (SQLException SQLExIgnore)
{
}
if (objCnn != null) objCnn = null;
%>

随附的演示 zip 文件还包含 ddl 和 dml，您可以直接使用它们来创建必要的表并填充测试数据。我使用 Oracle 数据库和 JDBC thin 驱动程序测试了此控件。对于其他数据库，您可能需要更改 dml。

参考文献

在设计此控件库时对我帮助很大的链接，

历史

  • 2004年7月27日 - 初始发布。
  • 2005年5月12日 - 添加了对 List 的支持。DBGrid 现在可以渲染作为对象列表提供的数据。将 sourceSQL 的名称更改为 dataMember，将 connection 更改为 dataSource。更新了示例应用程序以演示此更改。
  • 2005年6月3日 - 更新了文章中的示例代码以反映上次发布中所做的更改。
  • 2006年1月10日 - 添加了对 ResultSet 和 RowSet 的支持。添加了新的示例 RawJDBCGrid.jsp 页面以演示此功能。在将这些类型的对象作为 dataSource 提供时，必须注意使此 ResultSet 可滚动（即 ResultSet.TYPE_SCROLL_INSENSITIVE）。
  • 2006年4月7日 - 修复了页面导航中的错误。感谢会员 No. 2833981 指出此错误。
  • 2006年7月22日 - 修复了一个小错误，允许单个页面上存在多个 dbgrid。感谢 Dave Lilley 指出此错误并提出解决方案。
© . All rights reserved.