ʹÓÃDisplayTagºÍJavaScript´´½¨ÔöÇ¿Ð͵ıí¸ñ
Every Web developer has to tangle with tables. A new open source library, DisplayTag, can make life with tables much more organized. Find out how to combine the DisplayTag library with JavaScript to make a slick app that displays line item details.
by Stephen Strenn
isplaying data in a table is everyday work for Web application developers. In this 10-minute solution, you will learn how to quickly create feature-rich tables for your JSP pages using the DisplayTag library and a little JavaScript. Specifically, the table features that we want include:
Alternating row colors
Column sorting and formatting
Row-grouping with subtotals for selected columns
Page navigation
Export to XML, Excel, PDF, and CSV
Support for standard JSP and the Expression Language (EL)
Row interactivity—a row is highlighted as the mouse passes over it, and if the user clicks anywhere on the row, a new request is generated that includes a parameter indicating which row was clicked.
This article includes a sample application called DisplayTagEx that displays line item details for multiple orders. (View a live demo of DisplayTagEx. A screen shot can be found in Figure 1.) Line items are grouped by order and subtotals are provided for each group. Clicking anywhere on a row takes the user to a page with more complete information about the selected item.
Listings 1 and 2 contain the source for OrderDetails.jsp and displaytagex.css, respectively.
The specific environment used to develop and deploy the article's sample application was DisplayTag library v1.1, JDK 5.0, MyEclipse 4.1, and Tomcat 5.5. However, the steps described in this article apply to any JSP developer looking to add data tables to his or her web application.
http://assets.devx.com/articlefigs/15427.png
Figure 1. A Better Table: DisplayTagEx uses the DisplayTag library and a little JavaScript.
You want to quickly add feature-rich data tables to your JSP web application.
Use the o
Ïà¹ØÎĵµ£º
±¾ÎÄÖ÷ÒªÊdzöÓÚÓÐÅóÓÑʹÓÃÎÒÔÀ´Ð´µÄautocompleteµÄJS¿Ø¼þ¡£µ±Êý¾ÝÁ¿´óµÄʱºò£¬»á³öÏÖЧÂʼ«ÆäÂýµÄÇé¿ö£¬ÎÒÔÚÕâ¶Îʱ¼ä×ö³öµÄһЩ²âÊÔÒ²¼°Ò»Ð©¾Ñ飬Óë´ó¼Ò·ÖÏí£¬Èç¹ûÓдíµÄµØ·½£¬»¹ÇëÖ¸³ö¡£
¾¹ý²âÊÔ£¬ÎÒÃǻᷢÏÖÈçϵÄÇé¿ö»òÕß˵µÄ½áÂÛ£¬Èç¹ûÄúµÄ²âÊÔ½á¹ûÓëÎҵIJ»·û£¬Çë˵Ã÷ÔÒò£¬ÒÔ±ãÏ໥ѧϰ¡£
1£©µ±Ò»¸ö½Ï´óµÄHTML×Ö· ......
½ûֹѡÔñ
unselectable="on"(off): IE/Opera
style="-moz-user-select:none": FireFox(JS:element.style.MozUserSelect = "none";)
style="-khtml-user-select:none": Safari(JS:element.style.KhtmlUserSelect)
ons ......
<script language="javascript" type="text/javascript">
function arrayTest() {
//ʹÓÃnew Array()
var array1 = ......
DropDownListµ÷ÓÃjavascript¿ØÖƱí¸ñÐÐtrµÄÏÔʾÓëÒþ²Ø
<mce:script language="javascript"><!--
function cao() {
if(document.all.ddl_class.value=="0")
{
hongtou.style.display="none";
wailai.style.display="none";
wailai1.style.display ......