⭐ 欢迎来到虫虫下载站！ | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站
📤 上传资源

📄 简单的表格.htm

📁 良葛格學習筆記,《jsf入门》简体中文版,对学习JSF有帮助
💻 HTM
字号:
🔍 
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 1</title>
</head>

<body>

<p>简单的表格</p>
<div id="PageContent">
	<table cellSpacing="0" cellPadding="0" width="100%" border="0" id="table1">
		<tr>
			<td class="pagebody" vAlign="top">
			<table style="CLEAR: both" cellSpacing="0" cellPadding="0" width="100%" border="0" id="table2">
				<tr>
					<td class="pagecontent" vAlign="top" width="100%">
					<div class="wiki-content">
						很多資料經常使用表格來表現，JSF提供&lt;h:dataTable&gt;標籤讓您得以列舉資料並使用表格方式來呈現，舉個實際的例子來看，假設您撰寫了以下的兩個類別：<div class="code" style="BORDER-TOP-STYLE: solid; BORDER-RIGHT-STYLE: solid; BORDER-LEFT-STYLE: solid; BORDER-BOTTOM-STYLE: solid">
							<div class="codeHeader" style="BORDER-BOTTOM-STYLE: solid">
								<b>UserBean.java</b></div>
							<div class="codeContent">
								<pre class="code-java"><span class="code-keyword">package</span> onlyfun.caterpillar;

 <span class="code-keyword">public</span> class UserBean {
    <span class="code-keyword">private</span> <span class="code-object">String</span> name;
    <span class="code-keyword">private</span> <span class="code-object">String</span> password;

    <span class="code-keyword">public</span> UserBean() {
    }

    <span class="code-keyword">public</span> UserBean(<span class="code-object">String</span> name, <span class="code-object">String</span> password) {
        <span class="code-keyword">this</span>.name = name;
        <span class="code-keyword">this</span>.password = password;
    }

    <span class="code-keyword">public</span> <span class="code-object">String</span> getName() {
        <span class="code-keyword">return</span> name;
    }

    <span class="code-keyword">public</span> void setName(<span class="code-object">String</span> name) {
        <span class="code-keyword">this</span>.name = name;
    }

    <span class="code-keyword">public</span> <span class="code-object">String</span> getPassword() {
        <span class="code-keyword">return</span> password;
    }

    <span class="code-keyword">public</span> void setPassword(<span class="code-object">String</span> password) {
        <span class="code-keyword">this</span>.password = password;
    }
 }</pre>
							</div>
						</div>
						<div class="code" style="BORDER-TOP-STYLE: solid; BORDER-RIGHT-STYLE: solid; BORDER-LEFT-STYLE: solid; BORDER-BOTTOM-STYLE: solid">
							<div class="codeHeader" style="BORDER-BOTTOM-STYLE: solid">
								<b>TableBean.java</b></div>
							<div class="codeContent">
								<pre class="code-java"><span class="code-keyword">package</span> onlyfun.caterpillar;

 <span class="code-keyword">import</span> java.util.*;

 <span class="code-keyword">public</span> class TableBean {
    <span class="code-keyword">private</span> List userList;

    <span class="code-keyword">public</span> List getUserList() {
        <span class="code-keyword">if</span>(userList == <span class="code-keyword">null</span>) {
            userList = <span class="code-keyword">new</span> ArrayList();
            userList.add(<span class="code-keyword">new</span> UserBean(<span class="code-quote">&quot;caterpillar&quot;</span>, <span class="code-quote">&quot;123456&quot;</span>));
            userList.add(<span class="code-keyword">new</span> UserBean(<span class="code-quote">&quot;momor&quot;</span>, <span class="code-quote">&quot;654321&quot;</span>));
            userList.add(<span class="code-keyword">new</span> UserBean(<span class="code-quote">&quot;becky&quot;</span>, <span class="code-quote">&quot;7890&quot;</span>));
        }

        <span class="code-keyword">return</span> userList;
    }
 }</pre>
							</div>
						</div>
						<p>
						　　在TableBean中，我們假設getUserList()方法實際上是從資料庫中查詢出UserBean的內容，之後傳回List物件，若我們的 
						faces-config.xml如下：</p>
						<div class="code" style="BORDER-TOP-STYLE: solid; BORDER-RIGHT-STYLE: solid; BORDER-LEFT-STYLE: solid; BORDER-BOTTOM-STYLE: solid">
							<div class="codeHeader" style="BORDER-BOTTOM-STYLE: solid">
								<b>faces-config.xml</b></div>
							<div class="codeContent">
								<pre class="code-java">&lt;?xml version=<span class="code-quote">&quot;1.0&quot;</span> encoding=<span class="code-quote">&quot;UTF-8&quot;</span>?&gt;
 &lt;!DOCTYPE faces-config PUBLIC &quot;-<span class="code-comment">//Sun Microsystems,
</span>    Inc.<span class="code-comment">//DTD JavaServer Faces Config 1.0//EN&quot;
</span>   <span class="code-quote">&quot;http:<span class="code-comment">//java.sun.com/dtd/web-facesconfig_1_0.dtd&quot;</span>&gt;
</span>
 &lt;faces-config&gt;
    &lt;managed-bean&gt;
        &lt;managed-bean-name&gt;tableBean&lt;/managed-bean-name&gt;
        &lt;managed-bean-class&gt;
            onlyfun.caterpillar.TableBean
        &lt;/managed-bean-class&gt;
        &lt;managed-bean-scope&gt;request&lt;/managed-bean-scope&gt;
    &lt;/managed-bean&gt;
    &lt;managed-bean&gt;
        &lt;managed-bean-name&gt;userBean&lt;/managed-bean-name&gt;
        &lt;managed-bean-class&gt;
            onlyfun.caterpillar.UserBean
        &lt;/managed-bean-class&gt;
        &lt;managed-bean-scope&gt;request&lt;/managed-bean-scope&gt;
    &lt;/managed-bean&gt;
 &lt;/faces-config&gt;</pre>
							</div>
						</div>
						<p>　　我們可以如下使用&lt;h:dataTable&gt;來產生表格資料：</p>
						<div class="code" style="BORDER-TOP-STYLE: solid; BORDER-RIGHT-STYLE: solid; BORDER-LEFT-STYLE: solid; BORDER-BOTTOM-STYLE: solid">
							<div class="codeHeader" style="BORDER-BOTTOM-STYLE: solid">
								<b>index.jsp</b></div>
							<div class="codeContent">
								<pre class="code-java">&lt;%@ taglib uri=<span class="code-quote">&quot;http:<span class="code-comment">//java.sun.com/jsf/html&quot;</span> prefix=&quot;h&quot; %&gt;
</span> &lt;%@ taglib uri=<span class="code-quote">&quot;http:<span class="code-comment">//java.sun.com/jsf/core&quot;</span> prefix=&quot;f&quot; %&gt;
</span> &lt;html&gt;
 &lt;body&gt;
 &lt;f:view&gt;
    &lt;h:dataTable value=<span class="code-quote">&quot;#{tableBean.userList}&quot;</span> <span class="code-keyword">var</span>=<span class="code-quote">&quot;user&quot;</span>&gt;
        &lt;h:column&gt;
            &lt;h:outputText value=<span class="code-quote">&quot;#{user.name}&quot;</span>/&gt;
        &lt;/h:column&gt;
        &lt;h:column&gt;
            &lt;h:outputText value=<span class="code-quote">&quot;#{user.password}&quot;</span>/&gt;
        &lt;/h:column&gt;
    &lt;/h:dataTable&gt;
 &lt;/f:view&gt;
 &lt;/body&gt;
 &lt;/html&gt;</pre>
							</div>
						</div>
						<p>　　&lt;h:dataTable&gt;的value值綁定tableBean的userList方法，它會一個一個取出 
						List中的資料並設定給var設定的user，之後在每一個column中我們可以顯示所列舉出的user.name與user.password，程式的結果會如下所示：</p>
						<p><br clear="all">
						　　所產生的HTML表格標籤如下：</p>
						<div class="code" style="BORDER-TOP-STYLE: solid; BORDER-RIGHT-STYLE: solid; BORDER-LEFT-STYLE: solid; BORDER-BOTTOM-STYLE: solid">
							<div class="codeContent">
								<pre class="code-java">&lt;table&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td&gt;caterpillar&lt;/td&gt;
            &lt;td&gt;123456&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;momor&lt;/td&gt;
            &lt;td&gt;654321&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;becky&lt;/td&gt;
            &lt;td&gt;7890&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
 &lt;/table&gt;</pre>
							</div>
						</div>
						<p>　　&lt;h:dataTable&gt;的value值綁定的對象可以是以下的型態：</p>
						<ul>
							<li>陣列 
							</li>
							<li>java.util.List的實例 
							</li>
							<li>java.sql.ResultSet的實例 
							</li>
							<li>javax.servlet.jsp.jstl.sql.Result的實例 
							</li>
							<li>javax.faces.model.DataModel的實例 </li>
						</ul>
					</div>
					<!--<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"         xmlns:dc="http://purl.org/dc/elements/1.1/"         xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"><rdf:Description    rdf:about="http://www.javaworld.com.tw/confluence/pages/viewpage.action?pageId=2796"    dc:identifier="http://www.javaworld.com.tw/confluence/pages/viewpage.action?pageId=2796"    dc:title="簡單的表格"    trackback:ping="http://www.javaworld.com.tw/confluence/rpc/trackback/2796"/></rdf:RDF>--><!--    Root decorator: all decisions about how a page is to be decorated via the                    inline decoration begins here.--><!--    Switch based upon the context. However, for now, just delegate to a decorator    identified directly by the context.--></td>
				</tr>
			</table>
			</td>
		</tr>
	</table>
</div>

</body>

</html>

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -