美文网首页
Ztree实现后台数据树形展示

Ztree实现后台数据树形展示

作者: 我问你瓜保熟吗 | 来源:发表于2020-04-01 17:33 被阅读0次
    效果图 数据库

    1、ZtreeController

    @Controller
    @RequestMapping
    public class ZtreeController {
    
        @Resource
        private CityZtreeDao cityZtreeDao;
    
        @RequestMapping("/citytree")
        public String citytree() {
            return "ztree";
        }
    
        @RequestMapping("/cityZtree/getCityZtree")
        @ResponseBody
        public Object getCityZtree(String parentId) {
    
            if (org.apache.commons.lang.StringUtils.isNotBlank(parentId)) {
                parentId = parentId;
            } else {
                parentId = "0";
            }
            // 得到父节点
            List<CityZtree> parentCityList = cityZtreeDao.findCityZtreeByParentId(parentId);
    
            // 展开子节点
            List<Map<String, Object>> rootList = new ArrayList<>();
            for (CityZtree cityZtree : parentCityList) {
                Map<String, Object> cityMap = new HashMap<>();
                cityMap.put("id", cityZtree.getId());
                cityMap.put("name", cityZtree.getCityName());
                if (org.apache.commons.lang.StringUtils.isNotBlank(parentId)) {
                    cityMap.put("pId", parentId);
                } else {
                    cityMap.put("pId", "0");
                }
                if (cityZtreeDao.hasChild(cityZtree.getId()) > 0) {
                    cityMap.put("isParent", true);
                }
                rootList.add(cityMap);
            }
            return rootList;
        }
    }
    

    2、Mapper

    @Mapper
    public interface CityZtreeDao {
    
        // 根据父id查找树
        @Select("select * from city_ztree where parent_id=#{parentId}")
        List<CityZtree> findCityZtreeByParentId(String parentId);
    
        // 当前节点是否还有子节点
        @Select("select count(1) from city_ztree where parent_id=#{id}")
        public Integer hasChild(String id);
    }
    

    3、Model

    @Data
    public class CityZtree {
    
        private String id;
        private String cityName;
        private String parentId;
    
    }
    

    4、ztree.html

    <!DOCTYPE html >
    <html xmlns:th="http://www.w3.org/1999/xhtml">
    <head>
        <title>SpringMVC整合Ztree实现树异步加载</title>
    
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
        <link rel="stylesheet" th:href="@{/ztree/zTreeStyle.css}" type="text/css">
        <script th:src="@{/ztree/jquery-1.4.4.min.js}"></script>
        <script th:src="@{/ztree/jquery.ztree.core.js}"></script>
        <script type="text/javascript">
            var setting = {
                data: {
                    simpleData: {       // 采用List模式,而不是JSON格式
                        enable: true
                    }
                }, callback: {
                    onExpand: zTreeOnExpand, // 用于捕获节点被展开的事件回调函数
                    onClick: function (e, treeId, treeNode, clickFlag) {
                        $.fn.zTree.getZTreeObj("myZtree").checkNode(treeNode, !treeNode.checked, true);
                    }
                }
            };
    
            //加载展开方法
            function zTreeOnExpand(event, treeId, treeNode) {
    
                var treeNodeId = treeNode.id;
                $.post(
                    '/cityZtree/getCityZtree',
                    {parentId: treeNodeId},
                    function (data) {
                        var tree = $.fn.zTree.getZTreeObj("myZtree");
    
                        if (!treeNode.zAsync) {
                            tree.addNodes(treeNode, data);
                            treeNode.zAsync = true;
                        } else {
                            tree.reAsyncChildNodes(treeNode, "refresh");
                        }
                    }
                );
            }
    
            //首次进入加载level为1的
            $(function () {
                $.post(
                    '/cityZtree/getCityZtree',
                    function (data) {
                        $.fn.zTree.init($("#myZtree"), setting, data);
                        console.log(data)
                    }
                );
            });
    
        </script>
    </head>
    <body style="overflow-y: auto">
    
    <ul id="myZtree" class="ztree"></ul>
    
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:Ztree实现后台数据树形展示

          本文链接:https://www.haomeiwen.com/subject/asbauhtx.html