ztree树插件- 树形多选结构展示

最新推荐文章于 2024-05-24 16:59:14 发布

来去匆匆的过客

最新推荐文章于 2024-05-24 16:59:14 发布

阅读量2.1k

点赞数

文章标签： ztree树插件-树形多选结构

本文链接：https://blog.csdn.net/chang0704/article/details/99825157

版权

1、首先导入Bootstrap js、样式

<link rel="stylesheet" href="../../static/common/ztree/css/metroStyle/metroStyle.css" />
<script src="/static/common/ztree/js/jquery.ztree.all.min.js"></script>

2、引入的 selectree.js (这是固定代码，哪里有变动我会详细说明)

/**
 * 多选框插件
 */
$(document).ready(function() {
    $('input').iCheck({
        checkboxClass : 'icheckbox_flat-green',
        radioClass : 'iradio_flat-green'
    });
});

/**
 * 系统提示
 */
$(function() {
    $('.system-tip').on("click", function() {
        layer.tips('"是" 只有超级管理员能修改<br>"否" 拥有角色修改权限能修改', '.system-tip');
    })
    $('.status-tip').on("click", function() {
        layer.tips('"开启" 代表此数据可用<br>"冻结" 代表此数据不可用', '.status-tip');
    })
})

/**
 * 初始化菜单树
 */
var menuZtreeObj;var deptZtreeObj;
var menuZtreeSetting = {
    data : {
        simpleData : {
            enable : true,
            idKey : "menuId",
            pIdKey : "parentId",
            rootPId : 0
        },
        key : {
            name : 'menuName',
            title : 'menuName'
        }
    },
    check : {
        enable : true,
        nocheckInherit : true
    }
};
var deptZtreeSetting = {
    data : {
        simpleData : {
            enable : true,
            idKey : "deptId",
            pIdKey : "parentId",
            rootPId : 0
        },
        key : {
            name : 'deptName',
            title : 'deptName'
        }
    },
    check : {
        enable : true,
        nocheckInherit : true
    }
};
$(function() {
    menuTreedata = eval('(' + menuTreedata + ')');
    menuZtreeObj = $.fn.zTree.init($("#menuZtree"), menuZtreeSetting, menuTreedata);
    deptZtreeSetting.check.chkboxType = { "Y" : "", "N" : "" };
    deptTreedata = eval('(' + deptTreedata + ')');
    deptZtreeObj = $.fn.zTree.init($("#deptZtree"), deptZtreeSetting, deptTreedata);

    //展开所有节点
    //ztreeObject.expandAll(true);
})


/**
 * 表单验证
 */
$(function() {
    $('#form').bootstrapValidator({
        container : 'tooltip',
        message : 'This value is not valid',
        feedbackIcons : {
            valid : 'glyphicon glyphicon-ok',
            invalid : 'glyphicon glyphicon-remove',
            validating : 'glyphicon glyphicon-refresh'
        },
        fields : {
            'positionName' : {
                message : '角色名称验证失败',
                validators : {
                    notEmpty : {
                        message : '角色名称不能为空'
                    }
                }
            },
            'positionCode' : {
                message : '角色编码验证失败',
                validators : {
                    notEmpty : {
                        message : '角色编码不能为空'
                    }
                }
            },
        }
    })
        .on('success.form.bv', function(e) {
            // Prevent form submission
            e.preventDefault();

            // Get the form instance
            var $form = $(e.target);

            // Get the BootstrapValidator instance
            var bv = $form.data('bootstrapValidator');

            debugger
            menuZtreeObj = $.fn.zTree.getZTreeObj("menuZtree");
            var menuNodes = menuZtreeObj.getCheckedNodes(true);
            var menuIds = '';
            if (menuNodes != null && menuNodes.length > 0) {
                for (var i = 0; i < menuNodes.length; i++) {
                    menuIds += menuNodes[i].menuId + ',';
                }
            }
            deptZtreeObj = $.fn.zTree.getZTreeObj("deptZtree");
            var deptNodes = deptZtreeObj.getCheckedNodes(true);
            var deptIds = '';
            if (deptNodes != null && deptNodes.length > 0) {
                for (var i = 0; i < deptNodes.length; i++) {
                    deptIds += deptNodes[i].deptId + ',';
                }
            }
            debugger
            var params = '';
            params += $form.serialize();
            params += "&menuIds=" + menuIds;
            params += "&deptIds=" + deptIds;
            var method = $('#form').attr('data-method');
            // Use Ajax to submit form data
            if (method === 'put') {
                $.ajax({
                    data : params,
                    dataType : 'json',
                    type : 'put',
                    url : $form.attr('action'),
                    success : function(result) {
                        if (result.code === "200" && result.data===1) {
                            parent.layer.msg("操作角色成功!", {
                                shade : 0.3,
                                time : 1500
                            }, function() {
                                window.parent.location.reload(); // 刷新父页面
                            });
                        } else if(result.code === "200" && result.data === 0){
                            layer.msg('提交失败，当前角色名称已存在!', {
                                icon : 2,
                                time : 3000
                            });
                        } else {
                            layer.msg(result.message, {
                                icon : 2,
                                time : 1000
                            });
                        }
                    }
                })
            } else if (method === 'post') {
                $.ajax({
                    data : params,
                    dataType : 'json',
                    type : 'post',
                    url : $form.attr('action'),
                    success : function(result) {
                        if (result.code === "200" && result.data === 1) {
                            parent.layer.msg("操作角色成功!", {
                                shade : 0.3,
                                time : 1500
                            }, function() {
                                window.parent.location.reload(); // 刷新父页面
                            });
                        } else if(result.code === "200" && result.data === 0){
                            layer.msg('提交失败，当前角色名称已存在!', {
                                icon : 2,
                                time : 3000
                            });
                        } else {
                            layer.msg(result.message, {
                                icon : 2,
                                time : 1000
                            });
                        }
                    }
                })
            }
        });
})

3、HTML 页面中接收数据

<!-- 自定义js -->
    <script type="text/javascript">
      var menuTreedata = '${menus}';//ztree
      var deptTreedata = '${depts}';//ztree
    </script>

// input框在页面上展示数据
 <div class="form-group">
     <label class="col-sm-2 col-xs-offset-1 control-label">角色授权：</label>
	<div class="col-sm-9">
    	<div id="menuZtree" class="ztree"></div>
	</div>
</div>
<div class="hr-line-dashed"></div>
	<div class="form-group">
    	<label class="col-sm-2 col-xs-offset-1 control-label">部门授权：</label>
		<div class="col-sm-9">
    		<div id="deptZtree" class="ztree"></div>
		</div>
</div>

4、前台说完了，咱们主要来看后台代码的实现，如何返回json数据，是通过什么方式继续往下看

后台代码

 1、Controller
         @RequestMapping("/toEdit")
    public ModelAndView toEdit(String positionId){
        ModelAndView mv = new ModelAndView("position/positionEdit");
        SysPosition position = iSysPositionService.getById(positionId);
        List<SysMenu> menuList = iSysMenuService.findMenuByIsDelete(false);
        List<SysPositionMenu> pmList = iSysPositionMenuService.findPositionMenuId(positionId);
        List<SysDepartment> deptList = departmentService.list(new QueryWrapper<SysDepartment>().lambda().eq(SysDepartment::getIsDelete,0));
        List<SysPositionDept> pdList = sysPositionDeptService.list(new QueryWrapper<SysPositionDept>().lambda().eq(SysPositionDept::getPositionId,positionId));
        List<Map> list = new ArrayList<Map>();
        Map<String,Object> map;
        for(SysMenu menu:menuList){
            map = new HashMap<>();
            map.put("menuId", menu.getId());
            map.put("menuName", menu.getMenuName());
            map.put("parentId", menu.getParentId());
            for(SysPositionMenu syspm : pmList){
                if(StringUtils.equals(syspm.getMenuId(),menu.getId())){
                    map.put("checked",true);
                    continue;
                }
            }
            if(StringUtils.equals(menu.getParentId(),"0")){
                map.put("open", true);
            }
            list.add(map);
        }
        List<Map> depts = new ArrayList<>();
        for (SysDepartment dept : deptList){
            map = new HashMap<>();
            map.put("deptId", dept.getId());
            map.put("deptName", dept.getDepartmentName());
            map.put("parentId", dept.getParentId());
            for(SysPositionDept syspd : pdList){
                if(StringUtils.equals(syspd.getDeptId(),dept.getId())){
                    map.put("checked",true);
                    continue;
                }
            }
//            if(StringUtils.equals(dept.getParentId(),"0")){
//                map.put("open",true);
//            }
            depts.add(map);
        }
        mv.addObject("menus", JSON.toJSONString(list));
        mv.addObject("depts",JSON.toJSONString(depts));
        return mv;
    }

5、树形结构以及结构数据格式

在这里插入图片描述

6、json数据格式

menuIds=0,1,11,13,7,8,9,2,15,3f77cd6140e15d0d7d9d2ae7ecd99b4b,5,565fc9e3f5fdb66f86f06bf12644f81a,3,10,7e3bad41f86298a796629d011cf76263,6fb9a73cd424433e3e4e059870e8a6bb,fa5fa01390cc5d4589887a59b40e514d,e1786a17b74d11e9a45400163e2e7cd0,56b5bf36f7577cf8252dc34ea5fdb327,
String[] menuIdArr = menuIds.split(",");

来去匆匆的过客

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
ztree树插件- 树形多选结构展示

1、首先导入Bootstrap js、样式<link rel="stylesheet" href="../../static/common/ztree/css/metroStyle/metroStyle.css" /><script src="/static/common/ztree/js/jquery.ztree.all.min.js"></script>...
复制链接

扫一扫