jq 树形联动选中 ，根据后台数据二次修改数据

结果

 

后台数据与修改结果

 

 

 

 

 

代码

<!DOCTYPE html>
<html lang="en">

<head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
</head>

<body>
     <!--保存按钮-->
     <div class='btnBC'><button type="button" class="btn btn-primary   btn-lg" onclick="btnXG()">确认</button></div>
     <style>
          .btnBC {
               width: 74px;
               height: 50px;
               position: fixed;
               right: 0;
               bottom: 35px;
               z-index: 999999;
          }

          .checkbox {
               padding-left: 15px;
          }

          .box-title {
               display: flex;
          }

          .box-title li {
               flex: 1;
          }
     </style>

     <div class="box"></div>

</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
     $(function () {
          //初始化js代码 
          // var row = '[X]jsonStr[/X]'   //获取当前用户权限数据
          // var obj = JSON.parse(row);
          // console.log(row)
          var obj = [
               {
                    "ROLEFOLDERID": "002",
                    "ROLENAME": "系统管理",
                    "children": [
                         {
                              "REMARK": "菜单",
                              "ROLEFOLDERID": "002",
                              "ROLENAME": "系统管理",
                              "ROLENUMBER": "QX010",
                              "state": "0"
                         }
                    ]
               },
               {
                    "ROLEFOLDERID": "002001",
                    "ROLENAME": "字典管理",
                    "children": [
                         {
                              "REMARK": "菜单",
                              "ROLEFOLDERID": "002001",
                              "ROLENAME": "字典管理",
                              "ROLENUMBER": "QX011",
                              "state": "0"
                         }
                    ]
               },
               {
                    "ROLEFOLDERID": "002002",
                    "ROLENAME": "权限配置",
                    "children": [
                         {
                              "REMARK": "菜单",
                              "ROLEFOLDERID": "002002",
                              "ROLENAME": "权限配置",
                              "ROLENUMBER": "QX017",
                              "state": "0"
                         }
                    ]
               },
               {
                    "ROLEFOLDERID": "002003",
                    "ROLENAME": "接口配置",
                    "children": [
                         {
                              "REMARK": "菜单",
                              "ROLEFOLDERID": "002003",
                              "ROLENAME": "接口配置",
                              "ROLENUMBER": "QX018",
                              "state": "0"
                         }
                    ]
               },
               {
                    "ROLEFOLDERID": "002004",
                    "ROLENAME": "上传文件配置",
                    "children": [
                         {
                              "REMARK": "菜单",
                              "ROLEFOLDERID": "002004",
                              "ROLENAME": "上传文件配置",
                              "ROLENUMBER": "QX019",
                              "state": "0"
                         }
                    ]
               },
               {
                    "ROLEFOLDERID": "002005",
                    "ROLENAME": "权限管理",
                    "children": [
                         {
                              "REMARK": "菜单",
                              "ROLEFOLDERID": "002005",
                              "ROLENAME": "权限管理",
                              "ROLENUMBER": "QX020",
                              "state": "0"
                         }
                    ]
               },
               {
                    "ROLEFOLDERID": "003",
                    "ROLENAME": "查询统计",
                    "children": [
                         {
                              "REMARK": "菜单",
                              "ROLEFOLDERID": "003",
                              "ROLENAME": "查询统计",
                              "ROLENUMBER": "QX008",
                              "state": "0"
                         }
                    ]
               },
               {
                    "ROLEFOLDERID": "003001",
                    "ROLENAME": "个人住房超过套数查询",
                    "children": [
                         {
                              "REMARK": "菜单",
                              "ROLEFOLDERID": "003001",
                              "ROLENAME": "个人住房超过套数查询",
                              "ROLENUMBER": "QX009",
                              "state": "0"
                         }
                    ]
               },
               {
                    "ROLEFOLDERID": "003002",
                    "ROLENAME": "档案超过套数查询",
                    "children": [
                         {
                              "REMARK": "菜单",
                              "ROLEFOLDERID": "003002",
                              "ROLENAME": "档案超过套数查询",
                              "ROLENUMBER": "QX012",
                              "state": "0"
                         }
                    ]
               },
               {
                    "ROLEFOLDERID": "003003",
                    "ROLENAME": "按户籍套数次数查询",
                    "children": [
                         {
                              "REMARK": "菜单",
                              "ROLEFOLDERID": "003003",
                              "ROLENAME": "按户籍套数次数查询",
                              "ROLENUMBER": "QX013",
                              "state": "0"
                         }
                    ]
               },
               {
                    "ROLEFOLDERID": "003004",
                    "ROLENAME": "按户籍按年龄统计套数",
                    "children": [
                         {
                              "REMARK": "菜单",
                              "ROLEFOLDERID": "003004",
                              "ROLENAME": "按户籍按年龄统计套数",
                              "ROLENUMBER": "QX014",
                              "state": "0"
                         }
                    ]
               },
               {
                    "ROLEFOLDERID": "003005",
                    "ROLENAME": "个人住房被查询情况",
                    "children": [
                         {
                              "REMARK": "菜单",
                              "ROLEFOLDERID": "003005",
                              "ROLENAME": "个人住房被查询情况",
                              "ROLENUMBER": "QX015",
                              "state": "0"
                         }
                    ]
               },
               {
                    "ROLEFOLDERID": "003006",
                    "ROLENAME": "档案查询被查询情况",
                    "children": [
                         {
                              "REMARK": "菜单",
                              "ROLEFOLDERID": "003006",
                              "ROLENAME": "档案查询被查询情况",
                              "ROLENUMBER": "QX016",
                              "state": "0"
                         }
                    ]
               },
               {
                    "ROLEFOLDERID": "006",
                    "ROLENAME": "业务办理流程",
                    "children": [
                         {
                              "REMARK": "菜单",
                              "ROLEFOLDERID": "006",
                              "ROLENAME": "业务办理流程",
                              "ROLENUMBER": "QX001",
                              "state": "0"
                         }
                    ]
               },
               {
                    "ROLEFOLDERID": "006001",
                    "ROLENAME": "个人名下房产查询",
                    "children": [
                         {
                              "REMARK": "菜单",
                              "ROLEFOLDERID": "006001",
                              "ROLENAME": "个人名下房产查询",
                              "ROLENUMBER": "QX002",
                              "state": "0"
                         },
                         {
                              "REMARK": "按钮",
                              "ROLEFOLDERID": "006001",
                              "ROLENAME": "交登所查询",
                              "ROLENUMBER": "QX003",
                              "state": "0"
                         },
                         {
                              "REMARK": "按钮",
                              "ROLEFOLDERID": "006001",
                              "ROLENAME": "档案馆查询",
                              "ROLENUMBER": "QX021",
                              "state": "0"
                         },
                         {
                              "REMARK": "数据",
                              "ROLEFOLDERID": "006001",
                              "ROLENAME": "查询已注销数据",
                              "ROLENUMBER": "QX022",
                              "state": "0"
                         },
                         {
                              "REMARK": "数据",
                              "ROLEFOLDERID": "006001",
                              "ROLENAME": "超三权限",
                              "ROLENUMBER": "QX023",
                              "state": "0"
                         },
                         {
                              "REMARK": "按钮",
                              "ROLEFOLDERID": "006001",
                              "ROLENAME": "档案馆打印",
                              "ROLENUMBER": "QX024",
                              "state": "0"
                         },
                         {
                              "REMARK": "按钮",
                              "ROLEFOLDERID": "006001",
                              "ROLENAME": "交登所打印",
                              "ROLENUMBER": "QX025",
                              "state": "0"
                         }
                    ]
               },
               {
                    "ROLEFOLDERID": "006002",
                    "ROLENAME": "待办箱",
                    "children": [
                         {
                              "REMARK": "菜单",
                              "ROLEFOLDERID": "006002",
                              "ROLENAME": "待办箱",
                              "ROLENUMBER": "QX004",
                              "state": "0"
                         }
                    ]
               },
               {
                    "ROLEFOLDERID": "006003",
                    "ROLENAME": "已办箱",
                    "children": [
                         {
                              "REMARK": "菜单",
                              "ROLEFOLDERID": "006003",
                              "ROLENAME": "已办箱",
                              "ROLENUMBER": "QX005",
                              "state": "0"
                         }
                    ]
               },
               {
                    "ROLEFOLDERID": "006004",
                    "ROLENAME": "退件箱",
                    "children": [
                         {
                              "REMARK": "菜单",
                              "ROLEFOLDERID": "006004",
                              "ROLENAME": "退件箱",
                              "ROLENUMBER": "QX006",
                              "state": "0"
                         }
                    ]
               },
               {
                    "ROLEFOLDERID": "006005",
                    "ROLENAME": "办结箱",
                    "children": [
                         {
                              "REMARK": "菜单",
                              "ROLEFOLDERID": "006005",
                              "ROLENAME": "办结箱",
                              "ROLENUMBER": "QX007",
                              "state": "0"
                         }
                    ]
               },
               {
                    "ROLEFOLDERID": "006006",
                    "ROLENAME": "个人房产批量查询",
                    "children": [
                         {
                              "REMARK": "菜单",
                              "ROLEFOLDERID": "006006",
                              "ROLENAME": "个人房产批量查询",
                              "ROLENUMBER": "QX026",
                              "state": "0"
                         },
                         {
                              "REMARK": "数据",
                              "ROLEFOLDERID": "006006",
                              "ROLENAME": "查询已注销数据",
                              "ROLENUMBER": "QX032",
                              "state": "0"
                         }
                    ]
               },
               {
                    "ROLEFOLDERID": "006007",
                    "ROLENAME": "房产批量直管房/农户查询",
                    "children": [
                         {
                              "REMARK": "菜单",
                              "ROLEFOLDERID": "006007",
                              "ROLENAME": "房产批量直管房/农户查询",
                              "ROLENUMBER": "QX027",
                              "state": "0"
                         }
                    ]
               },
               {
                    "ROLEFOLDERID": "006008",
                    "ROLENAME": "房产批量建设部查询",
                    "children": [
                         {
                              "REMARK": "菜单",
                              "ROLEFOLDERID": "006008",
                              "ROLENAME": "房产批量建设部查询",
                              "ROLENUMBER": "QX028",
                              "state": "0"
                         }
                    ]
               },
               {
                    "ROLEFOLDERID": "006009",
                    "ROLENAME": "房产批量自然资源部查询",
                    "children": [
                         {
                              "REMARK": "菜单",
                              "ROLEFOLDERID": "006009",
                              "ROLENAME": "房产批量自然资源部查询",
                              "ROLENUMBER": "QX029",
                              "state": "0"
                         }
                    ]
               },
               {
                    "ROLEFOLDERID": "006010",
                    "ROLENAME": "房产批量单位查询",
                    "children": [
                         {
                              "REMARK": "菜单",
                              "ROLEFOLDERID": "006010",
                              "ROLENAME": "房产批量单位查询",
                              "ROLENUMBER": "QX030",
                              "state": "0"
                         }
                    ]
               },
               {
                    "ROLEFOLDERID": "006011",
                    "ROLENAME": "个人名下查询证明验证",
                    "children": [
                         {
                              "REMARK": "菜单",
                              "ROLEFOLDERID": "006011",
                              "ROLENAME": "个人名下查询证明验证",
                              "ROLENUMBER": "QX031",
                              "state": "0"
                         }
                    ]
               }
          ]
          getTabale(obj);
          getchexbox();
     });

     //  处理数组
     function split(data) {
          var childrenArr = [], arr = [];
          // 拆分数据
          for (var i = 0; i < data.length; i++) {
               var ai = data[i];
               if (ai.ROLEFOLDERID.length >= 6) {
                    for (var j = 0; j < ai.children.length; j++) {
                         childrenArr.push({
                              "REMARK": ai.children[j].REMARK,
                              "ROLEFOLDERID": ai.children[j].ROLEFOLDERID,
                              "faID": ai.ROLEFOLDERID.substring(0, 3),
                              "ROLENAME": ai.children[j].ROLENAME,
                              "ROLENUMBER": ai.children[j].ROLENUMBER,
                              "state": ai.children[j].state
                         })
                    }
               }
               if (ai.ROLEFOLDERID.length <= 3) {
                    for (var j = 0; j < ai.children.length; j++) {
                         arr.push({
                              "REMARK": ai.children[j].REMARK,
                              "ROLEFOLDERID": ai.children[j].ROLEFOLDERID,
                              "ROLENAME": ai.children[j].ROLENAME,
                              "ROLENUMBER": ai.children[j].ROLENUMBER,
                              "state": ai.children[j].state
                         })
                    }

               }

          }
          var listarr = getgroups(childrenArr);
          var newlsit = groups(listarr);
          var list = Mergedata(newlsit, arr);
          return list;
     }
     // 一次分组
     function getgroups(arr) {
          var map = {},
               dest = [];
          for (var i = 0; i < arr.length; i++) {
               var ai = arr[i];
               if (!map[ai.ROLEFOLDERID]) { //id 依赖字段 可自行更改
                    dest.push({
                         ROLEFOLDERID: ai.ROLEFOLDERID, //id  依赖字段 可自行更改
                         REMARK: ai.REMARK, //id  依赖字段 可自行更改
                         ROLENAME: ai.ROLENAME, //id  依赖字段 可自行更改
                         ROLENUMBER: ai.ROLENUMBER, //id  依赖字段 可自行更改
                         state: ai.state, //id  依赖字段 可自行更改
                         faID: ai.faID, //id  依赖字段 可自行更改
                         children: []
                    });
                    map[ai.ROLEFOLDERID] = ai;
               } else {
                    for (var j = 0; j < dest.length; j++) {
                         var dj = dest[j];
                         if (dj.ROLEFOLDERID == ai.ROLEFOLDERID) { //id 依赖字段 可自行更改
                              dj.children.push(ai);
                              break;
                         }
                    }
               }
          }
          return dest;
     }
     // 二次分组
     function groups(arr) {
          var map = {},
               dest = [];
          for (var i = 0; i < arr.length; i++) {
               var ai = arr[i];
               if (!map[ai.faID]) { //id 依赖字段 可自行更改
                    dest.push({
                         ROLEFOLDERID: ai.faID, //id  依赖字段 可自行更改
                         faID: ai.faID, //id  依赖字段 可自行更改
                         row: [ai]
                    });
                    map[ai.faID] = ai;
               } else {
                    for (var j = 0; j < dest.length; j++) {
                         var dj = dest[j];
                         if (dj.faID == ai.faID) { //id 依赖字段 可自行更改
                              dj.row.push(ai);
                              break;
                         }
                    }
               }
          }
          return dest;
     }


     //    合并数据 
     function Mergedata(newArr, arr) {
          var list = [];
          for (var i = 0; i < arr.length; i++) {
               var ai = arr[i];
               for (var j = 0; j < newArr.length; j++) {
                    var aj = newArr[j];
                    if (ai.ROLEFOLDERID == aj.faID) {
                         list.push({
                              "REMARK": ai.REMARK,
                              "ROLEFOLDERID": ai.ROLEFOLDERID,
                              "ROLENAME": ai.ROLENAME,
                              "ROLENUMBER": ai.ROLENUMBER,
                              "state": ai.state,
                              "children": aj.row
                         })
                    }
               }
          }
          return list;

     }



     // 渲染数据
     function getTabale(obj) {
          var arr = split(obj);
          var html = "<ul class='box-title'>"
          for (var i = 0; i < arr.length; i++) {
               var ai = arr[i];
               // 一级菜单
               // 构造后端需要的参数
               var childrenval = ai.ROLENUMBER + '-' + ai.ROLENAME;
               var childrenname = ai.ROLENAME;
               var ROLENUMBER = ai.ROLENUMBER;
               var REMARK = ai.REMARK;
               // 0 无权限
               // 1 有权限
               html += '<li> ';
               html += REMARK + ':<label>';
               var state = ai.state;
               if (state == 0) {
                    html += '<input type="checkbox"  data-value="from"  id=' + ROLENUMBER + ' name="item" value=' + childrenval + '>';
               } else if (state == 1) {
                    html += '<input type="checkbox"  data-value="from" id=' + ROLENUMBER + '  checked="checked"  name="item" value=' + childrenval + '>';
               }
               html += childrenname + '</label>';
               html += '<ul class="box-children">'
               for (var j = 0; j < ai.children.length; j++) {
                    var aj = ai.children[j];
                    // 构造后端需要的参数
                    var childrenval = aj.ROLENUMBER + '-' + aj.ROLENAME;
                    var childrenname = aj.ROLENAME;
                    var REMARK = aj.REMARK;
                    // 0 无权限
                    // 1 有权限
                    html += '<li>';
                    html += REMARK + ': <label>';
                    var state = aj.state;
                    if (state == 0) {
                         html += '<input type="checkbox"  data-value="from-list"  name=' + ROLENUMBER + ' value=' + childrenval + '>';
                    } else if (state == 1) {
                         html += '<input type="checkbox"  data-value="from-list" checked="checked" name=' + ROLENUMBER + ' value=' + childrenval + '>';
                    }
                    html += childrenname + '</label>';
                    if (aj.children.length > 0) {
                         html += '<ul class="er-children">'
                         for (var k = 0; k < aj.children.length; k++) {
                              var ak = aj.children[k];
                              // 构造后端需要的参数
                              var childrenval = ak.ROLENUMBER + '-' + ak.ROLENAME;
                              var REMARK = ak.REMARK;
                              var childrenname = ak.ROLENAME;

                              // 0 无权限
                              // 1 有权限
                              html += '<li>';
                              html += REMARK + ': <label>';
                              var state = aj.state;
                              if (state == 0) {
                                   html += '<input type="checkbox" data-value="list"   name=' + ROLENUMBER + ' value=' + childrenval + '>';
                              } else if (state == 1) {
                                   html += '<input type="checkbox" data-value="list"  checked="checked"  name=' + ROLENUMBER + ' value=' + childrenval + '>';
                              }
                              html += childrenname + '</label>';
                              html += '</li>';
                         }
                         html += "</ul>"
                    }

                    html += '</li>';
               }
               html += "</ul>"
               html += '</li>';

          }

          html += "</ul>"
          $('.box').append(html);

     }

     function getchexbox() {
          // 所有输入框点击事件
          $("input[type='checkbox']").change(function () {
               // 点击当前选中类型
               var ty = $(this).attr('data-value');
               var id = $(this).attr('name');
               if (ty == 'from') {
                    // 最大父级 全选 与 反选
                    var _xz = $(this).parent().siblings().find('input');
                    var zt = $(this).prop('checked');
                    _xz.each(function () {
                         if (zt) {
                              $(this).prop('checked', true);
                         } else {
                              $(this).prop('checked', false);
                         }
                    });
               } else if (ty == 'from-list') {
                    // 二级菜单
                    var zt = $(this).prop('checked');
                    var _xz = $(this).parent().siblings().find('input');
                    // 区分是否有子集
                    if (_xz.length > 0) {
                         _xz.each(function () {
                              if (zt) {
                                   $(this).prop('checked', true);
                                   $('#' + id).prop('checked', true);
                              } else {
                                   $(this).prop('checked', false);
                                   // 判断最大父状态,不取消最大父级状态
                                   if (!$('#' + id).prop('checked')) {
                                        $('#' + id).prop('checked', true);
                                   }
                              }
                         });
                    } else {
                         // 没有子集
                         if (zt) {
                              $('#' + id).prop('checked', true);
                         } 
                    }

               }else if(ty == 'list'){
                    var zt = $(this).prop('checked');
                    var fj = $(this).parents('.er-children').parent().children().eq(0).find('input');
                    if (zt) {
                         $(this).prop('checked', true);
                         fj.prop('checked', true);
                         $('#' + id).prop('checked', true);
                    }
               }

          });
     };





</script>

</html>

 

posted @ 2022-06-20 16:29  前端搬运工bug  阅读(55)  评论(0)  编辑  收藏  举报