第一步:页面加载完成时,利用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. linux 命令 wc

    语法:wc [选项] 文件… 说明:该命令统计给定文件中的字节数.字数.行数.如果没有给出文件名,则从标准输入读取.wc同时也给出所有指定文件的总统计数.字是由空格字符区分开的最大字符串. (1) 统 ...

  2. C#为什么要装箱和拆箱

    来自论坛4楼的回答非常棒,地址:https://bbs.csdn.net/topics/390624164?page=1 内容如下: 道理很简单,按理说C#被设计成一种完全面向对象的语言.因此,包括数 ...

  3. jenkins中的流水线( pipeline)的理解(未完)

    目录 一.理论概述 Jenkins流水线的发展历程 什么是Jenkins流水线 一.理论概述 pipeline是流水线的英文释义,文档中统一称为流水线 Jenkins流水线的发展历程 ​ 在Jenki ...

  4. 剖析.o文件ELF组成

    ELF文件结构组成 ①总共13个节 ②每个节都有一个编号.从ELF头开始编号,编号从0开始,编号的作用就是用来索引(找到)不同节的. ③每个.o的都是这样的结构.链接时要做的就是,将ELF格式的.o全 ...

  5. cmake下cmake_c_flags,add_definitions

    cmake_c_flags用来设置编译选项 如 -g -wall(不展示警告) add_definitions 添加编译参数,比如add_definitions(-DDEBUG)将在gcc命令行添加D ...

  6. 记一个VS连接过程中找不到cpp的解决方法

    在新增几个qt页面时,发现原来没动的几个cpp 连接报错了,错误均是qt的相关文件找不到 应该是moc文件没有生产或者没有被包含进工程.我想着既然我没动,应该不会是moc的原因,就在其他方向解决了很久 ...

  7. Robot Framework--RIDE面板与库的说明

    Robot Framework的测试用例是以project作为单位进行管理的.一个project可以包含多个Test Suite文件,每一个Test Suite可以包含多条测试用例一个Test Sui ...

  8. vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

    默认,webpack无法打包.vue文件,需要安装 相关的loader: cnpm i vue-loader vue-template-compiler -D 提示以下错误信息: Module Err ...

  9. 【CCF CSP】 20171203 行车路线 Java(有问题)80分

    问题描述 小明和小芳出去乡村玩,小明负责开车,小芳来导航. 小芳将可能的道路分为大道和小道.大道比较好走,每走1公里小明会增加1的疲劳度.小道不好走,如果连续走小道,小明的疲劳值会快速增加,连续走s公 ...

  10. cpu 或 内存 偏高的分析套路

    参考资料: https://mp.weixin.qq.com/s/fb9YxJr-yDdYQ86RE47y1w 1)通过针对此软件专业的分析工具或命令,找到占用cpu高的函数,2)通过调用栈(或源码搜 ...