###### bos实战之：用户修改角色：回显 权限(复选框选中)和回显 菜单(zTree树结点选中)。收获总结

========既然是 回显。重点也就是在页面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回显基本类型数据===
});

===接收roleId：
//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];