📄 选择类标签 二.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="table3">
<tr>
<td class="pagebody" vAlign="top">
<table style="CLEAR: both" cellSpacing="0" cellPadding="0" width="100%" border="0" id="table4">
<tr>
<td class="pagecontent" vAlign="top" width="100%">
<div class="wiki-content">
选择类标签可以搭配<f:selectItem>或<f:selectItems>卷标来设定选项，例如：<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"><f:selectItem itemLabel=<span class="code-quote">"高中"</span>
itemValue=<span class="code-quote">"高中"</span>
itemDescription=<span class="code-quote">"学历"</span>
itemDisabled=<span class="code-quote">"<span class="code-keyword">true</span>"</span>/></pre>
</div>
</div>
<p>
itemLabel属性设定显示在网页上的文字，itemValue设定发送至伺服端时的值，itemDescription
设定文字描述，它只作用于一些工具程序，对HTML没有什么影响，itemDisabled设定是否选项是否作用，这些属性也都可以使用JSF
Expression Language来绑定至一个值。</p>
<p>
<f:selectItem>也可以使用value来绑定一个传回javax.faces.model.SelectItem的方法，例如：</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"><f:selectItem value=<span class="code-quote">"#{user.sex}"</span>/></pre>
</div>
</div>
<p> 则绑定的Bean上必须提供下面这个方法：</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">....
<span class="code-keyword">public</span> SelectItem getSex() {
<span class="code-keyword">return</span> <span class="code-keyword">new</span> SelectItem(<span class="code-quote">"男"</span>);
}
....</pre>
</div>
</div>
<p>
如果要一次提供多个选项，则可以使用<f:selectItems>，它的value绑定至一个提供传回SelectItem?的数组、集合，或者是Map对象的方法，例如：</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"><h:selectOneRadio value=<span class="code-quote">"#{user.education}"</span>>
<f:selectItems value=<span class="code-quote">"#{user.educationItems}"</span>/>
</h:selectOneRadio><p></pre>
</div>
</div>
<p>
这个例子中<f:selectItems>的value绑定至user.educationItems，其内容如下：</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">....
<span class="code-keyword">private</span> SelectItem[] educationItems;
<span class="code-keyword">public</span> SelectItem[] getEducationItems() {
<span class="code-keyword">if</span>(educationItems == <span class="code-keyword">null</span>) {
educationItems = <span class="code-keyword">new</span> SelectItem[3];
educationItems[0] =
<span class="code-keyword">new</span> SelectItem(<span class="code-quote">"高中"</span>, <span class="code-quote">"高中"</span>);
educationItems[1] =
<span class="code-keyword">new</span> SelectItem(<span class="code-quote">"大学"</span>, <span class="code-quote">"大学"</span>);
educationItems[2] =
<span class="code-keyword">new</span> SelectItem(<span class="code-quote">"研究所以上"</span>, <span class="code-quote">"研究所以上"</span>);
}
<span class="code-keyword">return</span> educationItems;
}
....</pre>
</div>
</div>
<p>
在这个例子中，SelectItem的第一个建构参数用以设定value，而第二个参数用以设定label，SelectItem还提供有数个建构函式，记得可以参考一下线上API文件。</p>
<p>
您也可以提供一个传回Map对象的方法，Map的key-value会分别作为选项的label-value，例如：</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"><h:selectManyCheckbox layout=<span class="code-quote">"pageDirection"</span>
value=<span class="code-quote">"#{user.preferColors}"</span>>
<f:selectItems value=<span class="code-quote">"#{user.preferColorItems}"</span>/>
</h:selectManyCheckbox><p></pre>
</div>
</div>
<p> 您要提供下面的程序来搭配上面这个例子：</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">....
<span class="code-keyword">private</span> Map preferColorItems;
<span class="code-keyword">public</span> Map getPreferColorItems() {
<span class="code-keyword">if</span>(preferColorItems == <span class="code-keyword">null</span>) {
preferColorItems = <span class="code-keyword">new</span> HashMap();
preferColorItems.put(<span class="code-quote">"红"</span>, <span class="code-quote">"Red"</span>);
preferColorItems.put(<span class="code-quote">"黄"</span>, <span class="code-quote">"Yellow"</span>);
preferColorItems.put(<span class="code-quote">"蓝"</span>, <span class="code-quote">"Blue"</span>);
}
<span class="code-keyword">return</span> preferColorItems;
}
....</pre>
</div>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -