本项目用struts2框架 ,Extjs3.4
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为选项值。
- 描述: 效果图
- 大小: 13.2 KB
分享到:
相关推荐
基于EXTjs 的 动态复选框树 json数据交互
Extjs checkboxgrop动态获取后台数据,并默认为全选状态
extjs带复选框的树包括全选 反选 子选父以及 父选子 与adf在jsp页面得应用 包含了工具类以及针对extjs树节点增加、删除、修改的工具方法
extjs4.1下拉复选框完整DEMO,包含了extjs4.1主文件,代码实现了动态加载功能,所以需要配置IIS或者apache。插件文件在ux目录下,请自行参考。
分享一个ExtJs Tree, 完整的带有复选框的树形结构
ExtJs学习资料22-从服务器获取JSON数据并分页处理.doc
网上搜索了许久未找到...Extjs4.2 带复选框的下拉树,解决了向下勾选子节点、向上勾选父节点,正选反选获取值等问题,勾选的节点显示displayfield值直接显示在下拉文本框中。需要引用ext-all.js和ext-all-neptune.css
使用ExtJs获取后台json格式的数据必须的七个jar包,commons-beanuti-1s-1.7.0.jar,commons-collections-3.1.jar,commons-lang-2.5.jar,commons-logging-1.0.4.jar,ezmorph-1.0.4.jar,json-lib-2.1.jar,...
extjs 如图,实现带有复选框的树,选中父节点时,选中所有子节点。取消所有子节点时,才能取消根节点。 代码如下: var Fpanel = new Ext.tree.TreePanel({ id:’ptree’, region:’west’, layout:’anchor’, border...
通过修改网络上的一个树的例子实现节点的动态加载,还支持checkbox。
1、解压,进入extjs4.2.1\examples\form,浏览器打开 hbox-form.html 文件,当我勾选中任意一个多选下拉框,然后再勾选‘ALL’时,‘ALL’却是不被选中的状态,且...extjs4.2.1\examples\form\MultipleComboBox.js
checkboxgroup中修改时赋值是最难解决的,要改写方法才能实现
ExtJs4 Checkbox tree
提问 - Boxy.ask() - 用户定义的选项,选择项传递给回调函数 弹出 - Boxy.alert() - 回调函数总是不被调用 确认 - Boxy.confirm() - 仅当用户选择了“确认”时回调函数会被调用 行业选择器 - Boxy.industry() - 仅当...
EXTJS框架简介里包含各种EXT框架案例,快速上手EXT之宝典
extjs3.2 3.3 3.4都测试过可以使用,带有复选框的树菜单,选中父节点子节点全部选中,选中子节点父节点选中(以及父节点的父节点等),其余版本不知道能否使用
主要介绍了Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法,需要的朋友可以参考下
CheckBox(复选框)主要用来接收用户选择的选项 如图所示(请忽略UI的不好看): 该弹出窗口的主要代码如下: 代码如下: var win = new Ext.Window({ modal : true, title : ‘确定要拒绝该表吗?’, width : 500, ...
extjs4 MVC2 TreePanel动态JSON实现 extjs4 MVC2 TreePanel动态JSON实现