第一步：页面加载完成时，利用jquery中的一函数，调用js方法，js方法，发送ajax请求，去后台查找父类权限集合，响应回来json格式的数据，对数据进行操作，往页面上添加内容
1 //页面初始化加载菜单内容 2 $(document).ready(function(){ 3 loadPower(0); 4 }); 5 6 //加载一级权限菜单 7 function loadPower(pId){ 8 $.ax({ 9 type: "get", 10 url: "<%=request.getContextPath()%>/master/sysPower_loadParentPower.action?sysPower.sysParentId="+pId, 11 async: false, 12 dateType: "json", 13 success: function(resp){ 14 var powers = resp["rows"]; 15 if(powers.length>0){ 16 var showPowers = $("#showPowers").html(); 17 for(var i=0;i<powers.length;i++){ 18 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>"; 19 } 20 $("#showPowers").html(showPowers); 21 } 22 } 23 }); 24 }
第二步：在拼写的页面中，添加操作的请求地址。例如（加载父权限下的子权限，修改，删除操作的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>