本项目用struts2框架 ，Extjs3.4
1.
jsp文件中引用js，大部分Ext代码写在js文件中。
jsp文件：
2. assign_role.js文件：
3. 'role_checkboxJson.action'连接对应的方法，传递了一个userid值，根据值判断复选框状态，若此用户已经选择了,则页面显示勾选，checked=true
手写生成json格式数据：
4.Json所得到的数据为：
[{id:'0',boxLabel:'XX管理员',name:'role_id',inputValue:'1',checked:true},{id:'1',boxLabel:'XX管理员',name:'role_id',inputValue:'3',checked:true},{id:'2',boxLabel:'XX管理员',name:'role_id',inputValue:'10',checked:false},{id:'3',boxLabel:'用户',name:'role_id',inputValue:'11',checked:false}]
其中，boxLabel为复选框对应文字，name为提交的参数名，inputValue为选项值。
1.
jsp文件中引用js，大部分Ext代码写在js文件中。
jsp文件：
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>指派角色</title>
<link rel="stylesheet" type="text/css" href="css/ext/ext-all.css" />
<script type="text/javascript" src="js/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext/ext-all.js"></script>
<script type="text/javascript" src="js/ext/form/states.js"></script>
<script type="text/javascript" src="js/ext/form/assign_role.js"></script>
<link rel="stylesheet" type="text/css" href="css/ext/forms.css"/>
<!-- Common Styles for the examples -->
<script type="text/javascript" src="js/ext/examples.js"></script>
<link href="css/ext/ext-patch.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="grid"></div>
<input type="hidden" name="userid" id="userid" value='<s:property value="userid"/>'/>
<input type="hidden" name="user.username" id="user.username" value='<s:property value="user.username"/>'/>
</body>
</html>
2. assign_role.js文件：
/*!
* Ext JS Library 3.4.0
* Copyright(c) 2006-2011 Sencha Inc.
* licensing@sencha.com
* http://www.sencha.com/license
*/
Ext.onReady(function(){
var userid;
var json='';
Ext.Ajax.request({
url: 'role_checkboxJson.action',
params: {userid:document.getElementById('userid').value},
method: 'POST',
dataType:'json',
success: function(response,options){
json=Ext.util.JSON.decode(response.responseText);
var checkGroup = new Ext.form.FieldSet({
xtype: 'fieldset',
title: '授权'+ (document.getElementById('user.username').value?'('+document.getElementById('user.username').value+')':''),
autoHeight: true,
layout: 'form',
// collapsed: true, // initially collapse the group
collapsible: true,
items: [{
id:'cc',
xtype: 'checkboxgroup',
fieldLabel: '选择角色 ',
name:'FileItype',
// Distribute controls across 3 even columns, filling each row
// from left to right before starting the next row
columns: 4,
items:json
}]
});
var asignResource_form = new Ext.FormPanel({
// title: '指派资源',
frame: true,
labelWidth: 110,
width: 600,
renderTo:'grid',
// bodyStyle: 'padding:0 10px 0;',
items: [
checkGroup
],
buttons: [{
text: '授权',
handler: function(){
var FileItype=asignResource_form.getForm().findField('FileItype').getValue();
var as=[];
for(i=0;i<FileItype.length;i++)
{
as[i]=FileItype[i].inputValue;
}
// alert(as);
if(asignResource_form.form.isValid()){
//提交到服务器操作
asignResource_form.form.doAction('submit',{
url:'assignRole.action',//文件路径
method:'post',//提交方法post或get
params:{userid:document.getElementById('userid').value},
//提交成功的回调函数
success:function(form,action){
if (action.result.success==true) {
Ext.Msg.alert('指派成功',action.result.msg);
//刷新父窗口、关闭本窗口
var win2 = parent.Ext.getCmp('win');
if (win2) {win2.close();}
// window.parent.location.href='userGrid.action';
// window.close();
// window.document.location='roleGrid.action';
} else {
Ext.Msg.alert('指派错误',action.result.msg);
}
},
//提交失败的回调函数
failure:function(){
Ext.Msg.alert('错误','服务器出现错误请稍后再试！');
}
});
}
// alert(Ext.get('resources').dom.value );
}}
,{
text: '重置',
handler: function(){
asignResource_form.getForm().reset();
}
},{//因为我这个窗口，是放在了某个界面弹出的win窗口，
//点击关闭可关闭弹出的窗口,在单独的页面是不执行的。
text: '关闭',
handler: function(){
var win2 = parent.Ext.getCmp('win');
if (win2) {win2.close();}
}
}]
});
}
});
// turn on validation errors beside the field globally
//显示验证错误的位置，改为旁边
Ext.form.Field.prototype.msgTarget = 'side';
});
3. 'role_checkboxJson.action'连接对应的方法，传递了一个userid值，根据值判断复选框状态，若此用户已经选择了,则页面显示勾选，checked=true
手写生成json格式数据：
public String RoleCheckBoxJson(int userid) {
if(userid==0){
return null;
}
List<Role> roles = ((RoleMapper) mapper).getRolesByUserId(userid);
List<Role> allroles= ((RoleMapper)mapper).getAllRoles();
System.out.println(roles.size());
for(int j=0;j<roles.size();j++){
System.out.println(roles.get(j).getId());
}
if(roles==null){
return null;
} //[{boxLabel: 'Item 2', name: 'resource_id', inputValue : 2,checked: true},{}]
StringBuilder sb = new StringBuilder();
sb.append("[");
for (int i = 0; i < allroles.size(); i++) {
boolean flag=false;
Role r = allroles.get(i);
sb.append("{");
sb.append("id:\'").append(i).append("\',");
sb.append("boxLabel:\'").append(r.getNote()).append("\',");
sb.append("name:\'").append("role_id").append("\',");
sb.append("inputValue:\'").append(r.getId()).append("\',");
for(int j=0;j<roles.size();j++){
System.out.println(roles.get(j).getId());
System.out.println(allroles.get(i).getId());
if(roles.get(j).getId()==allroles.get(i).getId()){
flag=true;
}
}
if(flag==true){
sb.append("checked:").append(true);
}else{
sb.append("checked:").append(false);
}
sb.append("}");
if (i < allroles.size() - 1) {
sb.append(',');
}
}
sb.append("]");
return sb.toString();
}
4.Json所得到的数据为：
[{id:'0',boxLabel:'XX管理员',name:'role_id',inputValue:'1',checked:true},{id:'1',boxLabel:'XX管理员',name:'role_id',inputValue:'3',checked:true},{id:'2',boxLabel:'XX管理员',name:'role_id',inputValue:'10',checked:false},{id:'3',boxLabel:'用户',name:'role_id',inputValue:'11',checked:false}]
其中，boxLabel为复选框对应文字，name为提交的参数名，inputValue为选项值。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
