需求 由于tree树结构数据过大 几万条甚至几十万条，此时不能一次性返回(否则会造成请求等待过长服务器，和客服端压力过大，浏览器卡死)需要通过查询进行部分展示
1.根据接口默认返回一级目录，点击当前目录发送请求获取下一级，并且展示
2.点击节点 进行展开和关闭
3.对已经进行查询过的节点数据 不在做接口查询 自行保存

<style scoped>
.show{
    display: block;
}
.hide{
    display: none;
}
</style>


<body id="body">

        <div style="text-align: center;position: fixed;width: 100%;height: 30px;left: 0;top: 0;background-color: #FFFFFF;">
            <a href="javascript:" id="preservation" onclick="preservation()">保存</a>
            <a href="javascript:" id="cancel">取消</a>
        </div>
        <div id="index" style="margin-top: 30px;">

        </div>


        <script type="text/javascript">
            let select = ''; //保存选中的id
            ajaxData({
                url: window.url + '/dynamic/mechan',
                method: "GET",
                data: {
                    ID: 0,
                },
            }).then((res) => {
                var data = JSON.parse(res);
                var ul = '';
                console.log(data)
                data.data.forEach((item, index) => {
                    ul +=
                        `<div class="name" id="dom${item.ID}" >
                        <p class="paddp" id="p${item.ID}" data-id="${item.B0121}" onclick="subordinate(dom${item.ID},this)" id="p${item.ID}">${item.NAME}</p>
                        <div  id="div${item.ID}"></div>
                    </div>`
                });
                document.getElementById('index').innerHTML = ul;
            });
            // 当前父节点id,当前节点对象
            function subordinate(ID, domthis) {
                //点击添加选中calss
                var listbox = document.getElementById('index')
                var p = listbox.getElementsByTagName('p');
                for (var i = 0; i <= p.length - 1; i++) {
                    p[i].classList.remove('Select');
                };

                var code = ID.id.slice(3, ID.id.length);
                var f2 = document.getElementById('p' + code).dataset.id;
                select = f2;
                // 展开关闭当前节点
                if (document.getElementById('div' + code).className == 'show') {;
                    document.getElementById('div' + code).classList.remove('show');
                    document.getElementById('div' + code).classList.add('hide');
                    domthis.classList.add('Select');
                    return false;
                } else if (document.getElementById('div' + code).className == 'hide') {
                    document.getElementById('div' + code).classList.remove('hide');
                    document.getElementById('div' + code).classList.add('show');
                    domthis.classList.add('Select');
                    return false;
                };
                // 获取当前点击节点的子级
                ajaxData({
                    url: window.url + '/dynamic/mechan',
                    method: "GET",
                    data: {
                        'ID': code,
                    },
                }).then((res) => {
                    var data = JSON.parse(res);
                    var dom = '';
                    domthis.classList.add('Select');
                    document.getElementById('div' + code).classList.add('show');
                    // console.log(data.data)
                    if (data.data.length <= 0) {
                        // alert('当前节点下没有机构');
                        return false;
                    } else {
                        data.data.forEach((item, index) => {
                            dom +=
                                `<div class="name" id="dom${item.ID}" >
                                <p class="paddp" id="p${item.ID}" data-id="${item.B0121}" onclick="subordinate(dom${item.ID},this,)">${item.NAME}</p>
                                <div  id="div${item.ID}"></div>
                            </div>`
                        });
                        document.getElementById('div' + code).innerHTML = dom;
                    };
                });
            };

            // 
            function preservation() {
                ajaxData({
                    url: window.url + '/dynamic/save/dynamicMany',
                    method: 'POST',
                    data: {
                        'NQGB_BJJA25@BJJA2503': select,
                        'NQGB_BJJA25@BJJA2503NAME': select,
                    },
                    header: ['content-type', 'application/json']
                }).then((res) => {
                    let data = JSON.parse(res);
                    console.log(data)
                    if (data.code == 200) {
                        alert("保存成功");
                    } else {
                        alert("保存失败");
                    };
                });
            }
        </script>
    </body>


//效果图

我是马丁的车夫，欢迎转发收藏！

posted on 2020-12-20 18:08 马丁的车夫阅读(225) 评论(0) 收藏举报

刷新页面返回顶部

导航