
第一步:页面加载完成时,利用jquery中的一函数,调用js方法,js方法,发送ajax请求,去后台查找父类权限集合,响应回来json格式的数据,对数据进行操作,往页面上添加内容
//页面初始化加载菜单内容
$(document).ready(function(){
loadPower(0);
}); //加载一级权限菜单
function loadPower(pId){
$.ax({
type: "get",
url: "<%=request.getContextPath()%>/master/sysPower_loadParentPower.action?sysPower.sysParentId="+pId,
async: false,
dateType: "json",
success: function(resp){
var powers = resp["rows"];
if(powers.length>0){
var showPowers = $("#showPowers").html();
for(var i=0;i<powers.length;i++){
showPowers += "<li id='"+powers[i].sysPowerId+"'><a href='javascript:void(0)' onclick=\"loadChildPower('"+powers[i].sysPowerId+"');\">"+powers[i].sysPowerName+"</a><div class='opt'><a href='javascript:void(0)' onclick=\"updatePower('"+powers[i].sysPowerId+"');\">编辑</a> | <a href='javascript:void(0)' onclick=\"deletePower('"+powers[i].sysPowerId+"');\">删除</a> </div></li>";
}
$("#showPowers").html(showPowers);
}
}
});
}
第二步:在拼写的页面中,添加操作的请求地址。例如(加载父权限下的子权限,修改,删除操作的url请求后台的地址)
//加载二级权限菜单
function loadChildPower(pId){
if($("#"+pId).find("ul").length==0){
$("#"+pId).append("<ul></ul>");
$.ax({
type: "get",
url: "<%=request.getContextPath()%>/master/sysPower_loadParentPower.action?sysPower.sysParentId="+pId,
async: false,
dateType: "json",
success: function(resp){
var powers = resp["rows"];
if(powers.length>0){
for(var i=0;i<powers.length;i++){
$("#"+pId).find("ul").append("<li id='"+powers[i].sysPowerId+"'>"+powers[i].sysPowerName+"<div class='opt'><a href='javascript:void(0)' onclick=\"updatePower('"+powers[i].sysPowerId+"');\">编辑</a> | <a href='javascript:void(0)' onclick=\"deletePower('"+powers[i].sysPowerId+"');\">删除</a> </div> </li>");
}
} else {
$("#"+pId).find("ul").append("<li>暂无下级权限 <div class='opt'>无操作</div></li>");
}
}
});
} else {
//显示\隐藏菜单
if($("#"+pId).find("ul").css("display")=="block"){
$("#"+pId).find("ul").css("display","none");
} else {
$("#"+pId).find("ul").css("display","block");
}
}
}
第三步:修改和删除权限的js操作
//编辑
function updatePower(powerId){
window.open("<%=request.getContextPath()%>/master/sysPower_findPowerById.action?sysPower.sysPowerId="+powerId,"","height=400,width=600,top=200,left=450,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no");
}
//删除
function deletePower(powerId){
if(window.confirm("确认删除?"))
$.ax({
type:"get",
url:"<%=request.getContextPath()%>/master/sysPower_deletePower.action?sysPower.sysPowerId="+powerId,
async: false,
//dataType:"json",
success:function(resp){
if(resp==true){
$("#"+powerId).remove();
}
}
});
}
第四步:当是修改权限的时候,向后台发送ajax请求((会打开一个新的窗口,子页面)),查处该权限的信息,然后回显到新窗口。提交新窗口的form表单修改,响应回一个页面,页面上一个按钮,用来刷新父页面,是修改权限的窗口。
//子窗口回显信息的form表单
<form action="<%=request.getContextPath() %>/master/sysPower_updatePower.action" method="post">
<div class="formbody"> <div class="formtitle"><span>权限详情</span></div> <ul class="forminfo">
<input name="sysPower.sysPowerId" type="hidden" class="dfinput" value="${sysPower.sysPowerId }" />
<input name="sysPower.sysParentId" type="hidden" class="dfinput" value="${sysPower.sysParentId }" />
<li><label>权限名称</label><input name="sysPower.sysPowerName" type="text" class="dfinput" value="${sysPower.sysPowerName }" /></li>
<li><label>权限URL</label><input name="sysPower.sysPowerUrl" type="text" class="dfinput" value="${sysPower.sysPowerUrl }" /></li>
<li><label>权限排序</label><input name="sysPower.sysSort" type="text" class="dfinput" value="${sysPower.sysSort }" /></li>
<li>
<label> </label><input name="" type="submit" class="btn" value="提交修改" />
</li>
</ul> </div>
</form> //提交form表单后,响应回来的页面,有一个按钮,出动js方法,刷新父窗口内容,让父窗口是修改后的显示 <script type="text/javascript">
function freshAndClose(){
window.opener.location.reload(true);
setTimeout("window.close()",500);
}
</script> </head> <body> 更新成功<br/>
<input type="button" class="btn" value="关闭" onclick="freshAndClose();"/> </body>