用java和Extjs结合如何做权限管理
展开全部
想做分页必须要与后台进行交互.给你一个我写的程序前台页面:
<%@ page contentType="text/html; charset=UTF-8" language="java"%>
<%@ taglib uri="" prefix="bean"%>
<%@ taglib uri="" prefix="nested"%>
<%@ taglib uri="" prefix="logic"%>
<%@ taglib uri="" prefix="tiles"%>
<%@ taglib uri="" prefix="html"%>
<html>
<head>
<title></title>
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/tab.css" type="text/css"></link>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/scripts/ext/resources/css/ext-all.css">
<script type="text/javascript" src="<%=request.getContextPath() %>/scripts/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/scripts/ext/ext-all.js"></script>
</head>
<script type="text/javascript">
module_js =function() {
var ds, cm, gridHead, gridFoot, paging, grid;
var countPerPage=12; //每页显示几条
var mod_module_win,mod_id_temp;
return {
init : function(){
//设置布局
var border = new Ext.Panel({
title: '布局',
layout:'border',
items: [{
title: '北部面板',
region: 'north',
height: 100,
minSize: 75,
maxSize: 250//,
//margins: '0 5 5 5'
},{
title: '模块列表',
region:'center'//,
// margins: '5 5 0 0'
}]
});
//显示模块列表
ds = new Ext.data.Store({ //定义数据集合
proxy: new Ext.data.HttpProxy(), //读取列表的方法,id是传进来的
reader: new Ext.data.JsonReader({ //读取方式
totalProperty: 'totalProperty', //后台返回的总记录数,要与后台字段对应
root: 'jsondata' //后台返回的结果
}, [
,
,
,
])
});
ds.on('beforeload',beforeload);
function beforeload(myds,options){
var conditaion = ;
options=options||{};
options.params = options.params||{};
options.params.conditaion = Ext.util.JSON.encode(conditaion);
return true;
}
ds.load(}); //加载数据
cm = new Ext.grid.ColumnModel([ //定义列
new Ext.grid.RowNumberer(), //行号
,
,
,
]);
var pagingBar = new Ext.PagingToolbar({ //分页按钮
pageSize: countPerPage,
store: ds,
displayInfo: true,
displayMsg: '第 条 - 第 条 共 条',
emptyMsg: "没有数据",
items:[
'-', {
pressed: true,
enableToggle:true,
text: '删 除 模 块',
cls: 'x-btn-text-icon details',
toggleHandler: confirmDelModule
}]
});
grid = new Ext.grid.GridPanel({ //开始构建列表
el: 'module_grid', //所使用的div
ds: ds, //数据集合
cm: cm, //列定义
height: 340, //该列表的高和宽
width: 590,
bbar: pagingBar
});
grid.render(); //开始生成列表
grid.on('rowdblclick',function(grid,rowIndex,e){
var mod_id=ds.getAt(rowIndex).data['functionId'];
//var mod_id=ds.getAt(rowIndex).functionId;
mod_id_temp = mod_id;
openModPage(mod_id);
});
function openModPage(mod_id){
if(typeof(mod_id)=="undefined"||mod_id==null){
Ext.Msg.alert("提示信息","请选择您要修改的一行");
return false;
}
document.getElementById('mod_module').style.display="";
var handle = function (opts, success, response) {
if(success){
var data = eval("("+response.responseText+")");
if(data.result){
var nav = new Ext.Panel({
items:[{
id:'mod_module_id',
width:600,
height:300,
contentEl:'mod_module'
}]
});
if(!mod_module_win||mod_module_win!=null){
mod_module_win = new Ext.Window({
width: 600,
height: 300,
closeAction:'hide',
minimizable: false,
title: '修改模块',
items:[nav],
keys: [{ key: 27,
fn: function() }]});
mod_module_win.on('minimize', function(){
mod_module_win.toggleCollapse();});
mod_module_win.show();
}
mod_module_win.show(this);
document.getElementById('mod_functionName').value = data.functionName;
document.getElementById('mod_showName').value = data.showName;
document.getElementById('mod_showOrder').value = data.showOrder;
document.getElementById('mod_linkUrl').value = data.linkUrl;
document.getElementById('mod_hrefTarget').value = data.hrefTarget;
document.getElementById('mod_showInMenu').value = data.showInMenu;
mod_id_temp = data.functionId;
}else{
Ext.Msg.alert("提示信息",data.message);
}
}else{
Ext.Msg.alert("提示信息","ajax请求没能正常完成");
}
};
var url = 'sysFunction.do?method=toModModule';
var params = )};
var connection = new Ext.data.Connection();
connection.request();
}
function confirmDelModule()
{
var rows=grid.getSelectionModel().getSelections();
if(typeof(rows)=="undefined"||rows===null||rows==""){
Ext.Msg.alert("提示信息","请选择要删除的模块");
return false;
}
var del_ids="";
for(var i=0;i<rows.length;i++)
{
del_ids=del_ids+rows[i].get("functionId")+',';
}
var handle = function (opts, success, response) {
if(success){
var data = eval("("+response.responseText+")");
if(data.result){
if(data.count>0){
Ext.Msg.alert("提示信息","该模块下面还有"+data.count+"个菜单？请先删除其子菜单后再删除该模块？！");
return false;
}else{
Ext.MessageBox.confirm('删除提示', '确定删除该模块吗？', delModule);
}
}else{
Ext.Msg.alert("提示信息",data.message);
}
}else{
Ext.Msg.alert("提示信息","ajax请求没能正常完成");
}
};
var url = 'sysFunction.do?method=preDelModule';
var params = )};
var connection = new Ext.data.Connection();
connection.request();
}
function delModule(btn)
{
if(btn=="yes"){
var rows=grid.getSelectionModel().getSelections();
if(typeof(rows)=="undefined"||rows===null||rows==""){
Ext.Msg.alert("提示信息","请选择要删除的模块");
return false;
}
var del_ids="";
for(var i=0;i<rows.length;i++)
{
del_ids=del_ids+rows[i].get("functionId")+',';
}
var handle = function (opts, success, response) {
if(success){
var data = eval("("+response.responseText+")");
if(data.result){
ds.reload();
Ext.Msg.alert("提示信息","删除成功");
}else{
Ext.Msg.alert("提示信息",data.message);
}
}else{
Ext.Msg.alert("提示信息","ajax请求没能正常完成");
}
};
var url = 'sysFunction.do?method=delModule';
var params = )};
var connection = new Ext.data.Connection();
connection.request();
}
}
},closeModModuleWin:function()
{
mod_module_win.hide();
},modModule:function()
{
var functionName = document.getElementById('mod_functionName').value;
var showName = document.getElementById('mod_showName').value;
var showOrder = document.getElementById('mod_showOrder').value;
var linkUrl = document.getElementById('mod_linkUrl').value;
var hrefTarget = document.getElementById('mod_hrefTarget').value;
var showInmenu = document.getElementById('mod_showInMenu').value;
var handle = function (opts, success, response) {
if(success){
var data = eval("("+response.responseText+")");
if(data.result){
module_js.closeModModuleWin();
ds.reload();
Ext.Msg.alert("提示信息","修改成功");
}else{
Ext.Msg.alert("提示信息",data.message);
}
}else{
Ext.Msg.alert("提示信息","ajax请求没能正常完成");
}
};
var url = 'sysFunction.do?method=modModule';
var params = )};
var connection = new Ext.data.Connection();
connection.request();
},selectModule:function()
{
ds.load(});
}
};
}();
Ext.EventManager.onDocumentReady(module_js.init, module_js, true);
</script>
<body>
<table>
<tr>
<td align="center">
<div id="north" align="left">
<center><h3>查询模块</h3></center>
<table align="center">
<tr>
<td>
模块名(英文):
</td>
<td height="25">
<input type="text" id="functionName">
</td>
<td>
模块显示名:
</td>
<td height="25">
<input type="text" id="showName">
</td>
</tr>
<tr>
<td>
显示次序:
</td>
<td height="25">
<input type="text" id="showOrder">
</td>
<td>
链接路径(没有不填):
</td>
<td height="25">
<input type="text" id="linkUrl">
</td>
</tr>
<tr>
<td>
所在窗口(没有不填):
</td>
<td height="25">
<input type="text" id="hrefTarget">
</td>
<td>
是否在菜单中显示:
</td>
<td height="25">
<select id="showInMenu" style="width:155px">
<option value="">所有</option>
<option value="t">显示</option>
<option value="f">不显示</option>
</select>
</td>
</tr>
<tr>
<td>
备注(没有不填):
</td>
<td height="25" colspan="3">
<input type="text" id="memo" size="60">
</td>
</tr>
<tr>
<td height="25" align="center" colspan="4">
<input type="button" name="subButton" id="subButton" value="查询" onclick="module_js.selectModule();">
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
<br>
<div id="center">
<div id="module_grid">
</div>
</div>
</td>
</tr>
</table>
<div id="mod_module" style="display:none">
<center><h3>修改模块</h3></center>
<table align="center">
<tr>
<td>
模块名(英文):
</td>
<td height="25">
<input type="text" id="mod_functionName" size="60">
</td>
</tr>
<tr>
<td>
模块显示名:
</td>
<td height="25">
<input type="text" id="mod_showName" size="60">
</td>
</tr>
<tr>
<td>
显示次序:
</td>
<td height="25">
<input type="text" id="mod_showOrder" size="60">
</td>
</tr>
<tr>
<td>
链接路径(没有不填):
</td>
<td height="25">
<input type="text" id="mod_linkUrl" size="60">
</td>
</tr>
<tr>
<td>
所在窗口(没有不填):
</td>
<td height="25">
<input type="text" id="mod_hrefTarget" size="60">
</td>
</tr>
<tr>
<td>
是否在菜单中显示:
</td>
<td height="25">
<select id="mod_showInMenu" style="width:435px">
<option value="t">显示</option>
<option value="f">不显示</option>
</select>
</td>
</tr>
<tr>
<td>
备注(没有不填):
</td>
<td height="25">
<input type="text" id="mod_memo" size="60">
</td>
</tr>
<tr>
<td height="25" align="center" colspan="2">
<input type="button" name="subButton" id="subButton" value="确认" onclick="module_js.modModule();">
<input type="button" name="closeButton" value="关闭" onclick="module_js.closeModModuleWin();">
</td>
</tr>
</table>
</div>
</body>
</html>
你参考下,把例子往下接着做,看着是有点长,不过不要紧,你先把教程的例子看完,然后你再看就知道需要提炼什么了,我这个jsp涵盖了很多东西,你做其他什么的时候也许也会用到的.
<%@ page contentType="text/html; charset=UTF-8" language="java"%>
<%@ taglib uri="" prefix="bean"%>
<%@ taglib uri="" prefix="nested"%>
<%@ taglib uri="" prefix="logic"%>
<%@ taglib uri="" prefix="tiles"%>
<%@ taglib uri="" prefix="html"%>
<html>
<head>
<title></title>
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/tab.css" type="text/css"></link>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/scripts/ext/resources/css/ext-all.css">
<script type="text/javascript" src="<%=request.getContextPath() %>/scripts/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/scripts/ext/ext-all.js"></script>
</head>
<script type="text/javascript">
module_js =function() {
var ds, cm, gridHead, gridFoot, paging, grid;
var countPerPage=12; //每页显示几条
var mod_module_win,mod_id_temp;
return {
init : function(){
//设置布局
var border = new Ext.Panel({
title: '布局',
layout:'border',
items: [{
title: '北部面板',
region: 'north',
height: 100,
minSize: 75,
maxSize: 250//,
//margins: '0 5 5 5'
},{
title: '模块列表',
region:'center'//,
// margins: '5 5 0 0'
}]
});
//显示模块列表
ds = new Ext.data.Store({ //定义数据集合
proxy: new Ext.data.HttpProxy(), //读取列表的方法,id是传进来的
reader: new Ext.data.JsonReader({ //读取方式
totalProperty: 'totalProperty', //后台返回的总记录数,要与后台字段对应
root: 'jsondata' //后台返回的结果
}, [
,
,
,
])
});
ds.on('beforeload',beforeload);
function beforeload(myds,options){
var conditaion = ;
options=options||{};
options.params = options.params||{};
options.params.conditaion = Ext.util.JSON.encode(conditaion);
return true;
}
ds.load(}); //加载数据
cm = new Ext.grid.ColumnModel([ //定义列
new Ext.grid.RowNumberer(), //行号
,
,
,
]);
var pagingBar = new Ext.PagingToolbar({ //分页按钮
pageSize: countPerPage,
store: ds,
displayInfo: true,
displayMsg: '第 条 - 第 条 共 条',
emptyMsg: "没有数据",
items:[
'-', {
pressed: true,
enableToggle:true,
text: '删 除 模 块',
cls: 'x-btn-text-icon details',
toggleHandler: confirmDelModule
}]
});
grid = new Ext.grid.GridPanel({ //开始构建列表
el: 'module_grid', //所使用的div
ds: ds, //数据集合
cm: cm, //列定义
height: 340, //该列表的高和宽
width: 590,
bbar: pagingBar
});
grid.render(); //开始生成列表
grid.on('rowdblclick',function(grid,rowIndex,e){
var mod_id=ds.getAt(rowIndex).data['functionId'];
//var mod_id=ds.getAt(rowIndex).functionId;
mod_id_temp = mod_id;
openModPage(mod_id);
});
function openModPage(mod_id){
if(typeof(mod_id)=="undefined"||mod_id==null){
Ext.Msg.alert("提示信息","请选择您要修改的一行");
return false;
}
document.getElementById('mod_module').style.display="";
var handle = function (opts, success, response) {
if(success){
var data = eval("("+response.responseText+")");
if(data.result){
var nav = new Ext.Panel({
items:[{
id:'mod_module_id',
width:600,
height:300,
contentEl:'mod_module'
}]
});
if(!mod_module_win||mod_module_win!=null){
mod_module_win = new Ext.Window({
width: 600,
height: 300,
closeAction:'hide',
minimizable: false,
title: '修改模块',
items:[nav],
keys: [{ key: 27,
fn: function() }]});
mod_module_win.on('minimize', function(){
mod_module_win.toggleCollapse();});
mod_module_win.show();
}
mod_module_win.show(this);
document.getElementById('mod_functionName').value = data.functionName;
document.getElementById('mod_showName').value = data.showName;
document.getElementById('mod_showOrder').value = data.showOrder;
document.getElementById('mod_linkUrl').value = data.linkUrl;
document.getElementById('mod_hrefTarget').value = data.hrefTarget;
document.getElementById('mod_showInMenu').value = data.showInMenu;
mod_id_temp = data.functionId;
}else{
Ext.Msg.alert("提示信息",data.message);
}
}else{
Ext.Msg.alert("提示信息","ajax请求没能正常完成");
}
};
var url = 'sysFunction.do?method=toModModule';
var params = )};
var connection = new Ext.data.Connection();
connection.request();
}
function confirmDelModule()
{
var rows=grid.getSelectionModel().getSelections();
if(typeof(rows)=="undefined"||rows===null||rows==""){
Ext.Msg.alert("提示信息","请选择要删除的模块");
return false;
}
var del_ids="";
for(var i=0;i<rows.length;i++)
{
del_ids=del_ids+rows[i].get("functionId")+',';
}
var handle = function (opts, success, response) {
if(success){
var data = eval("("+response.responseText+")");
if(data.result){
if(data.count>0){
Ext.Msg.alert("提示信息","该模块下面还有"+data.count+"个菜单？请先删除其子菜单后再删除该模块？！");
return false;
}else{
Ext.MessageBox.confirm('删除提示', '确定删除该模块吗？', delModule);
}
}else{
Ext.Msg.alert("提示信息",data.message);
}
}else{
Ext.Msg.alert("提示信息","ajax请求没能正常完成");
}
};
var url = 'sysFunction.do?method=preDelModule';
var params = )};
var connection = new Ext.data.Connection();
connection.request();
}
function delModule(btn)
{
if(btn=="yes"){
var rows=grid.getSelectionModel().getSelections();
if(typeof(rows)=="undefined"||rows===null||rows==""){
Ext.Msg.alert("提示信息","请选择要删除的模块");
return false;
}
var del_ids="";
for(var i=0;i<rows.length;i++)
{
del_ids=del_ids+rows[i].get("functionId")+',';
}
var handle = function (opts, success, response) {
if(success){
var data = eval("("+response.responseText+")");
if(data.result){
ds.reload();
Ext.Msg.alert("提示信息","删除成功");
}else{
Ext.Msg.alert("提示信息",data.message);
}
}else{
Ext.Msg.alert("提示信息","ajax请求没能正常完成");
}
};
var url = 'sysFunction.do?method=delModule';
var params = )};
var connection = new Ext.data.Connection();
connection.request();
}
}
},closeModModuleWin:function()
{
mod_module_win.hide();
},modModule:function()
{
var functionName = document.getElementById('mod_functionName').value;
var showName = document.getElementById('mod_showName').value;
var showOrder = document.getElementById('mod_showOrder').value;
var linkUrl = document.getElementById('mod_linkUrl').value;
var hrefTarget = document.getElementById('mod_hrefTarget').value;
var showInmenu = document.getElementById('mod_showInMenu').value;
var handle = function (opts, success, response) {
if(success){
var data = eval("("+response.responseText+")");
if(data.result){
module_js.closeModModuleWin();
ds.reload();
Ext.Msg.alert("提示信息","修改成功");
}else{
Ext.Msg.alert("提示信息",data.message);
}
}else{
Ext.Msg.alert("提示信息","ajax请求没能正常完成");
}
};
var url = 'sysFunction.do?method=modModule';
var params = )};
var connection = new Ext.data.Connection();
connection.request();
},selectModule:function()
{
ds.load(});
}
};
}();
Ext.EventManager.onDocumentReady(module_js.init, module_js, true);
</script>
<body>
<table>
<tr>
<td align="center">
<div id="north" align="left">
<center><h3>查询模块</h3></center>
<table align="center">
<tr>
<td>
模块名(英文):
</td>
<td height="25">
<input type="text" id="functionName">
</td>
<td>
模块显示名:
</td>
<td height="25">
<input type="text" id="showName">
</td>
</tr>
<tr>
<td>
显示次序:
</td>
<td height="25">
<input type="text" id="showOrder">
</td>
<td>
链接路径(没有不填):
</td>
<td height="25">
<input type="text" id="linkUrl">
</td>
</tr>
<tr>
<td>
所在窗口(没有不填):
</td>
<td height="25">
<input type="text" id="hrefTarget">
</td>
<td>
是否在菜单中显示:
</td>
<td height="25">
<select id="showInMenu" style="width:155px">
<option value="">所有</option>
<option value="t">显示</option>
<option value="f">不显示</option>
</select>
</td>
</tr>
<tr>
<td>
备注(没有不填):
</td>
<td height="25" colspan="3">
<input type="text" id="memo" size="60">
</td>
</tr>
<tr>
<td height="25" align="center" colspan="4">
<input type="button" name="subButton" id="subButton" value="查询" onclick="module_js.selectModule();">
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
<br>
<div id="center">
<div id="module_grid">
</div>
</div>
</td>
</tr>
</table>
<div id="mod_module" style="display:none">
<center><h3>修改模块</h3></center>
<table align="center">
<tr>
<td>
模块名(英文):
</td>
<td height="25">
<input type="text" id="mod_functionName" size="60">
</td>
</tr>
<tr>
<td>
模块显示名:
</td>
<td height="25">
<input type="text" id="mod_showName" size="60">
</td>
</tr>
<tr>
<td>
显示次序:
</td>
<td height="25">
<input type="text" id="mod_showOrder" size="60">
</td>
</tr>
<tr>
<td>
链接路径(没有不填):
</td>
<td height="25">
<input type="text" id="mod_linkUrl" size="60">
</td>
</tr>
<tr>
<td>
所在窗口(没有不填):
</td>
<td height="25">
<input type="text" id="mod_hrefTarget" size="60">
</td>
</tr>
<tr>
<td>
是否在菜单中显示:
</td>
<td height="25">
<select id="mod_showInMenu" style="width:435px">
<option value="t">显示</option>
<option value="f">不显示</option>
</select>
</td>
</tr>
<tr>
<td>
备注(没有不填):
</td>
<td height="25">
<input type="text" id="mod_memo" size="60">
</td>
</tr>
<tr>
<td height="25" align="center" colspan="2">
<input type="button" name="subButton" id="subButton" value="确认" onclick="module_js.modModule();">
<input type="button" name="closeButton" value="关闭" onclick="module_js.closeModModuleWin();">
</td>
</tr>
</table>
</div>
</body>
</html>
你参考下,把例子往下接着做,看着是有点长,不过不要紧,你先把教程的例子看完,然后你再看就知道需要提炼什么了,我这个jsp涵盖了很多东西,你做其他什么的时候也许也会用到的.
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
