树形节点图-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45587547/article/details/136345508

html部分：

<script type="text/javascript" src="/js/mytree/jquery.ztree.core.js"></script>
<script type="text/javascript" src="/js/mytree/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="/js/mytree/jquery.ztree.exedit.js"></script>
<script type="text/javascript" src="/js/mytree/jquery.ztree.all.min.js"></script>
<script type="text/javascript" src="/js/mytree/jquery.ztree.exhide.min.js"></script>
<script type="text/javascript" src="/js/mytree/jquery-1.4.4.min.js"></script>
//引入的外部资源因该用不了这么多

<div class="modal-header">
    <div class="modal-body" style="color: white">
        <!--主体-->
        <ul id="treeDemo" class="ztree"
            style="color: white !important;width:100%; overflow-y:auto;">
        </ul>
    </div>
</div>

<div class="modal-footer" style="position: fixed;right: 40px;bottom: 10px;border: transparent">
    <button type="button" class="btn btn-primary" data-dismiss="modal">取消</button>
    <button type="button" class="btn btn-primary" id="mytreeconfirmBtn" data-dismiss="modal">确认</button>
</div>

css部分：

//剩余样式字节可以根据需求调
#treeDemo {
         width: 100%;
        }
.ztree li .level4 {
         height: auto;
         width: auto;
        }

js部分：

$(document).ready(function () {
        //打开树形图
        var zNodes_hns = [];
        var zNodes_button = [];
        var devIds = [];//勾选节点的id数组
        var one_setting = {
            treeId: "treeDemo",
            treeObj: null,
            async: {
                enable: true,//设置 zTree 是否开启异步加载模式
            },
            view: {
                selectedMulti: false
            },
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",//本节点id
                    pIdKey: "pId",//父节点id
                    rootPId: 0
                }
            },
            edit: {
                enable: false,//不允许编辑节点
            },
            callback: {
                onClick: one_zTreeOnClick,//点击节点时的回调函数
            }
        };
        
        var zNodes_hn = {id: '顶级节点的id', pId: 0, name: "河南", open: true};
        zNodes_hns.push(zNodes_hn)
        $(document).ready(function () {
            $.fn.zTree.init($("#treeDemo"), one_setting, zNodes_hns);//展示“河南”数据
        })

        //当点击河南时展开第二层节点
        function one_zTreeOnClick(event, treeId, treeNode) {
            var two_setting = {
                treeId: "",
                treeObj: null,
                async: {
                    enable: true,//设置 zTree 是否开启异步加载模式
                },
                view: {
                    selectedMulti: false//设置是否允许同时选中多个节点。
                },
                check: {
                    enable: true
                },
                data: {
                    simpleData: {
                        enable: true,
                        idKey: "id",//本节点的id
                        pIdKey: "pId",//父节点的id
                        rootPId: 0
                    }
                },
                edit: {
                    enable: false,//不允许编辑节点
                },
                callback: {
                    //回调函数，每次点击节点都调用这个函数，展开下一级节点
                    onClick: one_zTreeOnClick,
                    onCheck: function (event, treeId, treeNode) {//每次勾选时，获取勾选节点的id
                        if (treeNode.checked) {
                            devIds.push(treeNode.id)
                            console.log(devIds)
                        } else if (!treeNode.checked) {
                            // 当取消勾选时，找到该节点ID在devIds中的索引并删除它
                            const index = devIds.indexOf(treeNode.id);
                            if (index !== -1) {
                                devIds.splice(index, 1);
                                console.log(devIds)
                            }
                        }
                    },
                }
            }
            $.ajax({
                type: "GET",
                url: '后台请求路径?id=' + treeNode.id,//传入点击节点的id,请求下一级节点数据
                data: JSON,
                contentType: false, // 告诉jQuery不要去处理发送的数据，直接发送原始数据
                processData: false, // 告诉jQuery不要去处理发送的数据
                cache: false, // 告诉jQuery不要去使用缓存的数据
                success: function (data) {
                    var new_data = [];
                    new_data = data.map((item) => {
                        return {
                            id: item.id,//本节点的id
                            pId: item.pid,//父节点的id
                            name: item.text,//节点的名字
                            open: true,//是否展开
                        };
                    });
                    let isDataExist = zNodes_button.includes(treeNode.id);
                    if (!isDataExist) {
                        zNodes_hns.push(...new_data); // 仅当新数据不存在时才添加到zNodes_hns中
                        zNodes_button.push(treeNode.id);
                        $.fn.zTree.init($("#treeDemo"), two_setting, zNodes_hns); // 展示城市数据
                    }
                }
            })
        }


        // 勾选完毕后，点击“确认”按钮，将节点id发送给后端功能
        $("#mytreeconfirmBtn").click(function () {
            // 确保devIds是一个数组并包含正确的数据
            if (!$.isArray(devIds) || devIds.length === 0) {
                console.error("devIds is not an array or is empty.");
                return;
            }
            console.log(devIds)
            $.ajax({
                type: "POST",
                url: '后端接口路径',//给后端发送id的接口
                data: devIds.join(',') ,
                contentType: "application/json; charset=utf-8", 
                processData: false, // 告诉jQuery不要去处理发送的数据
                cache: false, // 告诉jQuery不要去使用缓存的数据
                success: function (data) {
                    console.log(data)
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    console.error("AJAX request failed: " + textStatus);
                }
            })
        })
    })