========既然是 回显。重点也就是在页面js代码。 后台逻辑不是重点。
首先。今天最大的收获是:复习了一下JQuery Ajax请求的各种操作。===以及一些js 代码的语法特性。
【js本就是弱项。】######
总结如下:
宏观总结:
1、====回显 权限(复选框选中)和回显 菜单(zTree树结点选中) 共同点:
【都是回显,所以都要先 根据roleId 查询 当前修改的角色的 相关信息:例如:
回显 权限(复选框选中):就要先根据roleId 查询 当前修改的角色的 相关 权限,
回显 菜单(zTree树结点选中) :就要先 根据roleId 查询 当前修改的角色的 相关 菜单。
====都是为了 回显时判断,回显哪些 权限 和菜单。进行勾选。
】
2、=====【知道了 要回显 哪些数据】,下面开始【勾选 要回显的数据】。
2.1、勾选 权限(复选框)思想:
【遍历返回的json数据(json对象数组),比较data[i]和roleId相关的 权限 是否相同。相同则勾选。】
====【勾选宏观小结】:
======这里【回显都用了两个Ajax请求:分别 查询全部 和 查询 当前roleId相关的。】
例如:===回显权限:分别 查询全部 权限和 查询 当前roleId相关的权限。
例如:===回显菜单:分别 查询全部 菜单和 查询 当前roleId相关的菜单。
===######==注意 【js 语法问题】:
刚开始没查【如何在请求外部接收 Ajax请求返回的数据。】
====测了一下外部接收不到。alert(undefinded)。于是根据逻辑试试 这里用的post请求嵌套。
====结果是可行的。
=====后来知道了:请求外部接收不到Ajax请求返回的数据(alert(undefinded)。) 原因:【Ajax请求是异步的:alert先执行了】。
=====目前只知道可以 ajax形式语法的Ajax请求添加 异步属性=false。可以解决。
=====post 如何设置 异步属性=false?至今不知道。有js高手可以告知一下。
//2、 回显menu信息: 回显 菜单 ====
/*=====================回显菜单树 --start*/
//var menusData;
var treeNode; //====请求外部接收 Ajax请求返回的数据
//====查询要回显的
$.ajax({
url: "../../menuAction_findByRoleId.action",
data: {"roleId" : roleId},
type: 'post',
async:false, //==######=请求外部接收到Ajax请求 返回值的关键。===保证不是异步的请求。后面 【外部 接收变量 语句】 一定是后执行。
dataType: "json",
success: function(menus){
//menusData=menus;
//var treeNode = menus;//json总是返回全部,,//=====【嵌套post,返回两个data必须 不同名!!!】
treeNode=menus;
}
});
// alert("====外部接收menusData==="+JSON.stringify(treeNode))
//ajax动态查取菜单树全部节点数据(ztreeNodes)即:data
$.ajax({
url : '../../menuAction_findByPidIsNull.action',
type : 'POST',
dataType : 'json',
success : function(data) {
//.初始化ztree
$.fn.zTree.init($("#menuTree"), setting, data);
//alert("treeNode.length==="+treeNode.length);
//当角色关联的菜单数据长度大于0时,遍历角色关联的菜单数据
if (treeNode.length > 0) {
//获取ztree对象
var treeObj = $.fn.zTree.getZTreeObj("menuTree");
//alert("findByPidIsNull:menus:===treeNode:==="+JSON.stringify(treeNode))
//遍历勾选角色关联的菜单数据
for (var i = 0; i < treeNode.length; i++) {
if (treeNode[i].PId!=0 || ! ("0"==treeNode[i].PId ) ) { //==###=排除选中父节点。
//根据角色菜单节点数据的属性搜索,获取与完整菜单树完全匹配的节点JSON对象集合
var nodes = treeObj.getNodesByParam("id", treeNode[i].id, null);
//勾选当前选中的节点
treeObj.checkNode(nodes[0],true,true);
}
};
};
},
error : function(msg) {
alert('树加载异常!');
}
});//=====findByPidIsNull
/*=====================回显菜单树 --end*/
2.2、勾选菜单( zTree树节点的复选框)思想:
和 前面一样的思想。
====只不过zTree选中节点语法不一样。
网上找的。改了改。
查看API,了解了方法含义。
返回所有的菜单节点 数组:也就是请求返回的json对象数组。
注意:【勾选 时判断父节点不要勾选】。
因为【 父节点一旦勾选。zTree默认 级联勾选全部子节点。导致 回显失败。】
====具体语法不再说了,其实是不太熟悉。。。
代码:
//1.1:回显权限
/*
========================【回显权限】方案一;post请求不嵌套。接收返回数据。
var perms;
alert("===复制前:"+perms);
//=============================查询roleId对应的role信息。 for回显
$.post("../../permissionAction_findByRoleId.action", {"roleId":roleId},function(permissions){
for (var i = 0; i < permissions.length; i++) {
$("#permissionTD").append("===<input type='checkbox' checked='checked' name='permissionIds' value='"+permissions[i].id+"' />"+permissions[i].name)
}
perms= permissions;
});
alert("===接收权限:"+JSON.stringify(perms));//===接收不到===【因为请求时异步的。这句话可能先执行了】== */
//========================【回显权限】方案二;post请求嵌套。接收返回数据。==ok
//1、在页面中动态显示权限数据===========【修改后,回显选中】=====ok
$.post("../../permissionAction_findAll.action", function(data){
//=============================查询roleId对应的role信息。 for回显
$.post("../../permissionAction_findByRoleId.action", {"roleId":roleId},function(permissions){
//alert(JSON.stringify(data));//==######=方法内部,当然访问得到。
//alert( "permissions==="+JSON.stringify(permissions) );//==######=方法内部,当然访问得到。
//====遍历所有
for (var i = 0; i < data.length; i++) {
$("#permissionTD").append("<input type='checkbox' name='permissionIds' id='"+data[i].id+"' value='"+data[i].id+"' />"+data[i].name)
//alert("permissions.length==="+permissions.length);
for (var j = 0; j < permissions.length; j++) {
/* if (permissions[j].id=data[i].id) {
$("#permissionTD").append("===<input type='checkbox' checked='checked' name='permissionIds' value='"+permissions[j].id+"' />"+permissions[j].name)
} else {
$("#permissionTD").append("<input type='checkbox' name='permissionIds' id='"+data[i].id+"' value='"+data[i].id+"' />"+data[i].name)
} */
if (permissions[j].id==data[i].id) {
//alert("permissions[j].id:"+permissions[j].id+"=====data[i].id"+data[i].id);
//$("#"+data[i].id).attr("checked",checked);
//$("#"+data[i].id).attr("checked",'checked');//===ok
$("#"+data[i].id).attr("checked",true);//===最好用true false ok
}
}
}
});
});//====回显权限,post=============end
========================注意上面都是 修改角色 页面的js代码。需要在页面加载完毕回显勾选。
所以都是在 $(function(){
//====。。。
}) 内部的
==========Ps:补充:
===回显基本类型 :
//0、回显menu信息: 基本类型数据==simple===ok ====最简单的==最后才做
//var formData = $("#roleForm").serializeJSON();//======信息不是来自表单手动填写。
$.post("../../roleAction_findByRoleId.action",{"roleId" : roleId},function(data){
//alert(data);
//alert(JSON.stringify(data));
$('#roleForm').form("load",data);//====load回显基本类型数据===
});
//1、回显menu信息: 【接收 上个页面传来的roleId:知识点:“静态页面间传参”:上个页面:location.href;接受页面:location.search】
//回显 权限和菜单 需要 使用roleId 。。。。
//=====================================接收上个页面参数roleId【location.search】 ===for回显
//alert("==="+location.search);//===接收上个页面参数roleId
var param = location.search.split("=");
var roleId = param[1];