不再Struts2的框架下下拉框和单选框的映射是非常复杂和麻烦的,这里一个组件,由Vososo站长开发调试,现在免费发布给大家使用,欢迎反馈。
render.js 代码如下:
/*映射 ERadio 脚本
用法:
1、在页面reload的时候配置
jQuery(function(){
renderERadio();
});
2、在页面中配置
<span>{"val":"男","name":"student","vals":["女","男"]}</span>
<span>{"val":"-1","name":"teacher","vals":["1","0","-1"],"radioTxts":["有","无","其他"]}</span>
即可在<span></span>内部生成
<input type="radio" .... /> radioTxt
配置参数:
val : radio 的值
name : radio 的 name 属性
vals : radio 数组值
radioTxts : 可选参数 ,默认等于 vals
*/
function renderERadio(){
jQuery.each(jQuery(".eRadio"),function(){
vv = jQuery.parseJSON(jQuery(this).html());
if(vv.radioTxts==undefined){
vv.radioTxts=vv.vals;
}else if(vv.vals==undefined){
vv.vals=vv.radioTxts;
}
var html = "";
jQuery.each(vv.vals,function(i,n){
if(vv.val==vv.vals[i]){
html += '<input type="radio" name="'+vv.name+'" value="'+vv.vals[i]+'" checked="true" />'+vv.radioTxts[i];
}else{
html += '<input type="radio" name="'+vv.name+'" value="'+vv.vals[i]+'" />'+vv.radioTxts[i];
}
});
jQuery(this).html(html);
});
}
/*映射 eSelect 脚本
用法通 eRadio:
1、在页面reload的时候配置
jQuery(function(){
renderESelect();
});
2、在页面中配置
<span>{"val":"男","name":"student","vals":["女","男"]}</span>
或者
<span>{"val":"-1","name":"teacher","vals":["1","0","-1"],"optionVals":["有","无","其他"]}</span>
即可在<span></span>内部生成
<select name="xxx">..optionVal..</select>
配置参数:
val : select 的值
name : select 的 name 属性
vals : select 的数组值
optionVals : 可选参数 ,默认等于 vals
*/
function renderESelect(){
jQuery.each(jQuery(".eSelect"),function(){
vv = jQuery.parseJSON(jQuery(this).html());
if(vv.optionVals==undefined){
vv.optionVals=vv.vals;
}else if(vv.vals==undefined){
vv.vals=vv.optionVals;
}
var html = '<select name="'+vv.name+'">';
jQuery.each(vv.vals,function(i,n){
if(vv.val==vv.vals[i]){
html += '<option value="'+vv.vals[i]+'" selected="true">'+vv.optionVals[i]+'</option>';
}else{
html += '<option value="'+vv.vals[i]+'">'+vv.optionVals[i]+'</option>';
}
});
html += '</select>';
jQuery(this).html(html);
});
}