第一步:页面加载完成时,利用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>&nbsp;</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>

javaScript(拼写树形)+ajax请求,去后台查找数据的更多相关文章

  1. Jquery progressbar通过Ajax请求获取后台进度演示

    项目源代码下载:http://download.csdn.net/detail/nuptboyzhb/6262253 1.简介 本文主要演示Jquery progressbar的进度条功能.js通过a ...

  2. 解决ajax请求(SpringMVC后台)响应415/400/405错误

    解决ajax请求(SpringMVC后台)响应415/400/405错误 后端代码 bean public class user { private String username; private ...

  3. 前端javascript发送ajax请求、后台书写function小案例

    HTML端页面: <td> <input class="pp_text" type="text" name="" valu ...

  4. jQuery实现的分页功能,包括ajax请求,后台数据,有完整demo

    一:需求分析 1)需要首页,末页功能 2)有点击查看上一页,下一页功能 3)页码到当前可视页码最后一页刷新页面 二:功能实现思路 也是分为三部分处理 1)点击首页,末页直接显示第一页或者最后一页内容, ...

  5. JQuery AJAX请求aspx后台方法

    利用JQuery封装好的AJAX来请求aspx的后台方法,还是比较方便的,但是要注意以下几点: 1.首先要在方法的顶部加上[WenMethod]的特性(此特性要引入using System.Web.S ...

  6. 发送Ajax请求获取JSON格式数据

    Aspx前端页面: <script type="text/javascript"> $(function () { $.getJSON("Ajax/TestA ...

  7. Ajax请求ashx返回各类数据的常见处理方式

    .请求text数据,在success事件中手动解析 前台: $.ajax({ type: "post", url: "checkFile.ashx", data ...

  8. 8.ajax与django后台json数据的交互

    1新建django项目名为json_ajax,应用名为app,在templates模板中新建ajax.html文件 ajax.html <!DOCTYPE html> <html l ...

  9. Jquery通过ajax请求NodeJS返回json数据

    最近看了NodeJS相关的,在网上查了下结合AJAX的应用,感觉应用前景还是不错的.为什么用这个组合呢? 1.NodeJS不需要安装,拷贝过去就可以使用,而环境变量可以只配置在当前cmd窗口,运行方便 ...

随机推荐

  1. Django组件之用户认证

    auth模块 1 from django.contrib import auth django.contrib.auth中提供了许多方法,这里主要介绍其中的三个: 1.1 .authenticate( ...

  2. SpringBoot Kafka 整合集成 示例教程

    1.使用IDEA新建工程,创建工程 springboot-kafka-producer 工程pom.xml文件添加如下依赖: <!-- 添加 kafka 依赖 --> <depend ...

  3. Scala环境安装步骤

    1.scala解释器本地安装 2.IDEA安装 3.安装IDEA的scala插件 4.创建maven项目 5.安装ScalaSDK

  4. DOORS 和Reqtify — 需求管理和需求追溯工具

    IBM Rational DOORS 可实现对整个产品的全生命周期需求管理,覆盖从需求.到设计以及测试阶段.是一款具有广泛使用的企业级专业需求管理工具.DOORS 可以将项目开发过程中产生的各级需求和 ...

  5. Eclipse修改项目jdk版本

    修改项目jdk版本(@Override的解决方法) (1)Eclipse的Window-Preferences->Java->Compiler(2)Eclipse的Project-> ...

  6. JAVA API连接HDFS HA集群

    使用JAVA API连接HDFS时我们需要使用NameNode的地址,开启HA后,两个NameNode可能会主备切换,如果连接的那台主机NameNode挂掉了,连接就会失败. HDFS提供了names ...

  7. idea启动springboot项目报Error running 'ServiceStarter': Command line is too long. Shorten command line for ServiceStarter or also for Application

    解决办法:在.idea文件夹下面的workspace.xml中的 <component name="PropertiesComponent">标签下面添加: <p ...

  8. 解决在macOS下安装了python却没有pip命令的问题【经验总结】

    可以使用brew直接安装python,但是安装完成了之后没有pip命令. pip是常用的python包管理工具,类似于java的maven.第一反应brew install pip,却提示没这货. 可 ...

  9. HDU 6170 - Two strings | 2017 ZJUT Multi-University Training 9

    /* HDU 6170 - Two strings [ DP ] | 2017 ZJUT Multi-University Training 9 题意: 定义*可以匹配任意长度,.可以匹配任意字符,问 ...

  10. Hadoop集群分布搭建

    一.准备工作 1.最少三台虚拟机或者实体机(官网上是默认是3台),我这边是3台 s1: 10.211.55.18 s2: 10.211.55.19 s3: 10.211.55.20 2.安装JDK 3 ...