Ztree菜单树数据回显

Posted 2020-10-03 在下徐将军

Ztree菜单树数据回显,分两部分查询数据:

　　　　其一: 根据实体id查询出其关联的菜单数据

　　　　其二: 查询所有的菜单数据.

然后,使用Ztree API中进行菜单数据回显的数据进行回显数据,勾选菜单复选框.

 

代码

 1 //2.设置菜单树的全局变量
 2                 var setting = {
 3                     data : {
 4                         key : {
 5                             title : "t"
 6                         },
 7                         simpleData : {            //开启简单数据
 8                             enable : true,
 9                         }
10                     },
11                     check : {                    //开启菜单复选框
12                         enable : true,
13                     }
14                 };    
15 
16 　　　　　/*回显菜单树数据             --start*/
17               
20                     //根据角色id 使用ajax远程加载角色关联的json菜单数据
21                     $.post("${pageContext.request.contextPath}/menuAction_findMenuByRoleId.action", {
22                         "id" : rowData.id
23                     }, function(data) {
24                         //alert(data);
25                         treeNode = data;
26                     },‘json‘);    
27                         
28                     
29                     //3.ajax动态查取菜单树全部节点数据(ztreeNodes)即:data
30                     $.ajax({
31                         url : ‘${pageContext.request.contextPath}/menuAction_findAll.action‘,
32                         type : ‘POST‘,
33                         dataType : ‘json‘,
34                         success : function(data) {
35                             
36                             //4.初始化ztree
37                             $.fn.zTree.init($("#menuTree"), setting, data);
38                             
39                             //当角色关联的菜单数据长度大于0时,遍历角色关联的菜单数据
40                             if (treeNode.length > 0) {
41                                 
42                                 //获取ztree对象
43                                 var treeObj = $.fn.zTree.getZTreeObj("menuTree");
44                                 
45                                 //遍历勾选角色关联的菜单数据
46                                 for (var i = 0; i < treeNode.length; i++) {
47                                     
48                                 //根据角色菜单节点数据的属性搜索，获取与完整菜单树完全匹配的节点JSON对象集合
49                                 var nodes = treeObj.getNodesByParam("id", treeNode[i].id, null);
50                                     
51                                 //勾选当前选中的节点
52                                 treeObj.checkNode(nodes[0],true,true);
53                                     
54                                 };
55                             };
56                         },
57                         error : function(msg) {
58                             alert(‘树加载异常!‘);
59                         }
60                     });
61             
62            /*回显菜单树             --end*/

// 点击更新
    $(‘#updateRole‘).click(function(){

     if($("#editRoleForm").form("validate")){
      var treeObj = $.fn.zTree.getZTreeObj("menuTree");
      var nodes = treeObj.getCheckedNodes(true);//在提交表单之前将选中的checkbox收集
      var array = new Array();
      for(var i=0;i<nodes.length;i++){
       array.push(nodes[i].id);
      }
      var menuIds = array.join(",");
      $("input[name=menuIds]").val(menuIds);//将获取的菜单选项赋值给隐藏域,从而将数据传到后台
      $("#editRoleForm").submit();
     }
    });