该方法是采用2的幂相求和的方式,用该整数结果来记录同一个类的多个checkbox的选中状态,读取信息,再分解该整数,从而得出哪个checkbox是否选中了!
?
前台js:
?
Ext.onReady(function(){
var win = new Ext.Window({
title:'testForm',
heigth:400,
width:550,
buttonAlign:'center'
});
var hobby1 = new Ext.form.Checkbox({
boxLabel:'足球',
name:'hobby1'
});
var hobby2 = new Ext.form.Checkbox({
boxLabel:'互联网',
name:'hobby2'
});
?
var hobby3 = new Ext.form.Checkbox({
boxLabel:'hobby3',
name:'hobby3'
});
var hobby4 = new Ext.form.Checkbox({
boxLabel:'hobby4',
name:'hobby4'
});
var hobby5 = new Ext.form.Checkbox({
boxLabel:'hobby5',
name:'hobby5'
});
var hobby6 = new Ext.form.Checkbox({
boxLabel:'hobby6',
name:'hobby6'
});
var hobby = new Ext.form.CheckboxGroup({
fieldLabel:'爱好',
items:[hobby1,hobby2,hobby3,hobby4,hobby5,hobby6]
});
var sex = new Ext.form.RadioGroup({
id:'sex',
fieldLabel:'性别',
items:[
{boxLabel:'男',name:'sex',inputValue:'1'},
{boxLabel:'女',name:'sex',inputValue:'2'}
]
})
var formPanel = new Ext.form.FormPanel({
heigth:400,
width:550,
items:[hobby,sex],
labelAlign:'right',
labelWidth:'30'
});
win.add(formPanel);
win.addButton(new Ext.Button({
text:'保存',
handler:function(){
formPanel.getForm().submit({
url:'heminghui.htm?act=insertBaseInfor',
params:{},
success:function(obj,data){
alert('成功');
}
})
}
}));
win.on('afterrender',function(){
Ext.Ajax.request({
url:'heminghui.htm?act=getBaseInfor',
success:function(response){
var data = Ext.decode(response.responseText);
//从data中读取出多个checkbox的状态
for(var i=1;i<=6;i++){
data['hobby'+i] = ((parseInt(data.hobby)&Math.pow(2,i-1))== Math.pow(2,i-1));
}
formPanel.getForm().setValues(data);
}
});
});
win.show();
})
?
?
后台:
信息保存方法:
?
public void insertBaseInfor(HttpServletRequest request,HttpServletResponse response) throws IOException{
String sex = request.getParameter("sex");
int hobby = 0 ;
for(int i=1;i<=6;i++){
//采用2的幂求和的方式记录多个checkbox的选中状态
if("on".equals(request.getParameter("hobby"+i))){
hobby+=Math.pow(2, i-1);
};
}
Map<String,Object> param = new HashMap<String,Object>();
param.put("id", 2);
param.put("sex", sex);
param.put("hobby", hobby);
dao.insertUser(param);
response.getOutputStream().write("{'success':true,'msg':'success'}".getBytes());
}
?
?
信息读取方法:
?
public void getBaseInfor(HttpServletRequest request,HttpServletResponse response) throws IOException{
Map<String,Object> params = new HashMap<String,Object>();
params.put("id", 2);
Map<String,String> list = dao.queryUser(params);
JSONObject obj = JSONObject.fromObject(list);//返回
response.getOutputStream().write(obj.toString().getBytes());
}
?
?
?
?