JS備忘錄(二) 【默認(rèn)用Label顯示數(shù)據(jù),點(diǎn)擊后用select修改數(shù)據(jù)】
需求:
頁(yè)面默認(rèn)顯示的時(shí)候?yàn)閘abel,
當(dāng)鼠標(biāo)點(diǎn)擊上后,顯示為select選擇框,容許選擇
實(shí)現(xiàn)
1.javascript函數(shù):
2. jsp頁(yè)面使用(s標(biāo)簽為struts2標(biāo)簽)
注意:
1.使用struts2的標(biāo)簽select顯示下拉列表
list對(duì)應(yīng)的logLevelList為下拉數(shù)據(jù),value="mozartManagerConf.mangerLogLevel" 為當(dāng)前顯示數(shù)據(jù)
2.在構(gòu)造函數(shù)中填充logLevelList(每次請(qǐng)求都會(huì)重新初始化一個(gè)Action實(shí)例)
3.具體實(shí)例可以參見struts2-showCase
頁(yè)面默認(rèn)顯示的時(shí)候?yàn)閘abel,
當(dāng)鼠標(biāo)點(diǎn)擊上后,顯示為select選擇框,容許選擇
實(shí)現(xiàn)
1.javascript函數(shù):
function makeSelectEnabled(_node){
var selects = _node.getElementsByTagName("select");
var labels = _node.getElementsByTagName("label");
var spans = _node.getElementsByTagName("span");
if(spans.length > 0){
spans[0].style.padding = "0px";
spans[0].parentNode.style.paddingTop = "0px";
spans[0].parentNode.style.paddingBottom = "0px";
}
if(selects.length > 0 && labels.length > 0){
labels[0].innerHTML = "";
selects[0].style.display = "block";
selects[0].focus();
selects[0].onblur = function(){
labels[0].appendChild(_createTextNode(this.value));
this.style.display="none";
}
}
}
var selects = _node.getElementsByTagName("select");
var labels = _node.getElementsByTagName("label");
var spans = _node.getElementsByTagName("span");
if(spans.length > 0){
spans[0].style.padding = "0px";
spans[0].parentNode.style.paddingTop = "0px";
spans[0].parentNode.style.paddingBottom = "0px";
}
if(selects.length > 0 && labels.length > 0){
labels[0].innerHTML = "";
selects[0].style.display = "block";
selects[0].focus();
selects[0].onblur = function(){
labels[0].appendChild(_createTextNode(this.value));
this.style.display="none";
}
}
}
2. jsp頁(yè)面使用(s標(biāo)簽為struts2標(biāo)簽)
<tr>
<th>Log level</th>
<td onclick="makeSelectEnabled(this)" class="editThisAttribute">
<span>
<s:label key="mozartManagerConf.mangerLogLevel" />
<s:select id="mangerLogLevel"
cssStyle="display:none" list="logLevelList"
name="xxxx.LogLevel"
value="xxx.mangerLogLevel"
headerKey="" headerValue="" />
</span>
</td>
</tr>
<th>Log level</th>
<td onclick="makeSelectEnabled(this)" class="editThisAttribute">
<span>
<s:label key="mozartManagerConf.mangerLogLevel" />
<s:select id="mangerLogLevel"
cssStyle="display:none" list="logLevelList"
name="xxxx.LogLevel"
value="xxx.mangerLogLevel"
headerKey="" headerValue="" />
</span>
</td>
</tr>
注意:
1.使用struts2的標(biāo)簽select顯示下拉列表
list對(duì)應(yīng)的logLevelList為下拉數(shù)據(jù),value="mozartManagerConf.mangerLogLevel" 為當(dāng)前顯示數(shù)據(jù)
2.在構(gòu)造函數(shù)中填充logLevelList(每次請(qǐng)求都會(huì)重新初始化一個(gè)Action實(shí)例)
3.具體實(shí)例可以參見struts2-showCase
posted on 2007-06-12 16:50 想飛就飛 閱讀(842) 評(píng)論(0) 編輯 收藏 所屬分類: JAVASCRIPT備忘錄